Posted on Sep 24

🏆 Mastering JavaScript Arrays — From Basics to Modern ES6+

#javascript #webdev #programming #beginners

Arrays are one of the most important foundations in JavaScript.
They let us store, organize, and transform data efficiently.

I’ve organized everything into small files, so it’s easier to practice, revise, and remember for the long term.

📘 Concepts with Examples

🧺 1. Creating Arrays

const fruits = ["apple", "banana", "orange"]; const numbers = new Array(1, 2, 3);

✍️ 2. Accessing & Updating Elements

const colors = ["red", "green", "blue"]; console.log(colors[0]); // red colors[1] = "yellow"; console.log(colors); // ["red", "yellow", "blue"]

🧪 3. Mutating Methods (change the original array)

const arr = [1, 2, 3]; // push() → add at end arr.push(4); // [1, 2, 3, 4] // pop() → remove last arr.pop(); // [1, 2, 3] // shift() → remove first arr.shift(); // [2, 3] // unshift() → add at start arr.unshift(0); // [0, 2, 3] // splice() → insert/remove arr.splice(1, 0, 99); // [0, 99, 2, 3] // reverse() arr.reverse(); // sort() arr.sort();

🛡️ 4. Non-Mutating Methods (return a new array)

const numbers = [3, 7, 10, 15, 20, 25]; // map() const doubled = numbers.map(n => n * 2); // [6, 14, 20, 30, 40, 50] // filter() const greater10 = numbers.filter(n => n >= 10); // [10, 15, 20, 25] // reduce() const sum = numbers.reduce((acc, cur) => acc + cur, 0); // 80 // forEach() numbers.forEach(n => console.log(n)); // find() const firstDiv5 = numbers.find(n => n % 5 === 0); // 10 // findIndex() const index15 = numbers.findIndex(n => n === 15); // 3 // some() const has30 = numbers.some(n => n === 30); // false // every() const allPositive = numbers.every(n => n > 0); // true // includes() numbers.includes(20); // true // indexOf() numbers.indexOf(15); // 3 // flat() const nested = [1, [2, 3]]; nested.flat(); // [1, 2, 3] // flatMap() numbers.flatMap(n => [n * 2]); // [6, 14, 20, 30, 40, 50]

🧩 5. Array Destructuring

// Basic const [a, b] = ["red", "green"]; console.log(a, b); // red green // Skip elements const [x, , y] = [10, 20, 30]; console.log(x, y); // 10 30 // Default values const [fruit1, fruit2 = "banana"] = ["apple"]; console.log(fruit1, fruit2); // apple banana // Swap variables let p = 1, q = 2; [p, q] = [q, p]; console.log(p, q); // 2, 1 // Nested arrays const [m, [n, o]] = [1, [2, 3]]; console.log(m, n, o); // 1, 2, 3 // Rest operator const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first, second, rest); // 1, 2, [3, 4, 5]

🌀 6. Spread Operator in Arrays

// Combine arrays const fruits = ["apple", "banana"]; const moreFruits = ["orange", "grape"]; const allFruits = [...fruits, ...moreFruits]; // Copy array const nums = [1, 2, 3]; const copied = [...nums]; // [1, 2, 3] // Add elements while copying const colors = ["red", "green"]; const newColors = ["blue", ...colors]; // ["blue", "red", "green"] // Find max value const values = [5, 10, 2, 8]; Math.max(...values); // 10 // Spread with function arguments function sum(a, b, c) { return a + b + c; } const numbersArr = [2, 4, 6]; sum(...numbersArr); // 12

📑 Final Cheat Sheet (Quick Memory Aid)

Method / Concept	Description	Example
`push()`	Add at end	`[1].push(2)` → `[1,2]`
`pop()`	Remove last	`[1,2].pop()` → `[1]`
`shift()`	Remove first	`[1,2].shift()` → `[2]`
`unshift()`	Add at start	`[2].unshift(1)` → `[1,2]`
`splice()`	Insert/remove	`[1,2,3].splice(1,1)` → `[1,3]`
`sort()`	Sort array	`[3,1].sort()` → `[1,3]`
`reverse()`	Reverse array	`[1,2].reverse()` → `[2,1]`
`map()`	Transform elements	`[1,2].map(x=>x*2)` → `[2,4]`
`filter()`	Keep elements by condition	`[1,2,3].filter(x=>x>1)` → `[2,3]`
`reduce()`	Reduce to single value	`[1,2,3].reduce((a,c)=>a+c,0)` → `6`
`forEach()`	Loop array	`[1,2].forEach(x=>console.log(x))`
`find()`	First element matching	`[5,10].find(x=>x%5===0)` → `5`
`findIndex()`	Index of element	`[5,10].findIndex(x=>x===10)` → `1`
`some()`	At least one true	`[1,2].some(x=>x>1)` → `true`
`every()`	All true	`[1,2].every(x=>x>0)` → `true`
`includes()`	Check element	`[1,2].includes(2)` → `true`
`indexOf()`	First index	`[1,2].indexOf(2)` → `1`
`flat()`	Flatten array	`[1,[2]].flat()` → `[1,2]`
`flatMap()`	Map + flat	`[1,2].flatMap(x=>[x*2])` → `[2,4]`
Destructuring	Unpack values	`const [a,b]=[1,2]`
Spread	Expand array	`[... [1,2]]` → `[1,2]`