JavaScript Arrays
Basics to Advanced with Practical Examples

Introduction to JavaScript Arrays

In JavaScript, arrays are used to store multiple values in a single variable. Arrays are powerful, flexible, and foundational to almost every JavaScript program you'll write. This tutorial walks you through array creation, access, iteration, and manipulation — from basics to advanced techniques.

Creating an Array

You can create arrays using two main approaches: array literals and the Array constructor.

// Using array literal
let fruits = ["Apple", "Banana", "Cherry"];

// Using Array constructor
let numbers = new Array(1, 2, 3, 4);

[ 'Apple', 'Banana', 'Cherry' ]
[ 1, 2, 3, 4 ]

Accessing Array Elements

Each item in an array has an index (starting from 0). You can access elements using square bracket notation.

let fruits = ["Mango", "Peach", "Grapes"];
console.log(fruits[0]);
console.log(fruits[2]);

Mango
Grapes

Modifying Elements

You can change array elements by directly assigning new values to indexes.

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

[ 'Red', 'Yellow', 'Blue' ]

Array Length

The length property returns the total number of elements in the array.

let nums = [10, 20, 30, 40];
console.log(nums.length);

4

Looping Through Arrays

You can use for, for...of, or forEach loops to iterate over arrays.

Using for loop

let items = ["Pen", "Pencil", "Eraser"];
for(let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

Using for...of loop

for (let item of items) {
  console.log(item);
}

Using forEach method

items.forEach(function(item) {
  console.log(item);
});

Pen
Pencil
Eraser

Common Array Methods

push() and pop()

push() adds to the end, pop() removes from the end.

let nums = [1, 2];
nums.push(3);   // [1, 2, 3]
nums.pop();     // [1, 2]

unshift() and shift()

unshift() adds to the start, shift() removes from the start.

let nums = [2, 3];
nums.unshift(1); // [1, 2, 3]
nums.shift();    // [2, 3]

indexOf() and includes()

let items = ["a", "b", "c"];
console.log(items.indexOf("b"));  // 1
console.log(items.includes("d")); // false

slice() and splice()

let arr = [10, 20, 30, 40];
let sliced = arr.slice(1, 3); // [20, 30]
arr.splice(2, 1);             // Removes 30

join() and toString()

let arr = ["x", "y", "z"];
console.log(arr.join("-"));   // "x-y-z"
console.log(arr.toString());  // "x,y,z"

Multidimensional Arrays

Arrays can contain other arrays — useful for matrices, tables, or grouped data.

let matrix = [
  [1, 2],
  [3, 4]
];
console.log(matrix[1][0]);  // 3

Spread Operator in Arrays

The spread operator (...) expands elements of an array.

let a = [1, 2];
let b = [3, 4];
let combined = [...a, ...b];
console.log(combined);

[1, 2, 3, 4]

Destructuring Arrays

Extract values from arrays into variables.

let [x, y] = [10, 20];
console.log(x); // 10
console.log(y); // 20

Array Map, Filter, and Reduce

map()

Transforms each element and returns a new array.

let nums = [1, 2, 3];
let squared = nums.map(n => n * n);
console.log(squared);

[1, 4, 9]

filter()

Filters elements based on condition.

let nums = [5, 10, 15];
let filtered = nums.filter(n => n > 7);
console.log(filtered);

[10, 15]

reduce()

Reduces the array to a single value.

let nums = [1, 2, 3, 4];
let sum = nums.reduce((acc, val) => acc + val, 0);
console.log(sum);

10

Array Sorting

The sort() method sorts strings alphabetically by default. For numbers, a compare function is needed.

let arr = [40, 100, 1, 5];
arr.sort((a, b) => a - b);
console.log(arr);

[1, 5, 40, 100]

Conclusion

Arrays are the heart of JavaScript data structures. Understanding how to declare, access, manipulate, and traverse them lays the groundwork for solving real-world problems — from building dynamic UIs to managing data pipelines. With mastery of arrays, you take a giant leap toward becoming a fluent JavaScript developer.