Skip to main content

Arrays & Array Methods

Creating Arrays​

const arr1 = [1, 2, 3];                            // array literal (preferred)
const arr2 = new Array(3);                          // [empty x 3]
const arr3 = Array.from("hello");                   // ['h','e','l','l','o']
const arr4 = Array.from({length: 3}, (_, i) => i * 2); // [0,2,4]
const arr5 = Array.of(1, 2, 3);                    // [1, 2, 3]

Accessing & Modifying​

const arr = [10, 20, 30, 40, 50];

arr[0]       // 10 (first element)
arr[4]       // 50 (last element)
arr.at(-1)   // 50 (last element, ES2022)
arr.at(-2)   // 40 (second to last)
arr.length   // 5

arr[2] = 99; // modify element

Mutating Methods (modify original array)​

const arr = [1, 2, 3];

arr.push(4);              // add to END → [1,2,3,4], returns new length
arr.pop();                // remove from END → [1,2,3], returns removed item
arr.unshift(0);           // add to START → [0,1,2,3]
arr.shift();              // remove from START → [1,2,3], returns removed item

arr.splice(1, 1);         // remove 1 item at index 1
arr.splice(1, 0, 99);     // insert 99 at index 1
arr.splice(1, 1, 88, 99); // replace 1 item at index 1 with 88, 99

arr.reverse();            // reverses in-place!
arr.sort((a,b) => a - b); // numeric ascending
arr.sort((a,b) => b - a); // numeric descending
arr.fill(0, 2, 4);        // fill with 0 from index 2 to 3

Non-Mutating Methods (return new array/value)​

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

// map: transform each element → new array
nums.map(n => n * 2);           // [2, 4, 6, 8, 10]

// filter: keep elements that pass test → new array
nums.filter(n => n % 2 === 0);  // [2, 4]

// reduce: accumulate to single value
nums.reduce((acc, n) => acc + n, 0); // 15
nums.reduce((acc, n) => acc * n, 1); // 120

// find: first element that passes test
nums.find(n => n > 3);          // 4
nums.findIndex(n => n > 3);     // 3 (index)

// some: true if ANY element passes
nums.some(n => n > 4);          // true

// every: true if ALL elements pass
nums.every(n => n > 0);         // true
nums.every(n => n > 3);         // false

// slice: extract portion (no modification)
nums.slice(1, 3);               // [2, 3]
nums.slice(-2);                 // [4, 5]

// concat: merge arrays
nums.concat([6, 7]);            // [1,2,3,4,5,6,7]
[...nums, 6, 7];                // same with spread

// flat: flatten nested arrays
[1, [2, 3], [4, [5]]].flat();   // [1, 2, 3, 4, [5]]
[1, [2, 3], [4, [5]]].flat(2);  // [1, 2, 3, 4, 5]
[1,[2,[3,[4]]]].flat(Infinity); // [1, 2, 3, 4]

// flatMap: map then flatten one level
nums.flatMap(n => [n, n * 2]);  // [1,2,2,4,3,6,4,8,5,10]

// indexOf / includes
nums.indexOf(3);                // 2
nums.includes(3);               // true
nums.lastIndexOf(3);            // 2

// join: convert to string
nums.join("-");                 // "1-2-3-4-5"

Destructuring Arrays​

const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

// Skip elements
const [first, , third] = [10, 20, 30];
// first = 10, third = 30

// Default values
const [x = 0, y = 0] = [5];
// x = 5, y = 0

// Rest in destructuring
const [head, ...tail] = [1, 2, 3, 4];
// head = 1, tail = [2, 3, 4]

// Swap variables
let m = 1, n = 2;
[m, n] = [n, m];
// m = 2, n = 1

Array Spread​

const a = [1, 2, 3];
const b = [4, 5, 6];

const combined = [...a, ...b];  // [1,2,3,4,5,6]
const copy = [...a];            // shallow copy

// Spread into function arguments
Math.max(...[3, 1, 4, 1, 5]); // 5

MCQ — Arrays​

Q1: Which method removes the LAST element from an array?

A) shift() B) splice() C) pop() ✅ D) delete

Answer: C

Q2: What does [1,2,3].map(x => x * 2) return?

A) [1,2,3] (modified original) B) [2,4,6] (new array) ✅ C) 6 D) undefined

Answer: B — map returns a NEW array, original is unchanged.

Q3: What does arr.slice(1, 3) return for [10,20,30,40,50]?

A) [20, 30, 40] B) [20, 30] ✅ C) [10, 20, 30] D) [30, 40]

Answer: B — slice(1,3) returns elements at index 1 and 2 (not 3).

Q4: Which method returns true if ALL elements pass the test?

A) some() B) includes() C) find() D) every() ✅

Answer: D

Q5: What is the difference between splice and slice?

A) No difference B) splice modifies the original; slice does not ✅ C) slice modifies the original; splice does not D) Both modify the original

Answer: B

Q6: What does [1,[2,[3]]].flat(Infinity) return?

A) [1,[2,[3]]] B) [1,2,[3]] C) [1,2,3] ✅ D) Error

Answer: C — flat(Infinity) recursively flattens all nesting levels.

Q7: What does [5,2,8,1].sort() return?

A) [1, 2, 5, 8] B) [1, 2, 5, 8] — sorted correctly C) May be wrong for numbers ✅

Answer: C — Default sort() is lexicographic (string sort). [10, 9, 2].sort() gives [10, 2, 9] not [2, 9, 10]. Always provide a comparator for numbers: .sort((a,b) => a - b).

Q8: What does reduce return for an empty array with no initial value?

A) undefined B) null C) 0 D) TypeError ✅

Answer: D — Calling reduce on an empty array without an initial value throws a TypeError.