Skip to main content

​
What are arrays?

Arrays store multiple values in a single variable. You’ll use them constantly — lists of users, product catalogs, API responses, form options, navigation items. Any time you have a collection of things, that’s an array. 
const fruits = ["Apple", "Banana", "Cherry"];
const prices = [29.99, 49.99, 9.99];
const mixed = ["Sarah", 28, true, null]; // Can mix types (but usually don't)

const users = ["Sarah", "John", "Alice"];
console.log(users); // ["Sarah", "John", "Alice"]
JavaScript arrays are Python lists. Same square bracket syntax, same zero-based indexing, same idea.

​
Accessing items

const users = ["Sarah", "John", "Alice", "Bob"];

console.log(users[0]); // "Sarah"  (first item)
console.log(users[1]); // "John"   (second item)
console.log(users[3]); // "Bob"    (last item)
console.log(users[4]); // undefined (out of bounds — no error!)
Accessing an index that doesn’t exist returns undefined instead of throwing an error. This is different from Python, which raises an IndexError. It can lead to silent bugs if you’re not careful.

​
Getting the last item

const users = ["Sarah", "John", "Alice"];

// Classic way
console.log(users[users.length - 1]); // "Alice"

// Modern way (ES2022)
console.log(users.at(-1)); // "Alice"
console.log(users.at(-2)); // "John"
.at() supports negative indices just like Python. Use .at(-1) to get the last item instead of the awkward arr[arr.length - 1].

​
Array length

const users = ["Sarah", "John", "Alice"];
console.log(users.length); // 3

// Check if array is empty
if (users.length === 0) {
  console.log("No users found");
}

// Common pattern: check before accessing
const firstUser = users.length > 0 ? users[0] : "No users";
Note: .length is a property, not a method. No parentheses needed.

​
Modifying arrays

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

// Add to the end
colors.push("yellow");
console.log(colors); // ["red", "green", "blue", "yellow"]

// Remove from the end
const last = colors.pop();
console.log(last);   // "yellow"
console.log(colors); // ["red", "green", "blue"]

// Add to the beginning
colors.unshift("white");
console.log(colors); // ["white", "red", "green", "blue"]

// Remove from the beginning
const first = colors.shift();
console.log(first);  // "white"
console.log(colors); // ["red", "green", "blue"]
MethodWhat it doesReturns
.push(item)Add to endNew length
.pop()Remove from endRemoved item
.unshift(item)Add to beginningNew length
.shift()Remove from beginningRemoved item
These methods mutate the original array. In React, you’ll avoid them and use non-mutating patterns instead (spread operator, .filter(), .map()). More on that when you learn React state.

​
Checking if something is in an array

const roles = ["admin", "editor", "viewer"];

console.log(roles.includes("admin"));   // true
console.log(roles.includes("manager")); // false

// Find the position of an item
console.log(roles.indexOf("editor")); // 1
console.log(roles.indexOf("manager")); // -1 (not found)

const roles = ["admin", "editor", "viewer"];
roles.includes("admin"); // true
roles.indexOf("admin");  // 0
JavaScript uses .includes() where Python uses in. Both check for existence.

​
Slicing arrays

const numbers = [10, 20, 30, 40, 50];

// .slice(start, end) — end is exclusive
console.log(numbers.slice(1, 3));  // [20, 30]
console.log(numbers.slice(2));     // [30, 40, 50]
console.log(numbers.slice(-2));    // [40, 50]
console.log(numbers.slice());      // [10, 20, 30, 40, 50] (shallow copy)
.slice() returns a new array without modifying the original. Same behavior as Python’s list[1:3], just with method syntax instead of bracket notation.

​
What’s next?

You can create and access arrays. Now let’s learn the methods that make arrays truly powerful — .map(), .filter(), .find(), and more.

Array methods

Transform, filter, and search arrays