JavaScript Arrays

By /

A variable usually stores one value at a time. But what if you need to store many values, such as the names of five students?

Creating a separate variable for every name would make the code longer.

let student1 = "Aman";
let student2 = "Priya";
let student3 = "Rahul";

An array lets you store multiple values in one place.

What is an Array?

An array is a collection of values stored together. For example, you can store several student names in one array.

Creating an Array

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Array</title>
</head>
<body>

    <h1>JavaScript Arrays</h1>

    <script>
        let students = ["Aman", "Priya", "Rahul"];

        console.log(students);
    </script>

</body>
</html>

Output:

["Aman", "Priya", "Rahul"]

The three names are stored inside the students array.

Accessing Array Items

Each item in an array has a position called an index.

Array indexes start from 0, not 1.

Aman    → 0
Priya   → 1
Rahul   → 2

You can use the index to get a particular item.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Accessing Array Items</title>
</head>
<body>

    <h1>Array Index</h1>

    <script>
        let students = ["Aman", "Priya", "Rahul"];

        console.log(students[0]);
        console.log(students[1]);
        console.log(students[2]);
    </script>

</body>
</html>

Output:

Aman
Priya
Rahul

So, if you want the first item, use index 0.

Changing an Array Item

Array items can be changed by using their index.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Changing Array Items</title>
</head>
<body>

    <h1>Changing Array Items</h1>

    <script>
        let students = ["Aman", "Priya", "Rahul"];

        students[1] = "Neha";

        console.log(students);
    </script>

</body>
</html>

Output:

["Aman", "Neha", "Rahul"]

The value at index 1 was changed from "Priya" to "Neha".

The length Property

The length property tells you how many items are in an array.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Array Length</title>
</head>
<body>

    <h1>Array Length</h1>

    <script>
        let fruits = ["Apple", "Mango", "Banana", "Orange"];

        console.log("Number of fruits:", fruits.length);
    </script>

</body>
</html>

Output:

Number of fruits: 4

Adding Items with push()

The push() method adds a new item to the end of an array.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript push Method</title>
</head>
<body>

    <h1>Adding an Array Item</h1>

    <script>
        let fruits = ["Apple", "Mango"];

        fruits.push("Banana");

        console.log(fruits);
    </script>

</body>
</html>

Output:

["Apple", "Mango", "Banana"]

Removing Items with pop()

The pop() method removes the last item from an array.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript pop Method</title>
</head>
<body>

    <h1>Removing an Array Item</h1>

    <script>
        let fruits = ["Apple", "Mango", "Banana"];

        fruits.pop();

        console.log(fruits);
    </script>

</body>
</html>

Output:

["Apple", "Mango"]

Adding Items with unshift()

The unshift() method adds an item to the beginning of an array.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript unshift Method</title>
</head>
<body>

    <h1>Adding an Item at the Beginning</h1>

    <script>
        let fruits = ["Mango", "Banana"];

        fruits.unshift("Apple");

        console.log(fruits);
    </script>

</body>
</html>

Output:

["Apple", "Mango", "Banana"]

Removing Items with shift()

The shift() method removes the first item from an array.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript shift Method</title>
</head>
<body>

    <h1>Removing the First Item</h1>

    <script>
        let fruits = ["Apple", "Mango", "Banana"];

        fruits.shift();

        console.log(fruits);
    </script>

</body>
</html>

Output:

["Mango", "Banana"]

A quick way to remember these four methods:

  • push() → adds to the end
  • pop() → removes from the end
  • unshift() → adds to the beginning
  • shift() → removes from the beginning

Looping Through an Array

Arrays are often used with loops when you want to work with every item.

Example: for Loop with an Array

<!DOCTYPE html>
<html>
<head>
    <title>Loop Through an Array</title>
</head>
<body>

    <h1>Students</h1>

    <script>
        let students = ["Aman", "Priya", "Rahul", "Neha"];

        for (let i = 0; i < students.length; i++) {
            console.log(students[i]);
        }
    </script>

</body>
</html>

Output:

Aman
Priya
Rahul
Neha

The loop starts at index 0 and continues until it reaches the end of the array.

for...of Loop

JavaScript also provides for...of, which makes it easier to go through array values.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript for of Loop</title>
</head>
<body>

    <h1>Array Values</h1>

    <script>
        let fruits = ["Apple", "Mango", "Banana"];

        for (let fruit of fruits) {
            console.log(fruit);
        }
    </script>

</body>
</html>

Output:

Apple
Mango
Banana

You don’t need to work with indexes here. The variable fruit gets each value one by one.

Useful Array Methods

JavaScript has many methods for working with arrays. Some of the most useful ones are:

  • push() – adds an item at the end
  • pop() – removes the last item
  • shift() – removes the first item
  • unshift() – adds an item at the beginning
  • includes() – checks whether an item exists
  • indexOf() – finds the position of an item
  • slice() – creates a part of an array
  • splice() – adds, removes, or replaces items

You will use these methods often when working with real JavaScript programs.

Key Points

  • An array stores multiple values in one place.
  • Array indexes start from 0.
  • length tells you how many items an array contains.
  • push() adds an item to the end.
  • pop() removes the last item.
  • unshift() adds an item to the beginning.
  • shift() removes the first item.
  • Loops can be used to go through array items.
  • for...of provides a simple way to read array values.

Arrays become much more useful when you start processing their values. In the next chapter, we will look at JavaScript Array Methods such as map(), filter(), find(), and reduce().

Frequently Asked Questions (FAQs)

Q1. What are JavaScript arrays used for?

JavaScript arrays are used to store multiple values in a single variable. They are useful for storing lists such as student names, product prices, marks, or other collections of data.

Q2. What is a JavaScript array index?

A JavaScript array index is the position of an item inside an array. Indexes start at 0, so the first item is at index 0, the second at index 1, and so on.

Q3. What is the JavaScript array length property?

The JavaScript array length property tells you the number of items in an array. For example, fruits.length returns 3 when the array contains three items.

Q4. What are JavaScript push and pop methods?

JavaScript push pop methods are used to change the end of an array. push() adds an item to the end, while pop() removes the last item.

Q5. What are some commonly used JavaScript array methods?

Common JavaScript array methods include push(), pop(), shift(), unshift(), includes(), indexOf(), slice(), and splice(). Modern JavaScript also provides methods such as map(), filter(), find(), and reduce().

Q6. How can you loop through a JavaScript array?

You can use a traditional for loop or a for...of loop to go through array values. The for...of loop is often easier when you simply need each value without its index.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top