DocsHub
Arrays

Array Basics

Learn how to create, access, and modify arrays in JavaScript.

Array Basics

So far every variable we created stored a single value — one name, one number, one boolean. But what if you need to store a list of values? A list of students, a list of prices, a list of messages?

That is what arrays are for. An array is an ordered list of values stored in a single variable.

const students = ["Ali", "Sara", "Zara", "Omar"];
const prices = [120, 450, 89, 300];
const mixed = ["Ali", 22, true, null];

Instead of creating four separate variables for four students, you have one array that holds all of them.


Creating an Array

The most common way to create an array is with square brackets [].

// Empty array
const empty = [];

// Array of strings
const fruits = ["apple", "mango", "banana"];

// Array of numbers
const scores = [88, 72, 95, 61];

// Arrays can hold any type — even mixed
const profile = ["Ali", 22, true, null];

// Array of objects
const users = [
  { name: "Ali", age: 22 },
  { name: "Sara", age: 25 },
];

Arrays can hold any type of value — strings, numbers, booleans, objects, even other arrays. In practice, you usually keep one type per array to keep things predictable.


Accessing Items — Index

Every item in an array has a position called an index. Arrays are zero-indexed — the first item is at index 0, not 1.

const fruits = ["apple", "mango", "banana", "grape"];
//               index 0   index 1   index 2   index 3

Use square brackets with the index to access an item:

console.log(fruits[0]); // apple
console.log(fruits[1]); // mango
console.log(fruits[2]); // banana
console.log(fruits[3]); // grape
console.log(fruits[4]); // undefined — no item at index 4

Accessing an index that does not exist gives you undefined — no error, just nothing there.

Accessing the last item

Since you don't always know the length, use array.length - 1 to get the last item:

const fruits = ["apple", "mango", "banana", "grape"];

console.log(fruits[fruits.length - 1]); // grape

Or use the modern .at() method which accepts negative indexes:

console.log(fruits.at(-1)); // grape  — last item
console.log(fruits.at(-2)); // banana — second to last

Negative indexes with .at() count from the end. Much cleaner than length - 1.


Modifying Items

You can change any item by assigning a new value to its index:

const fruits = ["apple", "mango", "banana"];

fruits[1] = "orange";
console.log(fruits); // ["apple", "orange", "banana"]

Even though fruits is declared with const, you can still modify its contents. const only prevents you from reassigning the variable itself — fruits = [] would fail. But changing what is inside the array is allowed.


Array Length

The length property tells you how many items are in the array:

const fruits = ["apple", "mango", "banana"];

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

length is always one more than the last index — because indexes start at 0.

const scores = [88, 72, 95];
//               0    1    2   ← indexes
console.log(scores.length); // 3 ← not 2

Arrays Are Reference Types

In the Data Types topic we mentioned that objects are copied by reference — not by value. Arrays are objects too, so the same rule applies.

// Primitive — copied by value
let a = 10;
let b = a;
b = 20;
console.log(a); // 10 — unchanged

// Array — copied by reference
const original = [1, 2, 3];
const copy = original;
copy[0] = 99;
console.log(original); // [99, 2, 3] — original changed too!

copy and original both point to the same array in memory. Changing one changes both.

To make a real independent copy, use the spread operator:

const original = [1, 2, 3];
const copy = [...original]; // real copy
copy[0] = 99;
console.log(original); // [1, 2, 3] — unchanged
console.log(copy);     // [99, 2, 3]

We cover the spread operator in full detail in its own topic.


Nested Arrays

Arrays can contain other arrays — this is called a nested or multi-dimensional array.

const grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Access nested items by chaining indexes:

console.log(grid[0]);    // [1, 2, 3]
console.log(grid[0][0]); // 1
console.log(grid[1][2]); // 6
console.log(grid[2][1]); // 8

First index selects the row, second index selects the item within that row.


Checking if Something is an Array

Since typeof returns "object" for arrays, use Array.isArray() to check properly:

const fruits = ["apple", "mango"];
const user = { name: "Ali" };

console.log(typeof fruits);          // "object" — not helpful
console.log(Array.isArray(fruits));  // true
console.log(Array.isArray(user));    // false
console.log(Array.isArray("hello")); // false

A Real Example — Student Gradebook

const students = ["Ali", "Sara", "Zara", "Omar"];
const scores =   [88,    72,     95,     61   ];

for (let i = 0; i < students.length; i++) {
  const grade = scores[i] >= 90 ? "A"
              : scores[i] >= 80 ? "B"
              : scores[i] >= 70 ? "C"
              : "F";

  console.log(`${students[i]}: ${scores[i]} — Grade ${grade}`);
}

// Ali:  88 — Grade B
// Sara: 72 — Grade C
// Zara: 95 — Grade A
// Omar: 61 — Grade F

Two parallel arrays — one for names, one for scores. The same index gives you the name and score for the same student.


Summary

  • An array is an ordered list of values stored in one variable
  • Created with square brackets — const arr = [1, 2, 3]
  • Items are accessed by index — starting at 0
  • array.length gives the total number of items
  • Use .at(-1) to access the last item cleanly
  • const arrays can have their contents modified — just not reassigned
  • Arrays are reference types — copying points to the same array, use spread to make a real copy
  • Use Array.isArray() to check if something is an array

On this page