Basic Array Methods

Now that you're familiar with objects and arrays, it's time to learn how to manipulate data in arrays. JavaScript offers a range of built-in methods that let you add, remove, and modify array elements. In the context of Jurassic Park, we need these methods to manage lists of dinosaurs, their status, and their location.

Array-Mutating Methods

push() — Adding to the End

The

push()

method adds one or more elements to the end of an array and returns the new array length:

1const pack = ["Blue", "Charlie"];
2console.log(pack.length); // 2
3
4pack.push("Delta");
5console.log(pack); // ["Blue", "Charlie", "Delta"]
6
7// Adding multiple elements at once
8pack.push("Echo", "Fox");
9console.log(pack); // ["Blue", "Charlie", "Delta", "Echo", "Fox"]

pop() — Removing from the End

The

pop()

method removes the last element from an array and returns it:

1const pack = ["Blue", "Charlie", "Delta", "Echo"];
2const removed = pack.pop();
3
4console.log(removed); // "Echo"
5console.log(pack);    // ["Blue", "Charlie", "Delta"]

unshift() — Adding to the Beginning

The

unshift()

method adds elements to the beginning of an array:

1const pack = ["Charlie", "Delta"];
2pack.unshift("Blue");
3
4console.log(pack); // ["Blue", "Charlie", "Delta"]

shift() — Removing from the Beginning

The

shift()

method removes the first element from an array and returns it:

1const pack = ["Blue", "Charlie", "Delta"];
2const first = pack.shift();
3
4console.log(first); // "Blue"
5console.log(pack);  // ["Charlie", "Delta"]

splice() — Versatile Modification

The

splice()

method can add, remove, or replace elements at any position in an array. It modifies the original array.

1const dinosaurs = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops"];
2
3// Remove 1 element starting at index 1
4dinosaurs.splice(1, 1);
5console.log(dinosaurs); // ["T-Rex", "Stegosaurus", "Triceratops"]
6
7// Insert an element at index 1 (without removing)
8dinosaurs.splice(1, 0, "Brachiosaurus");
9console.log(dinosaurs); // ["T-Rex", "Brachiosaurus", "Stegosaurus", "Triceratops"]
10
11// Replace the element at index 2
12dinosaurs.splice(2, 1, "Pteranodon");
13console.log(dinosaurs); // ["T-Rex", "Brachiosaurus", "Pteranodon", "Triceratops"]

Non-Mutating Methods

slice() — Copying a Portion of an Array

The

slice()

method returns a new array that is a portion of the original. It does not modify the original.

1const allDinos = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"];
2
3// slice(start, end) — from index start up to (but not including) end
4const herbivores = allDinos.slice(2, 4);
5console.log(herbivores); // ["Stegosaurus", "Triceratops"]
6console.log(allDinos);   // Original unchanged!
7
8// Copy the entire array
9const copy = allDinos.slice();
10console.log(copy); // ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"]

Key Difference: splice() vs slice()

| Feature | splice() | slice() | |---------|----------|---------| | Mutation | YES — modifies the original array | NO — returns a new array | | Parameters | (start, deleteCount, ...items) | (start, end) | | Use case | Adding/removing/replacing elements | Extracting a portion of an array |