Arrays

Arrays are ordered collections of values that can hold different data types. They are one of the most fundamental data structures in JavaScript.

Creating Arrays

Array Literal

let emptyArray = [];
let numbers = [1, 2, 3, 4, 5];
let mixed = ['hello', 42, true, null, { name: 'John' }];
let nested = [[1, 2], [3, 4], [5, 6]];

Array Constructor

let array1 = new Array(); // Empty array
let array2 = new Array(5); // Array with 5 empty slots
let array3 = new Array(1, 2, 3); // [1, 2, 3]

Array.of() and Array.from()

let array1 = Array.of(1, 2, 3); // [1, 2, 3]
let array2 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
let array3 = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

Accessing Elements

By Index

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'orange'
console.log(fruits[3]); // undefined

Negative Indices (ES2022)

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits.at(-1)); // 'orange' (last element)
console.log(fruits.at(-2)); // 'banana' (second to last)

Modifying Arrays

Adding Elements

let fruits = ['apple', 'banana'];

fruits.push('orange'); // Add to end: ['apple', 'banana', 'orange']
fruits.unshift('grape'); // Add to beginning: ['grape', 'apple', 'banana', 'orange']

fruits[fruits.length] = 'pear'; // Add to end using index
fruits[10] = 'melon'; // Creates empty slots: ['grape', 'apple', 'banana', 'orange', 'pear', empty × 5, 'melon']

Removing Elements

let fruits = ['apple', 'banana', 'orange', 'grape'];

fruits.pop(); // Remove from end: ['apple', 'banana', 'orange']
fruits.shift(); // Remove from beginning: ['banana', 'orange']

delete fruits[1]; // Creates hole: ['banana', empty, 'orange']

Splicing

let fruits = ['apple', 'banana', 'orange', 'grape'];

fruits.splice(1, 2); // Remove 2 elements starting at index 1: ['apple', 'grape']
fruits.splice(1, 0, 'kiwi', 'melon'); // Insert at index 1: ['apple', 'kiwi', 'melon', 'grape']
fruits.splice(1, 1, 'pear'); // Replace: ['apple', 'pear', 'melon', 'grape']

Array Properties

Length

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 3

fruits.length = 2; // Truncate array: ['apple', 'banana']
fruits.length = 5; // Extend array: ['apple', 'banana', empty × 3]

Array Methods

Iteration Methods

forEach

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

numbers.forEach(function(number, index) {
  console.log(`Index ${index}: ${number}`);
});

// With arrow function
numbers.forEach((number, index) => {
  console.log(`Index ${index}: ${number}`);
});

map

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

let fruits = ['apple', 'banana', 'orange'];
let upperFruits = fruits.map(fruit => fruit.toUpperCase()); // ['APPLE', 'BANANA', 'ORANGE']

filter

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4, 6, 8, 10]

let fruits = ['apple', 'banana', 'orange', 'grape'];
let longFruits = fruits.filter(fruit => fruit.length > 5); // ['banana', 'orange']

find and findIndex

let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(num => num % 2 === 0); // 2
let firstEvenIndex = numbers.findIndex(num => num % 2 === 0); // 1

let users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

let user = users.find(user => user.id === 2); // { id: 2, name: 'Jane' }

some and every

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

let hasEven = numbers.some(num => num % 2 === 0); // true
let allEven = numbers.every(num => num % 2 === 0); // false
let allPositive = numbers.every(num => num > 0); // true

Transformation Methods

reduce

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0); // 15

let max = numbers.reduce((max, current) => current > max ? current : max); // 5

let words = ['Hello', 'world', 'from', 'JavaScript'];
let sentence = words.reduce((sentence, word) => sentence + ' ' + word); // 'Hello world from JavaScript'

flat and flatMap

let nested = [[1, 2], [3, 4], [5, 6]];
let flat = nested.flat(); // [1, 2, 3, 4, 5, 6]

let deepNested = [[1, [2, 3]], [4, [5, 6]]];
let flatDeep = deepNested.flat(2); // [1, 2, 3, 4, 5, 6]

let words = ['Hello world', 'JavaScript is fun'];
let letters = words.flatMap(word => word.split('')); // ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', 'J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't', ' ', 'i', 's', ' ', 'f', 'u', 'n']

Searching and Sorting

indexOf and lastIndexOf

let fruits = ['apple', 'banana', 'orange', 'banana', 'grape'];

console.log(fruits.indexOf('banana')); // 1
console.log(fruits.lastIndexOf('banana')); // 3
console.log(fruits.indexOf('pear')); // -1

includes

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits.includes('banana')); // true
console.log(fruits.includes('pear')); // false

sort

let numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort(); // [1, 1, 2, 3, 4, 5, 6, 9] (lexicographic sort)

numbers.sort((a, b) => a - b); // [1, 1, 2, 3, 4, 5, 6, 9] (numeric sort)
numbers.sort((a, b) => b - a); // [9, 6, 5, 4, 3, 2, 1, 1] (descending)

let fruits = ['orange', 'apple', 'banana'];
fruits.sort(); // ['apple', 'banana', 'orange']

let users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 35 }
];

users.sort((a, b) => a.age - b.age); // Sort by age ascending

Manipulation Methods

slice

let fruits = ['apple', 'banana', 'orange', 'grape', 'pear'];

let firstTwo = fruits.slice(0, 2); // ['apple', 'banana']
let lastTwo = fruits.slice(-2); // ['grape', 'pear']
let middle = fruits.slice(1, 4); // ['banana', 'orange', 'grape']
let copy = fruits.slice(); // Shallow copy of entire array

concat

let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'grape'];
let allFruits = fruits1.concat(fruits2); // ['apple', 'banana', 'orange', 'grape']

let moreFruits = fruits1.concat('pear', ['kiwi', 'melon']); // ['apple', 'banana', 'pear', 'kiwi', 'melon']

join

let fruits = ['apple', 'banana', 'orange'];
let fruitString = fruits.join(); // 'apple,banana,orange'
let customJoin = fruits.join(' | '); // 'apple | banana | orange'

reverse

let numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // [5, 4, 3, 2, 1]

fill

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0); // [0, 0, 0, 0, 0]
numbers.fill(9, 2, 4); // [0, 0, 9, 9, 0]

Array Destructuring

let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

let [a, , c] = [1, 2, 3]; // Skip second element
console.log(a, c); // 1, 3

let [x = 10, y = 20] = [5]; // Default values
console.log(x, y); // 5, 20

Spread Operator

let numbers = [1, 2, 3];
let moreNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

let copy = [...numbers]; // Shallow copy

function sum(a, b, c) {
  return a + b + c;
}

let nums = [1, 2, 3];
console.log(sum(...nums)); // 6

Array-like Objects

function sum() {
  let args = Array.from(arguments); // Convert arguments to array
  return args.reduce((sum, num) => sum + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

// Or using spread
function sum2(...args) {
  return args.reduce((sum, num) => sum + num, 0);
}

Multidimensional Arrays

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6

// Iterating over 2D array
for (let row of matrix) {
  for (let cell of row) {
    console.log(cell);
  }
}

Performance Considerations

Common Patterns

Remove Duplicates

let numbers = [1, 2, 2, 3, 4, 4, 5];
let unique = [...new Set(numbers)]; // [1, 2, 3, 4, 5]

Shuffle Array

function shuffle(array) {
  let shuffled = [...array];
  for (let i = shuffled.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
}

Chunk Array

function chunk(array, size) {
  let chunks = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }
  return chunks;
}

chunk([1, 2, 3, 4, 5, 6, 7], 3); // [[1, 2, 3], [4, 5, 6], [7]]

Arrays are versatile and powerful data structures in JavaScript. Mastering array methods and patterns will greatly improve your coding efficiency and problem-solving abilities.

Loading