JavaScript Arrays – The Complete Guide

// Array literal – the preferred way
const fruits = ['apple', 'banana', 'cherry'];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'hello', true, null, { id: 1 }];
const empty = [];

// Array() constructor
const zeros = new Array(3);        // [empty × 3] — sparse array
const explicit = new Array(1, 2, 3); // [1, 2, 3]

// Array.of() – always creates elements, never a sparse array
const safe = Array.of(3);          // [3]  (not [empty × 3])

// Array.from() – from iterables or array-like objects
const fromString = Array.from('hello');      // ['h','e','l','l','o']
const fromSet    = Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]
const mapped     = Array.from({ length: 5 }, (_, i) => i * 2);
// [0, 2, 4, 6, 8]

console.log(fruits.length); // 3

const colors = ['red', 'green', 'blue', 'yellow'];

// Bracket notation (zero-based index)
console.log(colors[0]);   // 'red'
console.log(colors[2]);   // 'blue'
console.log(colors[10]);  // undefined (no error)

// Negative indices with .at()
console.log(colors.at(-1));  // 'yellow' (last element)
console.log(colors.at(-2));  // 'blue'

// Array length
console.log(colors.length);  // 4

// Last element (classic approach)
console.log(colors[colors.length - 1]); // 'yellow'

// Destructuring (preview)
const [first, second] = colors;
console.log(first, second); // 'red' 'green'

const stack = ['a', 'b', 'c'];

// End of array
stack.push('d', 'e');   // adds to end → ['a','b','c','d','e']
stack.pop();            // removes last → returns 'e' → ['a','b','c','d']

// Beginning of array
stack.unshift('z');     // adds to front → ['z','a','b','c','d']
stack.shift();          // removes first → returns 'z' → ['a','b','c','d']

// splice(startIndex, deleteCount, ...itemsToInsert)
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(1, 2);        // removes 2 at index 1
console.log(removed); // [2, 3]
console.log(arr);     // [1, 4, 5]

arr.splice(1, 0, 10, 20); // insert at index 1, delete 0
console.log(arr); // [1, 10, 20, 4, 5]

// slice – returns a NEW array (does not mutate)
const sliced = arr.slice(1, 3);  // from index 1 up to (not including) 3
console.log(sliced); // [10, 20]
console.log(arr);    // unchanged: [1, 10, 20, 4, 5]

const nums = [10, 20, 30, 20, 40];
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' }
];

// indexOf / lastIndexOf – use strict equality (===)
console.log(nums.indexOf(20));      // 1 (first occurrence)
console.log(nums.lastIndexOf(20));  // 3 (last occurrence)
console.log(nums.indexOf(99));      // -1 (not found)

// includes – returns boolean
console.log(nums.includes(30));  // true
console.log(nums.includes(99));  // false

// find – returns the element (or undefined)
const bob = users.find(u => u.name === 'Bob');
console.log(bob); // { id: 2, name: 'Bob' }

// findIndex – returns the index (or -1)
const idx = users.findIndex(u => u.id === 3);
console.log(idx); // 2

// findLast / findLastIndex (ES2023)
const lastEven = nums.findLast(n => n % 2 === 0);
console.log(lastEven); // 40

const prices = [100, 250, 75, 320, 180];

// forEach – side effects only, returns undefined
prices.forEach((price, index) => {
  console.log(`Item ${index}: $${price}`);
});

// map – transforms each element, returns new array
const discounted = prices.map(p => p * 0.9);
console.log(discounted); // [90, 225, 67.5, 288, 162]

// filter – keeps elements where callback returns true
const expensive = prices.filter(p => p > 150);
console.log(expensive); // [250, 320, 180]

// reduce – accumulates a single value
const total = prices.reduce((sum, p) => sum + p, 0);
console.log(total); // 925

// Chaining – readable pipeline
const totalDiscountExpensive = prices
  .filter(p => p > 100)
  .map(p => p * 0.9)
  .reduce((sum, p) => sum + p, 0);
console.log(totalDiscountExpensive.toFixed(2)); // "674.10"

// Default sort – converts to string, lexicographic order
[10, 9, 2, 100].sort();     // [10, 100, 2, 9] ← WRONG for numbers!

// Numeric sort with comparator
[10, 9, 2, 100].sort((a, b) => a - b);  // [2, 9, 10, 100] ascending
[10, 9, 2, 100].sort((a, b) => b - a);  // [100, 10, 9, 2] descending

// Alphabetical sort (strings already work without comparator)
['banana', 'apple', 'cherry'].sort(); // ['apple', 'banana', 'cherry']

// Case-insensitive sort
['Banana', 'apple', 'Cherry'].sort((a, b) =>
  a.toLowerCase().localeCompare(b.toLowerCase())
);
// ['apple', 'Banana', 'Cherry']

// reverse – reverses in place
const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

// Non-mutating sort (ES2023: toSorted, toReversed)
const original = [3, 1, 2];
const sorted = original.toSorted((a, b) => a - b);
console.log(original); // [3, 1, 2] – unchanged
console.log(sorted);   // [1, 2, 3]

// flat – flattens nested arrays
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());    // [1, 2, 3, 4, [5, 6]] – one level
console.log(nested.flat(2));   // [1, 2, 3, 4, 5, 6] – two levels
console.log(nested.flat(Infinity)); // fully flatten any depth

// flatMap – map then flat(1) in one pass (more efficient)
const sentences = ['Hello world', 'foo bar'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['Hello', 'world', 'foo', 'bar']

// Array.from – converts iterables and array-likes
const nodeList = document.querySelectorAll('p'); // NodeList (array-like)
const paragraphs = Array.from(nodeList);         // real Array

// Array.from with map function
const squares = Array.from({ length: 5 }, (_, i) => (i + 1) ** 2);
console.log(squares); // [1, 4, 9, 16, 25]

// Array.isArray – reliable type check
console.log(Array.isArray([]));          // true
console.log(Array.isArray(new Array())); // true
console.log(Array.isArray('hello'));     // false
console.log(Array.isArray({ length: 3 })); // false

// 3x3 matrix
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// Access with double indexing
console.log(matrix[1][2]); // 6 (row 1, col 2)

// Iterate with nested loops
for (let row = 0; row < matrix.length; row++) {
  for (let col = 0; col < matrix[row].length; col++) {
    process.stdout.write(matrix[row][col] + ' ');
  }
  console.log();
}

// Create a dynamic 2D array
function create2D(rows, cols, fill = 0) {
  return Array.from({ length: rows }, () => new Array(cols).fill(fill));
}
const grid = create2D(3, 4, '.');
console.log(grid);
// [
//   ['.', '.', '.', '.'],
//   ['.', '.', '.', '.'],
//   ['.', '.', '.', '.']
// ]

// Spread to copy a 2D array (shallow — rows are still shared)
const copy = matrix.map(row => [...row]); // deep enough for primitives