Arrays are one of the most fundamental data structures in JavaScript. They let you store multiple values in a single variable, and JavaScript gives you a rich set of built-in methods to work with them. In this post, we'll explore arrays and dig into some of the most commonly used methods: push, pop, shift, unshift, and slice.
What is an Array?
An array is an ordered collection of values. You can create one using square brackets:
const fruits = ["apple", "banana", "mango"];
console.log(fruits); // ["apple", "banana", "mango"]
Each item in an array has an index, starting from 0:
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "mango"
Arrays can hold any type of data — strings, numbers, objects, even other arrays — and you can mix types freely:
const mixed = [1, "two", true, { name: "three" }, [4, 5]];
Adding and Removing Elements
JavaScript gives you four core methods for adding or removing items from the ends of an array: push, pop, shift, and unshift.
push() — Add to the End
push() adds one or more elements to the end of an array and returns the new length.
const fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]
fruits.push("kiwi", "grape");
console.log(fruits); // ["apple", "banana", "mango", "kiwi", "grape"]
pop() — Remove from the End
pop() removes the last element from an array and returns that removed value.
const fruits = ["apple", "banana", "mango"];
const removed = fruits.pop();
console.log(removed); // "mango"
console.log(fruits); // ["apple", "banana"]
push and pop are fast because they only affect the end of the array — this makes them ideal for implementing things like a stack (Last In, First Out).
unshift() — Add to the Beginning
unshift() adds one or more elements to the start of an array and returns the new length.
const fruits = ["banana", "mango"];
fruits.unshift("apple");
console.log(fruits); // ["apple", "banana", "mango"]
fruits.unshift("kiwi", "grape");
console.log(fruits); // ["kiwi", "grape", "apple", "banana", "mango"]
shift() — Remove from the Beginning
shift() removes the first element from an array and returns that removed value.
const fruits = ["apple", "banana", "mango"];
const removed = fruits.shift();
console.log(removed); // "apple"
console.log(fruits); // ["banana", "mango"]
shift and unshift are useful for implementing a queue (First In, First Out), though keep in mind they're slower than push/pop on large arrays since every remaining element has to shift its index.
Quick Comparison
| Method | Action | Affects | Returns |
|---|---|---|---|
push() |
Add to end | End | New array length |
pop() |
Remove from end | End | Removed element |
unshift() |
Add to beginning | Start | New array length |
shift() |
Remove from beginning | Start | Removed element |
slice() — Extracting a Portion of an Array
Unlike the methods above, slice() doesn't modify the original array. Instead, it returns a new array containing a copy of a portion of the original, based on start and end indices.
const numbers = [10, 20, 30, 40, 50];
console.log(numbers.slice(1, 3)); // [20, 30]
console.log(numbers); // [10, 20, 30, 40, 50] (unchanged!)
Syntax: array.slice(startIndex, endIndex) — the endIndex is not included in the result.
A few handy variations:
const numbers = [10, 20, 30, 40, 50];
numbers.slice(2); // [30, 40, 50] → from index 2 to the end
numbers.slice(-2); // [40, 50] → last two elements
numbers.slice(); // [10, 20, 30, 40, 50] → a full shallow copy
That last example — calling slice() with no arguments — is a common trick for cloning an array without mutating the original.
slice() vs splice()
It's worth noting that slice() is often confused with splice(). The key difference:
-
slice()— does not change the original array; returns a new array. -
splice()— does change the original array; can add or remove elements in place.
const numbers = [10, 20, 30, 40, 50];
numbers.splice(1, 2); // removes 2 elements starting at index 1
console.log(numbers); // [10, 40, 50] (original array is modified!)
Top comments (0)