JavaScript Arrays

An array is a container that holds multiple values in one place. Instead of creating a separate variable for each value, you group them all together in a single array.

You can put any type of data inside an array: numbers, strings, booleans, objects, and even other arrays. Each item sits at a fixed position, so the order is always preserved.

let cartItems = ["Laptop", "Mouse", "Keyboard"];

console.log(cartItems); // ["Laptop", "Mouse", "Keyboard"]

Without arrays, you would need a separate variable for every value. That quickly becomes hard to manage, especially when you do not know how many values you will have ahead of time.

Arrays let you store, loop through, and manage a collection of values using a single variable name. This makes your code shorter, cleaner, and easier to maintain.

// Without arrays - messy
let item1 = "Laptop";
let item2 = "Mouse";
let item3 = "Keyboard";

// With arrays - clean
let cartItems = ["Laptop", "Mouse", "Keyboard"];

You can create an array in two ways: using an array literal (the most common) or the Array constructor.

We recommend the array literal syntax because it's simpler and easier to read. The new Array() constructor works too, but you'll rarely see it in practice.

// Array Literal (recommended)
let colors = ["red", "green", "blue"];

// Array Object using new Array()
let numbers = new Array(1, 2, 3, 4, 5);

console.log(colors);  // ["red", "green", "blue"]
console.log(numbers); // [1, 2, 3, 4, 5]

Watch out: new Array(3) creates an empty array with 3 slots, not an array containing the number 3. Stick with the literal syntax to avoid this gotcha.

Every item in an array has a numbered position called an index. Indexes start at 0, so the first item is at index 0, the second at index 1, and so on.

You can read or update any item by using its index with square brackets.

let cartItems = ["Laptop", "Mouse", "Keyboard"];

console.log(cartItems[0]); // Laptop
console.log(cartItems[1]); // Mouse
console.log(cartItems[2]); // Keyboard

// Update an element
cartItems[1] = "Monitor";
console.log(cartItems); // ["Laptop", "Monitor", "Keyboard"]

The length property tells you how many items are in your array. It's always one more than the highest index.

A handy trick: you can grab the last item with length - 1, since that's always the last index.

let cartItems = ["Laptop", "Mouse", "Keyboard"];

console.log(cartItems.length); // 3

// Access the last element
console.log(cartItems[cartItems.length - 1]); // Keyboard

You can declare arrays with let, const, or var. Most developers use const because it stops you from accidentally reassigning the variable, while still letting you change the array's contents.

// Using const (recommended)
const scores = [10, 20, 30];
scores.push(40); // OK - modifying contents is allowed
// scores = [1, 2]; // Error - reassigning is not allowed

// Using let
let tags = ["urgent", "new"];
tags = ["archived"]; // OK - reassigning is allowed with let

// Empty array
const empty = [];

Looping lets you go through each item in an array one by one. The two most common ways are the for loop and the forEach method.

const cartItems = ["Laptop", "Mouse", "Keyboard"];

// Using a for loop
for (let i = 0; i < cartItems.length; i++) {
  console.log(cartItems[i]);
}
// Laptop
// Mouse
// Keyboard

// Using forEach
cartItems.forEach(function(item) {
  console.log(item);
});
// Laptop
// Mouse
// Keyboard

Use the for loop when you need the index (the position number). Use forEach when you just want to do something with each item, since it's cleaner.

JavaScript gives you a bunch of built-in methods on arrays so you don't have to reinvent the wheel. You can add, remove, search, transform, and combine arrays with just a single method call.

Here's a quick overview of the ones you'll use most:

• push(): add to end
• pop(): remove from end
• unshift(): add to beginning
• shift(): remove from beginning
• toString(): convert to string
• join(): join elements with a separator
• concat(): merge arrays
• splice(): add or remove at a position
• slice(): extract a portion
• sort(): sort elements
• reverse(): reverse the order
• forEach(): loop through elements
• at(): access element by index (supports negative index)
• map(): transform each element
• filter(): keep elements that match a condition
• reduce(): combine all elements into one value
• find(): find first matching element
• findIndex(): find index of first match
• some(): check if any element matches
• every(): check if all elements match
• flat(): flatten nested arrays
• flatMap(): map then flatten

Let's wrap up! Here's a quick recap of everything we covered:

• An array stores multiple values in a single variable.
• Array indexes start at 0.
• Use const to declare arrays when the reference should not change.
• push / pop add or remove from the end.
• unshift / shift add or remove from the beginning.
• splice modifies the array in place; slice returns a copy.
• map, filter, and reduce are the most powerful tools for transforming data.
• find and findIndex search for elements by condition.
• some and every check conditions across the array.
• flat and flatMap handle nested arrays.

What's next? Now that you can work with lists of values, let's learn how JavaScript stores data as key-value pairs in the next tutorial.

• What is an array in JavaScript and how is it different from an object?
• What are the most commonly used array methods in JavaScript?
• What is the difference between map(), filter(), and reduce()?
• What is the difference between splice() and slice()?

Videos for this topic will be added soon.