Skip to main content

5. Arrays & Objects

Arrays and objects are the core data structures in JavaScript. Arrays store ordered lists, while objects store key–value pairs. Mastering them lets you model and manipulate any kind of data.

5.1 Arrays​

Creating Arrays​

let nums = [1, 2, 3];
let empty = [];
let mixed = [1, 'a', true];

Accessing Elements​

console.log(nums[0]); // 1
console.log(nums.length); // 3

5.2 Array Methods​

Adding/Removing​

let arr = [1, 2];
arr.push(3); // [1,2,3]
arr.pop();   // [1,2]
arr.unshift(0); // [0,1,2]
arr.shift(); // [1,2]

Searching & Slicing​

let colors = ['red', 'green', 'blue'];
console.log(colors.indexOf('green')); // 1
console.log(colors.slice(0,2)); // ['red','green']

Sorting & Reversing​

let nums = [3,1,2];
nums.sort(); // [1,2,3]
nums.reverse(); // [3,2,1]

Joining & String Conversion​

let letters = ['a','b','c'];
console.log(letters.join('-')); // 'a-b-c'
console.log(letters.toString()); // 'a,b,c'

Iteration & Transformation​

let nums = [1,2,3,4];
let doubled = nums.map(x => x*2); // [2,4,6,8]
let even = nums.filter(x => x%2===0); // [2,4]
let hasBig = nums.some(x => x>3); // true
let sum = nums.reduce((a,b) => a+b, 0); // 10

Spread Operator & Destructuring​

let arr1 = [1,2];
let arr2 = [...arr1, 3]; // [1,2,3]
let [first, ...rest] = arr2; // first=1, rest=[2,3]

5.3 Objects​

Creating Objects​

let user = { name: 'Alice', age: 25 };
let empty = {};

Accessing & Deleting Properties​

console.log(user.name); // 'Alice'
delete user.age;

Nested Objects​

let company = { name: 'Acme', address: { city: 'NY', zip: 10001 } };
console.log(company.address.city); // 'NY'

Traversing Object Keys​

for (let key in user) {
	console.log(key, user[key]);
}

Arrays as Objects​

Arrays are objects with numeric keys. You can add properties, but avoid it for clarity.

5.4 Object Operations​

Object.freeze() & Object.seal()​

let obj = {a:1};
Object.freeze(obj); // cannot change
Object.seal(obj); // cannot add/remove, but can change existing

Destructuring​

let {name} = user;
let [a, b] = [1,2];

Object Methods & this​

let person = {
	name: 'Bob',
	greet() { console.log('Hi, ' + this.name); }
};
person.greet();

5.5 Timing Events​

setTimeout() & setInterval()​

setTimeout(() => console.log('Later!'), 1000);
let id = setInterval(() => console.log('Tick'), 500);
clearInterval(id);

Next: DOM Manipulation