Store an Ordered Class List

An array stores an ordered sequence using indexes that begin at zero. length counts positions, and push appends an item. Keeping marks in an array makes traversal and transformations possible.

Before this topic, review Group a Student Record if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

In JavaScript, arrays are used to store multiple values in a single variable. Arrays are powerful, flexible, and foundational to almost every JavaScript program you'll write. This tutorial walks you through array creation, access, iteration, and manipulation — from basics to advanced techniques.

You can create arrays using two main approaches: array literals and the Array constructor.

// Using array literal
let fruits = ["Apple", "Banana", "Cherry"];

// Using Array constructor
let numbers = new Array(1, 2, 3, 4);

[ 'Apple', 'Banana', 'Cherry' ]
[ 1, 2, 3, 4 ]

Each item in an array has an index (starting from 0). You can access elements using square bracket notation.

let fruits = ["Mango", "Peach", "Grapes"];
console.log(fruits[0]);
console.log(fruits[2]);

Mango
Grapes

You can change array elements by directly assigning new values to indexes.

let colors = ["Red", "Green", "Blue"];
colors[1] = "Yellow";
console.log(colors);

[ 'Red', 'Yellow', 'Blue' ]

The length property returns the total number of elements in the array.

let nums = [10, 20, 30, 40];
console.log(nums.length);

4

You can use for, for...of, or forEach loops to iterate over arrays.

Using for loop

let items = ["Pen", "Pencil", "Eraser"];
for(let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

Using for...of loop

for (let item of items) {
  console.log(item);
}

Using forEach method

items.forEach(function(item) {
  console.log(item);
});

Pen
Pencil
Eraser

push() and pop()

push() adds to the end, pop() removes from the end.

let nums = [1, 2];
nums.push(3);   // [1, 2, 3]
nums.pop();     // [1, 2]

unshift() and shift()

unshift() adds to the start, shift() removes from the start.

let nums = [2, 3];
nums.unshift(1); // [1, 2, 3]
nums.shift();    // [2, 3]

indexOf() and includes()

let items = ["a", "b", "c"];
console.log(items.indexOf("b"));  // 1
console.log(items.includes("d")); // false

slice() and splice()

let arr = [10, 20, 30, 40];
let sliced = arr.slice(1, 3); // [20, 30]
arr.splice(2, 1);             // Removes 30

join() and toString()

let arr = ["x", "y", "z"];
console.log(arr.join("-"));   // "x-y-z"
console.log(arr.toString());  // "x,y,z"

Arrays can contain other arrays — useful for matrices, tables, or grouped data.

let matrix = [
  [1, 2],
  [3, 4]
];
console.log(matrix[1][0]);  // 3

The spread operator (...) expands elements of an array.

let a = [1, 2];
let b = [3, 4];
let combined = [...a, ...b];
console.log(combined);

[1, 2, 3, 4]

Extract values from arrays into variables.

let [x, y] = [10, 20];
console.log(x); // 10
console.log(y); // 20

map()

Transforms each element and returns a new array.

let nums = [1, 2, 3];
let squared = nums.map(n => n * n);
console.log(squared);

[1, 4, 9]

filter()

Filters elements based on condition.

let nums = [5, 10, 15];
let filtered = nums.filter(n => n > 7);
console.log(filtered);

[10, 15]

reduce()

Reduces the array to a single value.

let nums = [1, 2, 3, 4];
let sum = nums.reduce((acc, val) => acc + val, 0);
console.log(sum);

10

The sort() method sorts strings alphabetically by default. For numbers, a compare function is needed.

let arr = [40, 100, 1, 5];
arr.sort((a, b) => a - b);
console.log(arr);

[1, 5, 40, 100]

Arrays are the heart of JavaScript data structures. Understanding how to declare, access, manipulate, and traverse them lays the groundwork for solving real-world problems — from building dynamic UIs to managing data pipelines. With mastery of arrays, you take a giant leap toward becoming a fluent JavaScript developer.

An index equal to length is past the last element. Arrays can contain holes; delete does not compact indexes like splice.

Your task: Replace [70,80] with [60,80]. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Appending still creates a third item, while index zero now contains 60.

An array stores an ordered sequence using indexes that begin at zero. length counts positions, and push appends an item. Keeping marks in an array makes traversal and transformations possible.

Check your variation against this explanation: Appending still creates a third item, while index zero now contains 60.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.