Objects and Arrays are the two most commonly used data structures in JavaScript.
They help us store, organize, and manage data efficiently.
Example
const user = {
name: "Samir",
age: 21
};
const fruits = [
"Apple",
"Mango",
"Banana"
];
Objects store related information, while arrays store ordered collections of values.
An Object is a collection of related data stored as key-value pairs.
Instead of creating multiple variables:
const name = "Samir";
const age = 21;
const city = "Jhapa";
We can group them together.
const user = {
name: "Samir",
age: 21,
city: "Jhapa"
};
Objects make related data easier to manage.
const objectName = {
key: value,
key2: value2
};
const user = {
name: "Samir",
age: 21,
isStudent: true
};
JavaScript provides two ways to access object properties.
console.log(user.name);
Output
Samir
console.log(
user["age"]
);
Output
21
Bracket notation is useful when the property name is stored in a variable.
const key = "name";
console.log(user[key]);
Output
Samir
Object properties can be changed.
user.age = 22;
console.log(user.age);
Output
22
New properties can be added anytime.
user.country = "Nepal";
Result
{
name: "Samir",
age: 22,
country: "Nepal"
}
Properties can also be removed.
delete user.age;
Objects can contain functions.
These functions are called methods.
const user = {
name: "Samir",
greet() {
console.log("Hello");
}
};
user.greet();
Output
Hello
Objects can contain other objects.
const user = {
name: "Samir",
address: {
city: "Jhapa",
country: "Nepal"
}
};
Access nested properties
console.log(
user.address.city
);
Output
Jhapa
An Array stores multiple values inside a single variable.
Instead of writing:
const fruit1 = "Apple";
const fruit2 = "Mango";
const fruit3 = "Banana";
We use:
const fruits = [
"Apple",
"Mango",
"Banana"
];
Arrays are ideal for storing lists of data.
const arrayName = [
value1,
value2,
value3
];
const colors = [
"Red",
"Blue",
"Green"
];
Arrays use indexes.
0 1 2
Apple Mango Banana
Example
const fruits = [
"Apple",
"Mango",
"Banana"
];
console.log(
fruits[0]
);
Output
Apple
console.log(
fruits.length
);
Output
3
Adds an item to the end of an array.
fruits.push("Orange");
Result
[
"Apple",
"Mango",
"Banana",
"Orange"
]
Removes the last element.
fruits.pop();
Adds an element to the beginning.
fruits.unshift("Orange");
Removes the first element.
fruits.shift();
The recommended way is using for...of.
for (const fruit of fruits) {
console.log(fruit);
}
Output
Apple
Mango
Banana
Modern JavaScript provides many useful array methods.
Creates a new array by transforming each element.
const numbers = [
1,
2,
3
];
const doubled =
numbers.map(
num => num * 2
);
console.log(doubled);
Output
[2, 4, 6]
Returns only elements that match a condition.
const numbers = [
1,
2,
3,
4,
5
];
const even =
numbers.filter(
num => num % 2 === 0
);
console.log(even);
Output
[2, 4]
Returns the first matching element.
const numbers = [
1,
2,
3,
4,
5
];
const result =
numbers.find(
num => num > 3
);
console.log(result);
Output
4
Executes a function for every array element.
const fruits = [
"Apple",
"Mango",
"Banana"
];
fruits.forEach(fruit => {
console.log(fruit);
});
Output
Apple
Mango
Banana
Unlike map(), forEach() does not create a new array.
JSON stands for:
JavaScript Object Notation
JSON is the standard format for exchanging data between:
{
"name": "Samir",
"age": 21
}
const user = {
name: "Samir"
};
{
"name": "Samir"
}
| Object | JSON |
|---|---|
| Keys may omit quotes | Keys require double quotes |
| Can contain functions | Cannot contain functions |
| JavaScript only | Language independent |
Converts an object into JSON.
const user = {
name: "Samir"
};
const json =
JSON.stringify(user);
console.log(json);
Output
{"name":"Samir"}
Converts JSON into a JavaScript object.
const json =
'{"name":"Samir"}';
const user =
JSON.parse(json);
console.log(user);
Output
{
name: "Samir"
}
A Map stores key-value pairs similar to an object.
Unlike objects, a Map allows any data type as a key.
const users =
new Map();
users.set(
"name",
"Samir"
);
users.get("name");
Output
Samir
const map =
new Map();
map.set("name", "Samir");
map.set("age", 21);
| Method | Purpose |
|---|---|
set() |
Add a value |
get() |
Retrieve a value |
has() |
Check if key exists |
delete() |
Remove a key |
clear() |
Remove all values |
size |
Number of entries |
A Set stores only unique values.
Duplicate values are automatically removed.
const numbers =
new Set([1, 2, 2, 3]);
console.log(numbers);
Result
Set(3) {1, 2, 3}
numbers.add(4);
numbers.has(2);
Output
true
| Method | Purpose |
|---|---|
add() |
Add value |
delete() |
Remove value |
has() |
Check value |
clear() |
Remove all values |
size |
Total values |
A WeakMap is similar to a Map but only allows objects as keys.
const weakMap =
new WeakMap();
const user = {};
weakMap.set(
user,
"Samir"
);
When an object is removed from memory, its WeakMap entry is automatically removed.
This helps prevent memory leaks.
A WeakSet is similar to a Set but stores only objects.
const weakSet =
new WeakSet();
const user = {};
weakSet.add(user);
| Object | Map |
|---|---|
| String or Symbol keys | Any key type |
| Simpler syntax | More powerful |
| Most common | Advanced use cases |
| Array | Set |
|---|---|
| Allows duplicates | Unique values only |
| Indexed | No indexes |
| Better for ordered lists | Faster lookups and uniqueness |
const users = [
{
id: 1,
name: "Samir"
},
{
id: 2,
name: "Ram"
}
];
Finding a user
const user =
users.find(
u => u.id === 1
);
console.log(user);
Output
{
id: 1,
name: "Samir"
}
Good
const user = {
name: "Samir",
age: 21
};
Good
const users = [
"Samir",
"Ram",
"Hari"
];
Use methods like map(), filter(), and find() instead of manually writing loops whenever appropriate.
const adults =
users.filter(
user => user.age >= 18
);
const cache =
new Map();
const uniqueNumbers =
[...new Set(numbers)];
This is a common technique in modern JavaScript.
| Concept | Purpose |
|---|---|
| Object | Store key-value pairs |
| Array | Store ordered values |
| JSON | Data exchange format |
| Map | Flexible key-value storage |
| Set | Unique value collection |
| WeakMap | Memory-efficient Map |
| WeakSet | Memory-efficient Set |
Modern JavaScript applications rely heavily on Objects and Arrays.
Object
↓
Store Related Data
Array
↓
Store Lists
JSON
↓
Transfer Data
Map
↓
Flexible Key-Value Storage
Set
↓
Unique Values
WeakMap / WeakSet
↓
Memory Optimization
A typical frontend application's data flow looks like this:
API Response
↓
JSON
↓
JavaScript Objects
↓
Arrays
↓
UI Rendering
Understanding Objects and Arrays is essential because React state, API responses, database records, forms, and most application logic are built around these data structures.