JavaScript Arrays

What is an Array?

An array is a special variable used to store multiple values in a single place.

const colors = ["red", "green", "blue"];

Think of it like a list or collection of items — each with an index starting from 0.

Why Use Arrays?

Store related data (like names, scores, items)
Loop through multiple values
Perform operations like sorting, filtering, searching, etc.

Creating Arrays

const fruits = ["apple", "banana", "cherry"];
const numbers = [10, 20, 30, 40];
const mixed = ["text", 100, true, null];

You can also create an array using the Array() constructor:

const cars = new Array("Toyota", "Honda", "BMW");

Accessing Array Elements

console.log(fruits[0]); // apple
console.log(fruits[2]); // cherry

Modifying Array Elements

fruits[1] = "mango";
console.log(fruits); // ["apple", "mango", "cherry"]

Array Length

console.log(fruits.length); // 3

Adding & Removing Elements

push() — Add to end

fruits.push("grape");

pop() — Remove from end

fruits.pop();

unshift() — Add to beginning

fruits.unshift("orange");

shift() — Remove from beginning

fruits.shift();

Looping Through Arrays

for loop

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for...of

for (let fruit of fruits) {
  console.log(fruit);
}

forEach()

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Common Array Methods

Method	Description	Example
`push()`	Add item to end	`arr.push("new")`
`pop()`	Remove last item	`arr.pop()`
`shift()`	Remove first item	`arr.shift()`
`unshift()`	Add item to start	`arr.unshift("start")`
`indexOf()`	Find index of an item	`arr.indexOf("banana")`
`includes()`	Check if item exists	`arr.includes("apple")`
`join()`	Join array to string	`arr.join(", ")`
`slice()`	Extract portion of array	`arr.slice(1, 3)`
`splice()`	Add/remove items	`arr.splice(1, 2, "new")`
`concat()`	Merge arrays	`arr1.concat(arr2)`
`reverse()`	Reverse the array	`arr.reverse()`
`sort()`	Sort the array	`arr.sort()`

Searching in Arrays

const pets = ["cat", "dog", "rabbit"];

console.log(pets.includes("dog")); // true
console.log(pets.indexOf("rabbit")); // 2

Array of Objects

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
                                  
console.log(users[0].name); // Alice

Modern Array Methods (ES6+)

map() - transforms each item

const nums = [1, 2, 3];
const squared = nums.map(n => n * n); // [1, 4, 9]

filter() - keeps only matching items

const ages = [12, 18, 22, 15];
const adults = ages.filter(age => age >= 18); // [18, 22]

find() – returns first matching item

const found = ages.find(age => age > 18); // 22

Destructuring Arrays

Extract values into variables easily:

const cities = ["Delhi", "Mumbai", "Chennai"];
const [first, second] = cities;
                                    
console.log(first); // Delhi
console.log(second); // Mumbai

🧪 Practice Exercise:

Task:

Create an array of your favorite movies and print each using a loop.
Add and remove items using push() and pop().
Create an array of numbers and use map() to double each number.
Filter an array to find all even numbers.
Use splice() to replace an item in the array.