JavaScript Arrays - Complete Guide

Arrays are one of the most important data structures in JavaScript. They let you store and work with lists of data. Let's learn everything about arrays!

What is an Array?

An array is a collection of items stored in a single variable. Think of it like a shopping list or a row of boxes, each containing a value.

let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["hello", 42, true, null];

Creating Arrays

Array Literal (Most Common)

let fruits = ["apple", "banana", "orange"];

Array Constructor

let fruits = new Array("apple", "banana", "orange");

Empty Array

let empty = [];
let empty2 = new Array();

Accessing Array Elements

Arrays are zero-indexed (start at 0):

let fruits = ["apple", "banana", "orange"];
 
console.log(fruits[0]);  // "apple" (first element)
console.log(fruits[1]);  // "banana" (second element)
console.log(fruits[2]);  // "orange" (third element)
console.log(fruits.length);  // 3 (number of elements)

Modifying Arrays

Adding Elements

let fruits = ["apple", "banana"];
 
// Add to end
fruits.push("orange");  // ["apple", "banana", "orange"]
 
// Add to beginning
fruits.unshift("grape");  // ["grape", "apple", "banana", "orange"]
 
// Add at specific index
fruits.splice(1, 0, "mango");  // Insert at index 1

Removing Elements

let fruits = ["apple", "banana", "orange"];
 
// Remove from end
fruits.pop();  // Removes "orange"
 
// Remove from beginning
fruits.shift();  // Removes "apple"
 
// Remove at specific index
fruits.splice(1, 1);  // Remove 1 element at index 1

Modifying Elements

let fruits = ["apple", "banana", "orange"];
fruits[1] = "grape";  // ["apple", "grape", "orange"]

Array Methods

forEach - Loop Through Array

let fruits = ["apple", "banana", "orange"];
 
fruits.forEach(function(fruit) {
    console.log(fruit);
});
// Output: apple, banana, orange
 
// Arrow function version
fruits.forEach(fruit => console.log(fruit));

map - Transform Array

let numbers = [1, 2, 3, 4];
 
let doubled = numbers.map(function(num) {
    return num * 2;
});
// [2, 4, 6, 8]
 
// Arrow function version
let doubled2 = numbers.map(num => num * 2);

filter - Filter Array

let numbers = [1, 2, 3, 4, 5, 6];
 
let evens = numbers.filter(function(num) {
    return num % 2 === 0;
});
// [2, 4, 6]
 
// Arrow function version
let evens2 = numbers.filter(num => num % 2 === 0);

find - Find Element

let fruits = ["apple", "banana", "orange"];
 
let found = fruits.find(function(fruit) {
    return fruit === "banana";
});
// "banana"
 
// Arrow function version
let found2 = fruits.find(fruit => fruit === "banana");

includes - Check if Element Exists

let fruits = ["apple", "banana", "orange"];
 
console.log(fruits.includes("banana"));  // true
console.log(fruits.includes("grape"));   // false

indexOf - Find Index

let fruits = ["apple", "banana", "orange"];
 
console.log(fruits.indexOf("banana"));  // 1
console.log(fruits.indexOf("grape"));   // -1 (not found)

join - Join Elements

let fruits = ["apple", "banana", "orange"];
 
console.log(fruits.join(", "));  // "apple, banana, orange"
console.log(fruits.join("-"));   // "apple-banana-orange"

slice - Copy Part of Array

let fruits = ["apple", "banana", "orange", "grape"];
 
let some = fruits.slice(1, 3);  // ["banana", "orange"]
let copy = fruits.slice();      // Copy entire array

splice - Add/Remove Elements

let fruits = ["apple", "banana", "orange"];
 
// Remove 1 element at index 1
fruits.splice(1, 1);  // ["apple", "orange"]
 
// Add elements at index 1
fruits.splice(1, 0, "grape", "mango");
// ["apple", "grape", "mango", "orange"]

reduce - Reduce to Single Value

let numbers = [1, 2, 3, 4, 5];
 
let sum = numbers.reduce(function(total, num) {
    return total + num;
}, 0);
// 15
 
// Arrow function version
let sum2 = numbers.reduce((total, num) => total + num, 0);

sort - Sort Array

let fruits = ["banana", "apple", "orange"];
 
fruits.sort();  // ["apple", "banana", "orange"]
 
let numbers = [3, 1, 4, 2, 5];
numbers.sort((a, b) => a - b);  // [1, 2, 3, 4, 5]

Looping Through Arrays

for Loop

let fruits = ["apple", "banana", "orange"];
 
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

for...of Loop (Modern)

let fruits = ["apple", "banana", "orange"];
 
for (let fruit of fruits) {
    console.log(fruit);
}

forEach Method

let fruits = ["apple", "banana", "orange"];
 
fruits.forEach(fruit => {
    console.log(fruit);
});

Multi-dimensional Arrays

Arrays can contain other arrays:

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
 
console.log(matrix[0][1]);  // 2

Visual Explanation: Array Structure

Here's how arrays are stored:

Array Structure:
┌─────────────────────────────┐
│ fruits = ["apple", "banana",│
│          "orange"]          │
│                             │
│ Index:  0       1      2    │
│ Value: "apple" "banana"     │
│        "orange"             │
│                             │
│ length: 3                   │
└─────────────────────────────┘

Frequently Asked Questions (FAQ)

Q1: What's the difference between push and unshift?

push - Adds to end of array
unshift - Adds to beginning of array

let arr = [2, 3];
arr.push(4);      // [2, 3, 4]
arr.unshift(1);  // [1, 2, 3, 4]

Q2: What's the difference between slice and splice?

slice - Returns new array (doesn't modify original)
splice - Modifies original array

let arr = [1, 2, 3];
let newArr = arr.slice(1);  // [2, 3], arr still [1, 2, 3]
arr.splice(1, 1);           // arr is now [1, 3]

Q3: How do I check if an array is empty?

A: Check the length:

let arr = [];
if (arr.length === 0) {
    console.log("Array is empty");
}

Q4: Can arrays have different types of elements?

A: Yes! JavaScript arrays can contain any types:

let mixed = ["hello", 42, true, null, {name: "John"}];

Q5: What's the difference between map and forEach?

map - Returns new array with transformed elements
forEach - Just loops, doesn't return anything

let numbers = [1, 2, 3];
let doubled = numbers.map(n => n * 2);  // [2, 4, 6]
numbers.forEach(n => console.log(n));    // Just logs

Q6: How do I remove duplicates from an array?

A: Use Set:

let arr = [1, 2, 2, 3, 3, 3];
let unique = [...new Set(arr)];  // [1, 2, 3]

Q7: Can I use arrays as a stack or queue?

A: Yes!

Stack - Use push/pop (LIFO)
Queue - Use push/shift (FIFO)

Q8: What's the spread operator?

A: Spreads array into individual elements:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]

Q9: How do I find the largest number in an array?

A: Use Math.max with spread:

let numbers = [1, 5, 3, 9, 2];
let max = Math.max(...numbers);  // 9

Q10: Can I use arrays like objects?

A: Arrays are objects in JavaScript, but it's better to use arrays for lists and objects for key-value pairs.

Next Steps

Now that you understand arrays, here's what to learn next:

Next: Learn about JavaScript Objects - Store key-value pairs
Explore JavaScript DOM - Interact with web pages
Understand JavaScript Events - Handle user interactions
Master JavaScript Async - Promises and async/await

Arrays are essential in JavaScript. Practice using different array methods to get comfortable!