Advanced JavaScript

Master advanced JavaScript concepts including design patterns, performance optimization, and modern development practices.

advanced JavaScript 7 hours

Chapter 9: Advanced Array and Object Methods

Chapter 9 of 15

Chapter 9: Advanced Array and Object Methods

9.1 Array Methods

JavaScript arrays provide powerful methods for manipulation, transformation, and iteration.

Transformation Methods:

const numbers = [1, 2, 3, 4, 5];

// map() - Transform each element
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// flatMap() - Map and flatten
const nested = [[1, 2], [3, 4]];
const flattened = nested.flatMap(arr => arr.map(n => n * 2));
// [2, 4, 6, 8]

// reduce() - Accumulate values
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// reduceRight() - Reduce from right to left
const reversed = numbers.reduceRight((acc, n) => [...acc, n], []);
// [5, 4, 3, 2, 1]

Filtering Methods:

const users = [
    { name: 'John', age: 25, active: true },
    { name: 'Jane', age: 30, active: false },
    { name: 'Bob', age: 20, active: true }
];

// filter() - Select elements
const activeUsers = users.filter(user => user.active);
// [{ name: 'John', ... }, { name: 'Bob', ... }]

// find() - Find first match
const user = users.find(u => u.age > 25);
// { name: 'Jane', age: 30, active: false }

// findIndex() - Find index of first match
const index = users.findIndex(u => u.name === 'Bob');
// 2

Iteration Methods:

// forEach() - Execute for each element
users.forEach(user => console.log(user.name));

// some() - Check if any element passes test
const hasActive = users.some(user => user.active);
// true

// every() - Check if all elements pass test
const allAdults = users.every(user => user.age >= 18);
// true

// includes() - Check if array contains value
const hasBob = users.map(u => u.name).includes('Bob');
// true

Array Manipulation:

// slice() - Extract portion (non-mutating)
const firstTwo = numbers.slice(0, 2);
// [1, 2]

// splice() - Add/remove elements (mutating)
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 99); // Remove 1 element at index 2, insert 99
// arr is now [1, 2, 99, 4, 5]

// concat() - Combine arrays
const combined = [1, 2].concat([3, 4]);
// [1, 2, 3, 4]

// Spread operator (modern way)
const combined2 = [...[1, 2], ...[3, 4]];
// [1, 2, 3, 4]

9.2 Object Methods

Object.keys(), Object.values(), Object.entries():

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj);    // ['a', 'b', 'c']
Object.values(obj);  // [1, 2, 3]
Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

// Iterate over entries
Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

Object.assign() and Spread:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

// Object.assign() - Merge objects
const merged = Object.assign({}, obj1, obj2);
// { a: 1, b: 3, c: 4 }

// Spread operator (preferred)
const merged2 = { ...obj1, ...obj2 };
// { a: 1, b: 3, c: 4 }

Object.freeze() and Object.seal():

const obj = { name: 'John', age: 30 };

// Object.freeze() - Prevents all modifications
Object.freeze(obj);
obj.age = 31; // Ignored in strict mode, error thrown
delete obj.name; // Ignored

// Object.seal() - Prevents adding/deleting, allows modification
Object.seal(obj);
obj.age = 31; // Works
obj.city = 'NYC'; // Ignored
delete obj.name; // Ignored

9.3 Modern Array Features

// Array.from() - Create array from iterable
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const arr = Array.from(arrayLike);
// ['a', 'b']

// Array.of() - Create array from arguments
const arr2 = Array.of(1, 2, 3);
// [1, 2, 3]

// flat() - Flatten nested arrays
const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat();      // [1, 2, 3, 4, [5, 6]]
nested.flat(2);     // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // Flatten all levels

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]