JavaScript - Array

An array in JavaScript is a special type of object used to store multiple values in a single variable. It’s one of the most commonly used data structures in JavaScript because it helps organize and manage lists of data.

1. What is an Array?

An array is a collection of items stored at indexed positions.

Each item in an array is called an element.
Each element has a numeric index starting from 0.
Arrays can hold different data types at the same time.

Example:

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits); // ["Apple", "Banana", "Orange"]
console.log(fruits[0]); // "Apple" (first element)
console.log(fruits[2]); // "Orange" (third element)

2. How to Create an Array

There are two main ways to create arrays:

(a) Using Square Brackets (Recommended)

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

(b) Using the Array Constructor

let numbers = new Array(10, 20, 30, 40);

Best Practice: Use square brackets [] because it’s shorter and easier to read.

3. Array Indexing

JavaScript arrays are zero-based indexed.
The first element is at index 0.
The last element is at index array.length - 1.

let cars = ["BMW", "Audi", "Tesla"];
console.log(cars[0]); // "BMW"
console.log(cars[cars.length - 1]); // "Tesla"

4. Adding & Removing Elements

JavaScript provides many array methods:

(a) Add Elements

push() → Adds at the end
unshift() → Adds at the beginning

let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // ["Apple", "Banana", "Orange"]

fruits.unshift("Mango");
console.log(fruits); // ["Mango", "Apple", "Banana", "Orange"]

(b) Remove Elements

pop() → Removes from the end
shift() → Removes from the beginning

let colors = ["Red", "Green", "Blue"];
colors.pop();
console.log(colors); // ["Red", "Green"]

colors.shift();
console.log(colors); // ["Green"]

5. Changing Elements

You can modify an element directly using its index:

let animals = ["Dog", "Cat", "Elephant"];
animals[1] = "Tiger";
console.log(animals); // ["Dog", "Tiger", "Elephant"]

6. Common Array Methods

Method	Description	Example
`push()`	Add element to end	`arr.push(5)`
`pop()`	Remove last element	`arr.pop()`
`unshift()`	Add element to start	`arr.unshift(1)`
`shift()`	Remove first element	`arr.shift()`
`concat()`	Combine arrays	`arr1.concat(arr2)`
`slice()`	Copy part of an array	`arr.slice(1,3)`
`splice()`	Add/remove elements	`arr.splice(2,1)`
`indexOf()`	Find index of value	`arr.indexOf(20)`
`includes()`	Check if value exists	`arr.includes(30)`
`join()`	Convert to string	`arr.join(", ")`
`reverse()`	Reverse order	`arr.reverse()`
`sort()`	Sort elements	`arr.sort()`

7. Looping Through Arrays

There are multiple ways to loop through arrays:

(a) Using `for` Loop

let numbers = [10, 20, 30];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

(b) Using `for...of` Loop (Easier)

let colors = ["Red", "Green", "Blue"];
for (let color of colors) {
    console.log(color);
}

(c) Using `forEach()`

let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(function(fruit) {
    console.log(fruit);
});

8. Arrays Can Store Mixed Data Types

Unlike some other languages, JavaScript arrays can store different types of data:

let mixed = ["Hello", 42, true, { name: "John" }, [1, 2, 3]];
console.log(mixed[3].name); // "John"
console.log(mixed[4][1]);   // 2

9. Multi-Dimensional Arrays

Arrays can also contain other arrays:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6