JavaScript Arrays

Creating Arrays

Arrays are created using square brackets [] with comma-separated values. This is called array literal syntax and is the most common way to create arrays: const arr = [1, 2, 3]. You can also use the Array() constructor, though literal syntax is preferred for its simplicity and readability. Arrays are objects in JavaScript—typeof [] returns "object".

Arrays can hold any type of value: numbers, strings, booleans, objects, other arrays, functions, or mixed types. For example, [1, "hello", true, {name: "John"}, [1, 2]] is valid. This flexibility makes arrays powerful for storing heterogeneous data. However, arrays typically work best when elements are the same type, as this makes iteration and processing more predictable.

Array elements are indexed starting from 0, meaning the first element is at index 0, the second at index 1, and so on. This zero-based indexing is standard in most programming languages. The last element's index is always array.length - 1. Understanding zero-based indexing is crucial—off-by-one errors are common when working with arrays.

You access and modify array elements using bracket notation with the index: array[index]. Reading an element: const first = arr[0]. Modifying an element: arr[0] = "new value". Accessing an index that doesn't exist returns undefined rather than throwing an error. You can also add elements beyond the current length, creating empty slots in between (though this is generally avoided).

Every array has a length property that returns the number of elements in the array. Access it without parentheses: array.length. The length is always one more than the highest index. You can modify length to truncate an array (reducing length removes elements) or expand it (increasing length adds empty slots). The length property makes arrays easy to loop through and process.

// Array literal
const fruits = ["Apple", "Banana", "Orange"];

// Mixed types
const mixed = [1, "Hello", true, null];

// Accessing elements
console.log(fruits[0]); // "Apple"
console.log(fruits[1]); // "Banana"

// Length property
console.log(fruits.length); // 3

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

// Modifying elements
fruits[1] = "Mango";
console.log(fruits); // ["Apple", "Mango", "Orange"]

Array Methods

The push() method adds one or more elements to the end of an array and returns the new length. It modifies the original array. push() is one of the most commonly used array methods for building up arrays dynamically. You can push multiple elements at once: arr.push(1, 2, 3). It's efficient for adding elements and commonly used in loops or when processing data.

The pop() method removes the last element from an array and returns that element. It modifies the original array, reducing its length by 1. If the array is empty, pop() returns undefined. pop() and push() work together like a stack data structure (Last-In-First-Out). This method is useful for processing elements in reverse order or implementing undo functionality.

The shift() method removes the first element from an array and returns that element. It modifies the original array, and all remaining elements shift down one index. shift() is less efficient than pop() for large arrays because it requires re-indexing all elements. Use shift() when you need to process elements in the order they were added (queue behavior).

The unshift() method adds one or more elements to the beginning of an array and returns the new length. It modifies the original array, shifting existing elements up to make room. Like shift(), unshift() is less efficient for large arrays. unshift() and shift() work together to create queue behavior (First-In-First-Out). Use with caution on performance-critical code with large arrays.

Some array methods modify the original array in place (like push, pop, shift, unshift, splice, sort, reverse), while others return a new array leaving the original unchanged (like map, filter, slice, concat). Understanding which methods mutate and which don't is crucial. Immutable methods are safer in modern JavaScript, especially with const arrays, while mutating methods are sometimes more memory efficient.

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

// push - add to end
colors.push("blue");
console.log(colors); // ["red", "green", "blue"]

// pop - remove from end
let last = colors.pop();
console.log(last);   // "blue"
console.log(colors); // ["red", "green"]

// unshift - add to beginning
colors.unshift("yellow");
console.log(colors); // ["yellow", "red", "green"]

// shift - remove from beginning
let first = colors.shift();
console.log(first);  // "yellow"
console.log(colors); // ["red", "green"]