JavaScript Arrays Explained

An array is an ordered list of values, stored under a single variable name. Arrays are one of the most heavily used data structures in JavaScript — they back everything from a simple to-do list to the results of an API call. This tutorial covers how to create arrays, access and modify their elements, and the core methods you'll reach for constantly.

Creating and Indexing Arrays

const fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]);        // first element — indexing starts at 0
console.log(fruits[fruits.length - 1]); // last element
console.log(fruits.length);    // how many elements

Output:

apple
cherry
3

Array elements don't have to be the same type — a single array can mix strings, numbers, objects, and even other arrays. Reassigning an existing index replaces that element: fruits[1] = "mango" replaces "banana".

Adding and Removing Elements

const nums = [10, 20, 30];

nums.push(40);        // add to the end
nums.unshift(5);       // add to the beginning
console.log(nums);

const removedFromEnd = nums.pop();        // remove and return the last element
const removedFromStart = nums.shift();     // remove and return the first element

console.log(nums, removedFromEnd, removedFromStart);

Output:

[ 5, 10, 20, 30, 40 ]
[ 10, 20, 30 ] 40 5

push()/pop() operate on the end of the array and are fast. unshift()/shift() operate on the beginning and are slower on large arrays, since every other element has to shift index.

slice() vs splice()

These two look similar but behave very differently — one of the most common mix-ups for beginners.

const letters = ["a", "b", "c", "d", "e"];

// slice(start, end) returns a NEW array, original is untouched
const sliced = letters.slice(1, 3);
console.log(sliced, letters);

// splice(start, deleteCount, ...items) MUTATES the original array
const removed = letters.splice(1, 2, "X", "Y");
console.log(letters, removed);

Output:

[ 'b', 'c' ] [ 'a', 'b', 'c', 'd', 'e' ]
[ 'a', 'X', 'Y', 'd', 'e' ] [ 'b', 'c' ]

slice() is non-destructive and great for making copies or extracting a portion without side effects. splice() directly edits the original array — remove elements, insert elements, or both at once.

Checking and Searching

const colors = ["red", "green", "blue"];

console.log(colors.includes("green"));
console.log(colors.indexOf("blue"));
console.log(Array.isArray(colors));

Output:

true
2
true

Once you're comfortable with the basics here, the next step is learning the array methods that take a function as an argument — map(), filter(), and reduce() — covered in the next tutorial. For a worked practice problem using several of these methods together, see flattening a nested array.

---