🏆 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]`