JavaScript Arrays

Arrays are used to store multiple values inside a single variable. Instead of creating many separate variables, arrays help organize related data together.

Arrays are one of the most commonly used data structures in JavaScript applications.

Why Arrays are Important?

Store multiple values efficiently
Reduce unnecessary variables
Make data management easier
Useful for loops and dynamic content
Widely used in real applications

Syntax of Array

let arrayName = [

    value1,

    value2,

    value3

];

Explanation of Syntax

Arrays are written inside square brackets [].
Values are separated using commas.
Each value is called an array element.

Basic Array Example

The following example creates a simple array.

let colors = ["Red", "Blue", "Green"];

console.log(colors);

Output

["Red", "Blue", "Green"]

Detailed Explanation

The array stores three color values.
All values are grouped inside one variable.
Arrays can store strings, numbers, and other data types.

Accessing Array Elements

Array elements are accessed using indexes. Indexes start from 0.

let fruits = ["Apple", "Mango", "Banana"];

console.log(fruits[0]);

console.log(fruits[1]);

console.log(fruits[2]);

Output

Apple

Mango

Banana

Explanation

fruits[0] accesses the first element.
fruits[1] accesses the second element.
fruits[2] accesses the third element.

Updating Array Elements

Array values can be changed dynamically.

let colors = ["Red", "Blue", "Green"];

colors[1] = "Black";

console.log(colors);

Output

["Red", "Black", "Green"]

Explanation

The second value is updated from Blue to Black.
Arrays are mutable in JavaScript.

Array Length

The length property returns total array elements.

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

console.log(numbers.length);

Output

Explanation

length counts total elements inside the array.
It is commonly used with loops.

Adding Elements using push()

push() adds new elements at the end of an array.

let fruits = ["Apple", "Mango"];

fruits.push("Banana");

console.log(fruits);

Output

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

Explanation

push() inserts new elements at the end.
The array size increases automatically.

Removing Elements using pop()

pop() removes the last element from an array.

let fruits = ["Apple", "Mango", "Banana"];

fruits.pop();

console.log(fruits);

Output

["Apple", "Mango"]

Explanation

pop() removes the last array element.
The array size decreases automatically.

Looping Through Arrays

Loops are commonly used with arrays.

let colors = ["Red", "Blue", "Green"];

for(let i = 0; i < colors.length; i++){

    console.log(colors[i]);

}

Output

Red

Blue

Green

Explanation

The loop accesses every array element.
colors.length controls loop iterations.
colors[i] accesses current values.

Using forEach()

forEach() executes a function for every array element.

let numbers = [1, 2, 3];

numbers.forEach(num => {

    console.log(num);

});

Output

Explanation

forEach() automatically loops through arrays.
The arrow function runs for each value.

Arrays with Multiple Data Types

JavaScript arrays can store different data types together.

let data = [

    "Rahul",

    20,

    true

];

console.log(data);

Output

["Rahul", 20, true]

Explanation

The array stores string, number, and boolean values.
JavaScript arrays are flexible.

Common Array Methods

push() → Add element at end
pop() → Remove last element
shift() → Remove first element
unshift() → Add element at beginning
length → Total elements

Complete Real Life Example

The following example shows a simple shopping cart system using JavaScript arrays.

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript Arrays Example</title>

</head>

<body>

<h2>Shopping Cart</h2>

<button onclick="showProducts()">

Show Products

</button>

<ul id="output"></ul>

<script>

function showProducts(){

    let products = [

        "Laptop",

        "Mobile",

        "Headphones",

        "Keyboard",

        "Mouse"

    ];

    let result = "";

    for(let i = 0; i < products.length; i++){

        result += "<li>" +

        products[i] +

        "</li>";

    }

    document.getElementById("output").innerHTML =

    result;

}

</script>

</body>

</html>

Output

Shopping Cart

• Laptop
• Mobile
• Headphones
• Keyboard
• Mouse

Detailed Explanation of Example

The array stores product names.
The loop accesses every product.
Each product becomes a list item.
result += adds new HTML content repeatedly.
innerHTML displays the final list dynamically.
Arrays help manage collections of data efficiently.

Common Mistakes

Using incorrect array indexes.
Forgetting indexes start from 0.
Using wrong loop conditions.
Confusing arrays with objects.

Best Practices

Use meaningful array names.
Keep related data together.
Use loops for repetitive operations.
Use array methods whenever possible.
Avoid unnecessary nested arrays.

Important Notes

Arrays store multiple values.
Indexes start from 0.
Arrays are mutable.
Loops are commonly used with arrays.
Arrays are widely used in JavaScript applications.

Summary

Arrays store collections of data.
Arrays use square brackets [].
Indexes access array elements.
push() adds elements.
pop() removes elements.
Loops help process arrays efficiently.
Arrays are essential in JavaScript development.