JavaScript CoreImagine you are building a shopping list app. Users add items one after another: milk, eggs, bread. An array in JavaScript works exactly like that list, it is an ordered collection where each item has a position (called an indexWhat is index?A data structure the database maintains alongside a table so it can find rows by specific columns quickly instead of scanning everything.) starting from zero. Arrays are the most fundamental data structure you will use in every project, from rendering lists of components in React to processing APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. responses.
Creating and accessing arrays
Arrays are created with square brackets, and items are separated by commas:
const fruits = ["apple", "banana", "cherry", "date"];
const numbers = [10, 20, 30, 40, 50];
const mixed = [1, "hello", true, null]; // arrays can hold any type
const empty = []; // empty array - perfectly validAccess elements using bracket notation with the indexWhat is index?A data structure the database maintains alongside a table so it can find rows by specific columns quickly instead of scanning everything.:
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple" (first item)
console.log(fruits[1]); // "banana" (second item)
console.log(fruits[2]); // "cherry" (third item)
console.log(fruits[5]); // undefined (no item at that index)| Index | Value | How to access |
|---|---|---|
| 0 | "apple" | fruits[0] |
| 1 | "banana" | fruits[1] |
| 2 | "cherry" | fruits[2] |
| last | depends | fruits[fruits.length - 1] |
| last (modern) | depends | fruits.at(-1) |
Finding array length
Every array has a .length property telling you how many items it contains:
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // 3
// Get the last element safely
const lastFruit = fruits[fruits.length - 1]; // "cherry"
// Modern alternative: .at() accepts negative indices
const alsoLast = fruits.at(-1); // "cherry"The .length property is live, it updates automatically when you add or remove elements. This matters because it means you should never cache .length and assume it stays the same after modifying the array.
Adding and removing elements
JavaScript provides several methods to modify arrays. These methods mutate (change) the original array:
| Method | What it does | Returns | Mutates original? |
|---|---|---|---|
push(item) | Adds to end | New length | Yes |
pop() | Removes from end | Removed item | Yes |
unshift(item) | Adds to start | New length | Yes |
shift() | Removes from start | Removed item | Yes |
splice(i, n) | Removes n items at index i | Removed items | Yes |
const tasks = ["wash dishes"];
tasks.push("cook dinner"); // ["wash dishes", "cook dinner"]
const done = tasks.pop(); // done = "cook dinner", tasks = ["wash dishes"]
tasks.unshift("buy groceries"); // ["buy groceries", "wash dishes"]
const first = tasks.shift(); // first = "buy groceries", tasks = ["wash dishes"]Checking if an item exists
Use includes() to check if an array contains a specific value, and indexOf() to find where it sits:
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false
// Find the index of an item
console.log(fruits.indexOf("banana")); // 1
console.log(fruits.indexOf("grape")); // -1 (not found)Note that includes() uses strict equality (===), so [1, 2, 3].includes("1") returns false, the string "1" is not the number 1.
Modifying arrays in place
You can change elements directly by their indexWhat is index?A data structure the database maintains alongside a table so it can find rows by specific columns quickly instead of scanning everything.:
const colors = ["red", "green", "blue"];
colors[1] = "yellow"; // ["red", "yellow", "blue"]Or use splice() to add, remove, or replace elements at any position:
const numbers = [1, 2, 3, 4, 5];
// Remove 2 elements starting at index 1
numbers.splice(1, 2); // numbers is now [1, 4, 5]
// Insert elements at index 1 without removing any
numbers.splice(1, 0, 2, 3); // numbers is now [1, 2, 3, 4, 5]push() and splice() to modify arrays directly, even when immutability is safer. In React state, Redux stores, or any shared data, mutating an array causes subtle bugs because React compares references to detect changes. If AI generates items.push(newItem), ask yourself whether you should use const updated = [...items, newItem] instead. Similarly, prefer items.filter(x => x.id !== targetId) over items.splice(index, 1) for removals. Always use immutable patterns when the array is shared or part of application state.Arrays are objects (with superpowers)
Under the hood, arrays are actually objects with numeric keys. But they are special objects optimized for sequential data:
const arr = ["a", "b", "c"];
console.log(typeof arr); // "object"
console.log(Array.isArray(arr)); // trueUse Array.isArray() to check if something is an array. Do not rely on typeof, it returns "object" for arrays, plain objects, and null, which is not helpful.
Quick reference
| Operation | Method / Syntax | Mutates? |
|---|---|---|
| Create | [1, 2, 3] | , |
| Read | arr[0] | No |
| Read last | arr.at(-1) | No |
| Add to end | arr.push(x) | Yes |
| Remove from end | arr.pop() | Yes |
| Add to start | arr.unshift(x) | Yes |
| Remove from start | arr.shift() | Yes |
| Check existence | arr.includes(x) | No |
| Find index | arr.indexOf(x) | No |
| Get length | arr.length | No |
| Immutable add | [...arr, x] | No |
| Check type | Array.isArray(arr) | No |