Learning Goals

• Create arrays and access elements by index.
• Modify arrays with push, pop, shift, unshift, and splice.
• Work with arrays using forEach, map, filter, find, includes, and sort.
• Copy or merge arrays with the spread operator (...).

1. Creating and Accessing Arrays

// Create with an array literal
const fruits = ["apple", "banana", "strawberry", "grape"];

// Index access (starts at 0)
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "strawberry"

// Last element
console.log(fruits[fruits.length - 1]); // "grape"

// Mixing different types is allowed
const mixed = [1, "hello", true, null, { name: "John Doe" }];

2. Array Mutation Methods

const arr = ["A", "B", "C"];

// push: add to the end → returns the new length
arr.push("D");        // ["A", "B", "C", "D"]

// pop: remove from the end → returns the removed element
const last = arr.pop(); // last = "D", arr = ["A", "B", "C"]

// unshift: add to the front → returns the new length
arr.unshift("Z");     // ["Z", "A", "B", "C"]

// shift: remove from the front → returns the removed element
const first = arr.shift(); // first = "Z", arr = ["A", "B", "C"]

// splice(startIndex, deleteCount, ...itemsToAdd)
arr.splice(1, 1);           // ["A", "C"] (remove 1 item at index 1)
arr.splice(1, 0, "B");      // ["A", "B", "C"] (insert "B" at index 1)
arr.splice(1, 1, "X", "Y"); // ["A", "X", "Y", "C"] (replace)

3. Higher-Order Functions

These are powerful methods that apply a function to each element of an array.

forEach — perform an action on each element (no return value)

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

numbers.forEach((num, index) => {
  console.log(`item ${index}: ${num}`);
});

map — return a new array with each element transformed

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const names = ["alice", "bob", "charlie"];
const capitalized = names.map(name => name.toUpperCase());
// ["ALICE", "BOB", "CHARLIE"]

filter — return a new array with only the elements that match a condition

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8]

const users = [
  { name: "John Doe", age: 25 },
  { name: "Susan Lee", age: 15 },
  { name: "Michael Grant", age: 30 },
];
const adults = users.filter(user => user.age >= 19);
// [{ name: "John Doe", age: 25 }, { name: "Michael Grant", age: 30 }]

find — return the first element that matches a condition

const users = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Susan Lee" },
];
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "Susan Lee" }

includes — check whether a specific value is present

const fruits = ["apple", "banana", "strawberry"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("watermelon"));  // false

sort — sort an array (mutates the original array)

// String sorting (default: alphabetical)
const names = ["Charlie", "Alice", "Bob"];
names.sort();
console.log(names); // ["Alice", "Bob", "Charlie"]

// Number sorting (always provide a comparison function!)
const numbers = [10, 1, 100, 3, 20];
numbers.sort((a, b) => a - b);  // ascending
console.log(numbers); // [1, 3, 10, 20, 100]

numbers.sort((a, b) => b - a);  // descending
console.log(numbers); // [100, 20, 10, 3, 1]

4. Spread Operator

// Copy an array (independent of the original)
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] (unaffected)

// Merge arrays
const a = [1, 2, 3];
const b = [4, 5, 6];
const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

// Add elements to an array
const withExtra = [0, ...a, 4]; // [0, 1, 2, 3, 4]

Practice Files

• Example
• Assignment
• Assignment Solution