JavaScript Arrays

1. What is an Array?

An array is a special variable that can store multiple values in a single variable. Arrays can store any type of data (numbers, strings, objects, etc.). In JavaScript, arrays are dynamic, meaning they can grow or shrink in size.

2. Creating Arrays

There are two common ways to create an array:

A. Array Literal (Recommended)

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

B. Array Constructor

let numbers = new Array(1, 2, 3, 4, 5);
        

3. Accessing & Modifying Elements

You access array elements by referring to the index number. Array indexes start with 0.

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

// Accessing
document.write(colors[0]); // "Red"
document.write(colors[2]); // "Blue"

// Modifying
colors[1] = "Yellow";
document.write(colors); // ["Red", "Yellow", "Blue"]

// Length Property
document.write(colors.length); // 3
        

▶ Run Code

4. Basic Array Methods

These methods allow you to add or remove elements from an array.

• push(): Adds element to the end.
• pop(): Removes element from the end.
• unshift(): Adds element to the beginning.
• shift(): Removes element from the beginning.

let stack = ["A", "B", "C"];

stack.push("D");    // ["A", "B", "C", "D"]
stack.pop();        // ["A", "B", "C"]
stack.unshift("Z"); // ["Z", "A", "B", "C"]
stack.shift();      // ["A", "B", "C"]

document.write(stack);
        

▶ Run Code

5. Modifying & Searching

• splice(start, deleteCount, item...): Adds/Removes items from any position.
• slice(start, end): Returns a new array from a portion of the original.
• indexOf(item): Returns the index of an item (or -1 if not found).
• includes(item): Returns true if item exists.

let months = ["Jan", "March", "April", "June"];

// Insert "Feb" at index 1
months.splice(1, 0, "Feb"); 

// Search
document.write(months.includes("March")); // true
document.write(months.indexOf("June"));   // 4

document.write(months);
        

▶ Run Code

6. Iterating Over Arrays

You can loop through arrays using standard loops or modern methods.

let heroes = ["Batman", "Superman", "Ironman"];

// 1. for loop
for(let i=0; i < heroes.length; i++) {
    document.write(heroes[i]);
}

// 2. for...of loop (Modern)
for(let hero of heroes) {
    document.write(hero);
}

// 3. forEach method
heroes.forEach((hero, index) => {
    document.write(`${index}: ${hero}`);
});
        

▶ Run Code

7. High-Order Methods (ES6)

These methods are powerful for transforming data without mutating the original array.

• map(): Creates a new array by applying a function to every element.
• filter(): Creates a new array with elements that pass a test.
• reduce(): Reduces the array to a single value.

let nums = [1, 2, 3, 4, 5];

// Map: Square each number
let squared = nums.map(n => n * n);
document.write("Squared:", squared);

// Filter: Keep only even numbers
let evens = nums.filter(n => n % 2 === 0);
document.write("Evens:", evens);

// Reduce: Sum of all numbers
let sum = nums.reduce((total, n) => total + n, 0);
document.write("Sum:", sum);
        

▶ Run Code

8. Comparison Table: Array Methods

Method	Purpose	Modifies Original?
push()	Add element at end	Yes
pop()	Remove last element	Yes
shift()	Remove first element	Yes
unshift()	Add element at start	Yes
splice()	Add/remove element anywhere	Yes
slice()	Extract portion	No
map()	Transform elements	No
filter()	Filter elements	No
reduce()	Reduce to single value	No