JavaScript Arrays for Beginners: A Simple Guide

If you searched for "JavaScript arrays for beginners", here is the short answer: an array is a single variable that holds a list of values, like a shopping list in one box instead of many separate boxes. In this guide you will learn how to create an array, read and change its items, loop through it, and use the most common array methods — with small code examples you can copy, paste, and run right away.

What is an array in JavaScript?

A variable normally holds one value, like a single name or a single number. An array is different: it holds many values, in order, inside one variable. Each value in the array is called an "element", and each element has a position called an "index". JavaScript starts counting positions at 0, not 1, so the first element is at index 0, the second is at index 1, and so on.

Arrays are useful whenever you have a list of things: names of students, prices in a cart, colors in a menu, or lines in a to-do list. Instead of creating a separate variable for every item, you put them all in one array.

How to create an array

const fruits = ["apple", "banana", "mango"];
const numbers = [10, 20, 30, 40];
const empty = [];

console.log(fruits);
console.log(numbers);

Square brackets `[ ]` create an array. Inside the brackets, you list the values separated by commas. `fruits` is an array of three strings, `numbers` is an array of four numbers, and `empty` is an array with no items yet — you can add items to it later. We use `const` because we are not replacing the whole array, only changing what is inside it, which JavaScript still allows.

Reading items with an index

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

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "mango"
console.log(fruits[3]); // undefined

To read one item from an array, write the array name followed by the index in square brackets. `fruits[0]` gives you the first item, `fruits[1]` gives you the second, and so on. Asking for an index that does not exist, like `fruits[3]` in a 3-item array, does not cause an error — JavaScript simply returns `undefined`.

Finding the length of an array

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

console.log(fruits.length); // 3
console.log(fruits[fruits.length - 1]); // "mango", the last item

`.length` tells you how many items are in the array. It is very useful for loops, and also for getting the last item: since indexes start at 0, the last item is always at `length - 1`.

Changing and adding items

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

fruits[1] = "blueberry";     // change an item
fruits.push("orange");       // add to the end
fruits.unshift("grape");     // add to the start
fruits.pop();                // remove the last item

console.log(fruits); // ["grape", "apple", "blueberry", "banana"]

You can change one item by assigning a new value to its index, like `fruits[1] = "blueberry"`. To add items, use `push()` to add one to the end, or `unshift()` to add one to the start. To remove items, use `pop()` to remove the last item, or `shift()` to remove the first item. These four methods change the original array directly.

Looping through an array

Most of the time, you do not read array items one by one — you loop through the whole array and do something with every item. Here are the three most common ways beginners see.

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

// 1. classic for loop
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

// 2. for...of loop
for (const fruit of fruits) {
  console.log(fruit);
}

// 3. forEach method
fruits.forEach(function (fruit, index) {
  console.log(index, fruit);
});

The classic `for` loop counts from `i = 0` up to `fruits.length - 1`, using `i` as the index to read each item — this gives you full control, including the index number. The `for...of` loop is shorter: it hands you each value directly, without needing an index. `forEach()` is an array method that runs a function once for every item, and it also gives you the index as a second value if you need it. All three do the same job; `for...of` and `forEach()` are usually easier to read for beginners.

Useful array methods: map and filter

Once looping feels comfortable, two methods are worth learning early because they solve very common problems: `map()` builds a new array by changing every item, and `filter()` builds a new array that keeps only the items that pass a test.

const numbers = [1, 2, 3, 4, 5, 6];

const doubled = numbers.map(function (n) {
  return n * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10, 12]

const evens = numbers.filter(function (n) {
  return n % 2 === 0;
});
console.log(evens); // [2, 4, 6]

`map()` takes a function and applies it to every item, then returns a brand-new array with the results — here it multiplies every number by 2. `filter()` also takes a function, but that function must return `true` or `false`; only items where it returns `true` are kept — here `n % 2 === 0` checks if a number divides evenly by 2, so only even numbers survive. Neither method changes the original `numbers` array.

Quick reference: common array methods

Common mistakes beginners make with arrays

• Forgetting that indexes start at 0, so the third item is `array[2]`, not `array[3]`.
• Mixing up `.length` (a property, no parentheses) with methods like `.push()` (which need parentheses).
• Expecting `map()` or `filter()` to change the original array — they always return a new one.
• Trying to loop with a comma instead of `of`, for example writing `for (fruit in fruits)` when you meant `for (fruit of fruits)`. `for...in` loops over indexes, not values, and is not recommended for arrays.
• Comparing two arrays with `==` and expecting `true` — arrays are compared by reference, so two arrays with the same items are still considered different.

Putting it together: a small example

const cart = ["notebook", "pen", "eraser"];

function printCart(items) {
  items.forEach(function (item, index) {
    console.log(`${index + 1}. ${item}`);
  });
}

cart.push("ruler");
printCart(cart);
// 1. notebook
// 2. pen
// 3. eraser
// 4. ruler

This example combines everything from this guide. `cart` is an array of strings. `printCart` is a function that takes an array and loops through it with `forEach()`, printing a numbered list — `index + 1` is used because indexes start at 0 but people usually count from 1. Before printing, `push("ruler")` adds a fourth item to the end of the array. If you are new to writing functions like `printCart`, our guide on JavaScript functions covers that from scratch.