⚡beginner

JavaScript Arrays — Working with Lists

Learn to store, access, and manipulate lists of data using JavaScript arrays and their powerful built-in methods.

What is an Array?

An array is a list of values stored in a single variable. Think of it like a numbered locker row — each locker (index) holds one item, and you access it by its number. Arrays are everywhere in programming: a list of users, a playlist of songs, a set of scores, items in a shopping cart.

Creating & Accessing Arrays

javascript

// Creating an array
let colors = ["red", "blue", "green", "yellow"];

// Accessing items (starts at 0!)
console.log(colors[0]); // "red"
console.log(colors[2]); // "green"
console.log(colors.length); // 4

// Changing an item
colors[1] = "purple";
// Now: ["red", "purple", "green", "yellow"]

Array Methods — Your Toolkit

javascript

let fruits = ["apple", "banana"];

// Add to end
fruits.push("cherry");    // ["apple", "banana", "cherry"]

// Remove from end
fruits.pop();              // ["apple", "banana"]

// Add to beginning
fruits.unshift("mango");   // ["mango", "apple", "banana"]

// Remove from beginning
fruits.shift();            // ["apple", "banana"]

// Find an item
fruits.includes("apple"); // true
fruits.indexOf("banana"); // 1

// Remove specific item
fruits.splice(1, 1);      // removes 1 item at index 1

Looping Through Arrays

javascript

let scores = [95, 82, 71, 88, 64];

// forEach — do something with each item
scores.forEach(score => {
  console.log(`Score: ${score}`);
});

// map — create a new array by transforming each item
let doubled = scores.map(s => s * 2);
// [190, 164, 142, 176, 128]

// filter — keep only items that pass a test
let passing = scores.filter(s => s >= 70);
// [95, 82, 71, 88]

// reduce — combine all items into one value
let total = scores.reduce((sum, s) => sum + s, 0);
// 400

Pro Tip

The Big 3 array methods to memorize: .map() transforms each item, .filter() keeps items that pass a test, .reduce() combines everything into one value. These are used constantly in real-world code.

Try It Yourself

Given an array of student grades: [92, 45, 78, 100, 63, 88, 55, 71], write code to: 1) filter out only passing grades (70+), 2) calculate the average of the passing grades, 3) find the highest grade using Math.max().

JavaScript Basics — Making Pages Interactive

JavaScript DOM — Controlling the Page

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free