JavaScript Arrays - </> CoderMantra

Q: 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.

Q: 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.

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 list of values stored inside one variable. For example, instead of creating a separate variable for every fruit, you can store all the fruits in one array.

Creating an Array

You can create an array by using square brackets [].

Example

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

    <h1>JavaScript Arrays</h1>

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

        console.log(fruits);
    </script>

</body>
</html>

Output:

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

The three fruit names are stored inside the fruits array.

An array can also store numbers, Boolean values, or other types of values.

let numbers = [10, 20, 30, 40];

Accessing Array Items

Each item in an array has a position called an index. Array indexes start from 0, not 1.

For example:

Apple   → 0
Mango   → 1
Banana  → 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 fruits = ["Apple", "Mango", "Banana"];

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

</body>
</html>

Output:

Apple
Mango
Banana

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 fruits = ["Apple", "Mango", "Banana"];

        fruits[1] = "Orange";

        console.log(fruits);
    </script>

</body>
</html>

Output:

["Apple", "Orange", "Banana"]

The value at index 1 was changed from "Mango" to "Orange".

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

JavaScript Multidimensional Arrays

Sometimes you need to store data in rows and columns, like a table. A multidimensional array is an array that contains other arrays. Think of it like a small table where each inner array represents one row.

Example

let students = [
    ["Aman", 14],
    ["Priya", 15],
    ["Rahul", 14]
];

Here, each student has two pieces of information:

Student name
Student age

The outer array contains three smaller arrays.

Creating a Multidimensional Array

Example

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

    <h1>Multidimensional Array</h1>

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

        console.log(students);
    </script>

</body>
</html>

Output:

[["Aman", 14], ["Priya", 15], ["Rahul", 14]]

Accessing Items in a Multidimensional Array

To access an item, you use two indexes.

The first index selects the inner array.
The second index selects the item inside that inner array.

For example:

students[0][0]

Here:

0 selects the first student
0 selects the student’s name

Example

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

    <h1>Student Details</h1>

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

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

</body>
</html>

Output:

Aman
14
Priya
15

Changing Items in a Multidimensional Array

You can also change an item by using two indexes.

Example

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

    <h1>Changing Student Age</h1>

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

        students[1][1] = 16;

        console.log(students);
    </script>

</body>
</html>

Output:

[["Aman", 14], ["Priya", 16], ["Rahul", 14]]

Priya’s age was changed from 15 to 16.

Looping Through a Multidimensional Array

You can use loops to go through the items of a multidimensional array.

Example

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

    <h1>Student Details</h1>

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

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

</body>
</html>

Output:

Aman 14
Priya 15
Rahul 14

The outer loop goes through each student. students[i][0] gets the name, and students[i][1] gets the age.

Multidimensional Array as a Table

Multidimensional arrays can also be used to store information like a table.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Array as a Table</title>
</head>
<body>

    <h1>Student Marks</h1>

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

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

</body>
</html>

Output:

Aman scored 85
Priya scored 92
Rahul scored 78

This is a simple way to understand how multidimensional arrays can store data in rows and columns.

JavaScript Array Methods

An array method is a ready-made function that helps you work with an array. JavaScript provides many array methods for adding, removing, searching, and changing items. Some commonly used array methods are:

push() – adds an item to the end
pop() – removes the last item
unshift() – adds an item to the beginning
shift() – removes the first item

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

`slice()` Method

The slice() method takes a part of an array and creates a new array from it. It does not change the original array.

Example

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

    <h1>Slice Method</h1>

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

        let selectedFruits = fruits.slice(1, 3);

        console.log(selectedFruits);
    </script>

</body>
</html>

Output:

["Mango", "Banana"]

Here, slice(1, 3) starts at index 1 and stops before index 3.

`splice()` Method

The splice() method can add, remove, or replace items in an array.

Example

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

    <h1>Splice Method</h1>

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

        fruits.splice(1, 1);

        console.log(fruits);
    </script>

</body>
</html>

Output:

["Apple", "Banana"]

Here:

fruits.splice(1, 1);

means:

1 → start at index 1
1 → remove one item

`concat()` Method

The concat() method joins two or more arrays together.

Example

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

    <h1>Concat Method</h1>

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

        let food = fruits.concat(vegetables);

        console.log(food);
    </script>

</body>
</html>

Output:

["Apple", "Mango", "Carrot", "Potato"]

`join()` Method

The join() method joins all the items in an array into one string.

Example

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

    <h1>Join Method</h1>

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

        let result = fruits.join(", ");

        console.log(result);
    </script>

</body>
</html>

Output:

Apple, Mango, Banana

JavaScript Array Search

Sometimes you need to check whether a value exists in an array or find where it is located. JavaScript provides several methods for searching arrays.

`includes()` Method

The includes() method checks whether an array contains a particular value. It returns true if the value exists and false if it does not.

Example

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

    <h1>Array Search</h1>

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

        console.log(fruits.includes("Mango"));
        console.log(fruits.includes("Orange"));
    </script>

</body>
</html>

Output:

true
false

`indexOf()` Method

The indexOf() method finds the position of a value in an array. If the value is not found, it returns -1.

Example

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

    <h1>Finding an Array Item</h1>

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

        console.log(fruits.indexOf("Mango"));
        console.log(fruits.indexOf("Orange"));
    </script>

</body>
</html>

Output:

1
-1

Mango is at index 1. Orange is not in the array, so JavaScript returns -1.

`lastIndexOf()` Method

The lastIndexOf() method finds the last position of a value in an array.

Example

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

    <h1>Last Index of an Item</h1>

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

        console.log(fruits.lastIndexOf("Mango"));
    </script>

</body>
</html>

Output:

The last "Mango" is at index 3.

`find()` Method

The find() method returns the first item that matches a condition.

Example

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

    <h1>Find an Array Item</h1>

    <script>
        let numbers = [10, 15, 20, 25];

        let result = numbers.find(function(number) {
            return number > 18;
        });

        console.log(result);
    </script>

</body>
</html>

Output:

The first number greater than 18 is 20.

`findIndex()` Method

The findIndex() method finds the position of the first item that matches a condition.

Example

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

    <h1>Find Array Index</h1>

    <script>
        let numbers = [10, 15, 20, 25];

        let result = numbers.findIndex(function(number) {
            return number > 18;
        });

        console.log(result);
    </script>

</body>
</html>

Output:

The first number greater than 18 is 20, and its index is 2.

JavaScript Array Sort

Sometimes you need to arrange array items in a particular order. JavaScript provides methods that can help you sort and reverse arrays.

`sort()` Method

The sort() method arranges the items in an array.

Example: Sorting Names

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

    <h1>Sorting an Array</h1>

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

        students.sort();

        console.log(students);
    </script>

</body>
</html>

Output:

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

The names are arranged in alphabetical order.

Sorting Numbers

When sorting numbers, JavaScript needs a comparison function.

Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Number Sort</title>
</head>
<body>

    <h1>Sorting Numbers</h1>

    <script>
        let numbers = [40, 10, 30, 20];

        numbers.sort(function(a, b) {
            return a - b;
        });

        console.log(numbers);
    </script>

</body>
</html>

Output:

[10, 20, 30, 40]

The comparison function tells JavaScript to arrange the numbers from smallest to largest. To sort numbers from largest to smallest:

numbers.sort(function(a, b) {
    return b - a;
});

`reverse()` Method

The reverse() method changes the order of the items so that the last item comes first.

Example

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

    <h1>Reverse an Array</h1>

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

        fruits.reverse();

        console.log(fruits);
    </script>

</body>
</html>

Output:

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

JavaScript Array Iterations

Array iteration means going through the items of an array one by one. For example, if an array has five student names, you can use iteration to look at each student’s name. JavaScript provides several ways to go through an array.

Using a `for` Loop

You can use a for loop to go through an array.

Example

<!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

The for...of loop goes through the values of an array one by one.

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.

`forEach()` Method

The forEach() method runs a function once for each item in an array.

Example

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

    <h1>Using forEach()</h1>

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

        students.forEach(function(student) {
            console.log(student);
        });
    </script>

</body>
</html>

Output:

Aman
Priya
Rahul

Here, forEach() takes each student from the array and runs the function.

`map()` Method

The map() method creates a new array by changing each item.

Example

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

    <h1>Using map()</h1>

    <script>
        let numbers = [1, 2, 3, 4];

        let doubled = numbers.map(function(number) {
            return number * 2;
        });

        console.log(doubled);
    </script>

</body>
</html>

Output:

[2, 4, 6, 8]

The map() method creates a new array containing the changed values.

`filter()` Method

The filter() method creates a new array containing only the items that match a condition.

Example

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

    <h1>Using filter()</h1>

    <script>
        let numbers = [10, 15, 20, 25, 30];

        let result = numbers.filter(function(number) {
            return number > 20;
        });

        console.log(result);
    </script>

</body>
</html>

Output:

[25, 30]

Only the numbers greater than 20 are included in the new array.

`some()` Method

The some() method checks whether at least one item matches a condition.

Example

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

    <h1>Using some()</h1>

    <script>
        let numbers = [10, 15, 20, 25];

        let result = numbers.some(function(number) {
            return number > 20;
        });

        console.log(result);
    </script>

</body>
</html>

Output:

true

There is at least one number greater than 20, so the result is true.

`every()` Method

The every() method checks whether all items match a condition.

Example

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

    <h1>Using every()</h1>

    <script>
        let numbers = [10, 20, 30, 40];

        let result = numbers.every(function(number) {
            return number > 5;
        });

        console.log(result);
    </script>

</body>
</html>

Output:

true

All the numbers are greater than 5, so the result is true.

Quick Recap

An array stores multiple values in one variable.
Array indexes start from 0.
The length property tells you how many items are in an array.
A multidimensional array is an array that contains other arrays.
push() and unshift() add items to an array.
pop() and shift() remove items from an array.
slice() gets a part of an array without changing the original array.
splice() can add, remove, or replace items.
concat() joins arrays together.
join() turns array items into one string.
includes() checks whether a value exists.
indexOf() finds the position of a value.
find() and findIndex() search using a condition.
sort() arranges array items.
reverse() reverses the order of array items.
for, for...of, and forEach() can be used to go through array items.
map() creates a new array by changing each item.
filter() creates a new array with items that match a condition.
some() checks whether at least one item matches a condition.
every() checks whether all items match a condition.

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. Can beginners practice JavaScript Arrays questions on CoderMantra?

Yes, these practice questions are suitable for beginners learning JavaScript arrays.

Q3. Can I practice JavaScript Array Methods?

Yes, you can practice questions based on commonly used JavaScript array methods.

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. Do these questions cover JavaScript Array Search and Sort?

Yes, the practice includes questions on searching and sorting JavaScript arrays.

Q6. Are Javascript array iterations included in the practice?

Yes, you can practice questions related to iterating through JavaScript arrays.

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

Nidhi Srivastav

What is an Array?

Creating an Array

Example

Accessing Array Items

Example

Changing an Array Item

Example

The length Property

Example

JavaScript Multidimensional Arrays

Example

Creating a Multidimensional Array

Example

Accessing Items in a Multidimensional Array

Example

Changing Items in a Multidimensional Array

Example

Looping Through a Multidimensional Array

Example

Multidimensional Array as a Table

Example

JavaScript Array Methods

Adding Items with push()

Example

Removing Items with pop()

Example

Adding Items with unshift()

Example

Removing Items with shift()

Example

slice() Method

Example

splice() Method

Example

concat() Method

Example

join() Method

Example

JavaScript Array Search

includes() Method

Example

indexOf() Method

Example

lastIndexOf() Method

Example

find() Method

Example

findIndex() Method

Example

JavaScript Array Sort

sort() Method

Example: Sorting Names

Sorting Numbers

Example

reverse() Method

Example

JavaScript Array Iterations

Using a for Loop

Example

for...of Loop

Example

forEach() Method

Example

map() Method

Example

filter() Method

Example

some() Method

Example

every() Method

Example

Quick Recap

Frequently Asked Questions (FAQs)

Q1. What are JavaScript arrays used for?

Q2. Can beginners practice JavaScript Arrays questions on CoderMantra?

Q3. Can I practice JavaScript Array Methods?

Q4. What are JavaScript push and pop methods?

Q5. Do these questions cover JavaScript Array Search and Sort?

Q6. Are Javascript array iterations included in the practice?

Related Posts

The `length` Property

Adding Items with `push()`

Removing Items with `pop()`

Adding Items with `unshift()`

Removing Items with `shift()`

`slice()` Method

`splice()` Method

`concat()` Method

`join()` Method

`includes()` Method

`indexOf()` Method

`lastIndexOf()` Method

`find()` Method

`findIndex()` Method

`sort()` Method

`reverse()` Method

Using a `for` Loop

`for...of` Loop

`forEach()` Method

`map()` Method

`filter()` Method

`some()` Method

`every()` Method