Arrays in JavaScript

Arrays are one of the most important data structures in JavaScript.
They let you store multiple values in a single variable, keep them organized, and work with them easily.

---

What Is an Array?

An array is a special object that stores a list of values in order.

For example:

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

Each value has a position called an index.
Indexes start from 0, not 1.

So:

• numbers[0] → 10

• numbers[1] → 20

• numbers[3] → 40

---

How to Create Arrays

JavaScript gives you several ways to create arrays.

1. Using Square Brackets (Most Common)

const fruits = ["apple", "banana", "mango"];

2. Using the Array Constructor

const marks = new Array(10, 20, 30);

But this is less common because it can behave unexpectedly.

Example:

new Array(5) // creates an empty array of length 5

---

Accessing and Changing Array Elements

Use bracket notation to access elements.

const colors = ["red", "green", "blue"];
console.log(colors[1]); // green

You can update elements the same way:

colors[1] = "yellow";
console.log(colors); // ["red", "yellow", "blue"]

---

Array Length

Every array has a .length property.

const items = [1, 2, 3];
console.log(items.length); // 3

You can also change the length:

items.length = 1;
console.log(items); // [1]

Be careful—this deletes values.

---

Common Array Methods

JavaScript arrays come with many built-in methods.
Let’s look at the most useful ones.

---

1. Adding Elements

push() — add to the end

const nums = [1, 2];
nums.push(3);
console.log(nums); // [1, 2, 3]

unshift() — add to the beginning

nums.unshift(0);
console.log(nums); // [0, 1, 2, 3]

---

2. Removing Elements

pop() — remove from the end

nums.pop(); // removes 3

shift() — remove from the beginning

nums.shift(); // removes 0

---

3. Searching in Arrays

indexOf()

fruits.indexOf("banana"); // 1

includes()

fruits.includes("apple"); // true

---

4. Slicing and Splicing

slice() — copy a portion

const part = fruits.slice(1, 3);
// from index 1 to index 3 (excluding 3)

splice() — add or remove elements (modifies original)

fruits.splice(1, 1); // remove 1 element at index 1

---

5. Combining Arrays

concat()

const a = [1, 2];
const b = [3, 4];
const result = a.concat(b); // [1, 2, 3, 4]

Spread Syntax

const result2 = [...a, ...b];

---

6. Transforming Arrays

map() — create a new array

const doubled = [1, 2, 3].map(n => n * 2);

filter() — keep some elements

const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);

reduce() — combine all values into one

const sum = [1, 2, 3].reduce((total, n) => total + n, 0);

---

7. Iterating Over Arrays

for

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

for…of

for (const item of arr) {
  console.log(item);
}

forEach()

arr.forEach(item => console.log(item));

---

Arrays Can Store Any Type

JavaScript arrays can hold:

• numbers

• strings

• objects

• other arrays

• even functions

Example:

const mix = [1, "hello", [10, 20], { name: "Sam" }];

---

Arrays Are Objects (Important Concept)

Arrays are technically objects in JavaScript.

typeof [] // "object"

This means:

• they have methods

• they can be modified even if declared with const

• they behave differently than normal objects

Example:

const arr = [1, 2];
arr.push(3); // allowed

You can change the contents but not reassign:

arr = [4, 5]; // ❌ Error

---

Multidimensional Arrays

You can store arrays inside arrays.

const matrix = [
  [1, 2],
  [3, 4]
];

console.log(matrix[1][0]); // 3

---

Common Pitfalls

Adding elements using index numbers

const arr = [];
arr[5] = "hello";

console.log(arr);
// [empty × 5, "hello"]

This creates empty slots.

---

Confusing slice() and splice()

• slice() → does not modify the original

• splice() → modifies the original

---

Using == to compare arrays

[1, 2] == [1, 2] // false

Arrays compare by reference, not value.