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.
