What is an Array in JavaScript?

An array is a special variable in JavaScript used to store multiple values in a single variable. It is an ordered collection of elements, where each element has a numerical index (position) starting from 0.

1. Creating Arrays

There are two common ways to create an array:

a) Using Array Literals [] (Most Common)

let fruits = ["Apple", "Banana", "Mango"];
let numbers = [10, 20, 30, 40];
let mixed = [1, "Hello", true, null, { name: "John" }]; // Arrays can hold any data type

b) Using the new Array() Constructor

let cars = new Array("Tesla", "BMW", "Audi");

This method is less common and generally not recommended for simple arrays.

2. Accessing Elements

You access an array element by referring to its index inside square brackets [].

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

console.log(fruits[0]); // Output: "Apple"
console.log(fruits[1]); // Output: "Banana"
console.log(fruits[2]); // Output: "Mango"
console.log(fruits[3]); // Output: undefined (because no element exists at index 3)

3. Common Array Properties & Methods

length Property

Returns the number of elements in the array.

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.length); // Output: 3

push() & pop() (End of Array)

• push(): Adds one or more elements to the end of an array.

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

• pop(): Removes the last element from an array and returns it.

  let lastFruit = fruits.pop();
  console.log(lastFruit); // Output: "Orange"
  console.log(fruits); // Output: ["Apple", "Banana", "Mango"]
  

unshift() & shift() (Beginning of Array)

• unshift(): Adds one or more elements to the beginning of an array.

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

• shift(): Removes the first element from an array and returns it.

  let firstFruit = fruits.shift();
  console.log(firstFruit); // Output: "Strawberry"
  console.log(fruits); // Output: ["Apple", "Banana", "Mango"]
  

indexOf()

Returns the first index at which a given element can be found. Returns -1 if the element is not present.

let index = fruits.indexOf("Banana");
console.log(index); // Output: 1

let notFound = fruits.indexOf("Pineapple");
console.log(notFound); // Output: -1

includes()

Checks if an array includes a certain element, returning true or false.

console.log(fruits.includes("Apple")); // Output: true
console.log(fruits.includes("Grape")); // Output: false

slice()

Returns a shallow copy of a portion of an array into a new array. It does not change the original array.

let numbers = [10, 20, 30, 40, 50];
let sliced = numbers.slice(1, 4); // From index 1 (inclusive) to 4 (exclusive)

console.log(sliced); // Output: [20, 30, 40]
console.log(numbers); // Output: [10, 20, 30, 40, 50] (unchanged)

splice()

Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It modifies the original array.

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

// Remove 2 elements starting from index 1
let removed = numbers.splice(1, 2);
console.log(removed); // Output: [20, 30]
console.log(numbers); // Output: [10, 40, 50]

// Add elements at index 1 (without removing any)
numbers.splice(1, 0, 25, 35);
console.log(numbers); // Output: [10, 25, 35, 40, 50]

4. Iterating Over Arrays

for Loop

The classic way to loop through an array.

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output:
// Apple
// Banana
// Mango

forEach() Method

A more modern and cleaner way to iterate. It executes a provided function once for each array element.

fruits.forEach(function(fruit) {
  console.log("I love " + fruit);
});
// Output:
// I love Apple
// I love Banana
// I love Mango

// This can also be written with an arrow function:
fruits.forEach(fruit => console.log(fruit));

5. Important Modern Methods (ES6+)

map()

Creates a new array by applying a function to every element in the original array. Perfect for transforming data.

let numbers = [1, 2, 3];
let squared = numbers.map(num => num * num);

console.log(squared); // Output: [1, 4, 9]
console.log(numbers); // Output: [1, 2, 3] (original unchanged)

filter()

Creates a new array with all elements that pass the test implemented by the provided function.

let numbers = [1, 4, 9, 16, 25];
let bigNumbers = numbers.filter(num => num > 10);

console.log(bigNumbers); // Output: [16, 25]

find()

Returns the first element in the array that satisfies the provided testing function. Otherwise, it returns undefined.

let users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

let user = users.find(person => person.id === 2);
console.log(user); // Output: { id: 2, name: "Bob" }

reduce()

Executes a "reducer" function on each element, resulting in a single output value. Great for calculating sums or combining data.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 10
// accumulator: 0 -> 1 -> 3 -> 6 -> 10
// currentValue: 1 -> 2 -> 3 -> 4