In this chapter, we will learn about JavaScript arrays. Arrays are used to store multiple values in a single variable. We will cover:
- Introduction to Arrays
- Creating Arrays
- Accessing Array Elements
- Modifying Array Elements
- Array Properties
- Array Methods
- Adding and Removing Elements
- Iterating Over Arrays
- Searching and Sorting
- Array Transformation
- Other Useful Methods
- Multidimensional Arrays
- Conclusion
Introduction to Arrays
An array is a special variable, which can hold more than one value at a time. Arrays are zero-indexed, meaning the first element has an index of 0, the second element has an index of 1, and so on.
Creating Arrays
There are several ways to create arrays in JavaScript.
Using an Array Literal
let fruits = ["Apple", "Banana", "Mango"]; Using the Array Constructor
let fruits = new Array("Apple", "Banana", "Mango"); Creating an Empty Array
let emptyArray = []; let anotherEmptyArray = new Array(); Accessing Array Elements
You can access array elements using their index.
Example
let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits[0]); // Output: Apple console.log(fruits[1]); // Output: Banana console.log(fruits[2]); // Output: Mango Modifying Array Elements
You can modify array elements by accessing them via their index and assigning new values.
Example
let fruits = ["Apple", "Banana", "Mango"]; fruits[1] = "Orange"; console.log(fruits); // Output: ["Apple", "Orange", "Mango"] Array Properties
length
The length property returns the number of elements in an array.
Example
let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits.length); // Output: 3 Array Methods
JavaScript provides various methods to manipulate arrays.
Adding and Removing Elements
push()
Adds one or more elements to the end of an array and returns the new length.
let fruits = ["Apple", "Banana"]; fruits.push("Mango"); console.log(fruits); // Output: ["Apple", "Banana", "Mango"] pop()
Removes the last element from an array and returns that element.
let fruits = ["Apple", "Banana", "Mango"]; let lastFruit = fruits.pop(); console.log(fruits); // Output: ["Apple", "Banana"] console.log(lastFruit); // Output: Mango unshift()
Adds one or more elements to the beginning of an array and returns the new length.
let fruits = ["Banana", "Mango"]; fruits.unshift("Apple"); console.log(fruits); // Output: ["Apple", "Banana", "Mango"] shift()
Removes the first element from an array and returns that element.
let fruits = ["Apple", "Banana", "Mango"]; let firstFruit = fruits.shift(); console.log(fruits); // Output: ["Banana", "Mango"] console.log(firstFruit); // Output: Apple splice()
Adds and/or removes elements from an array.
let fruits = ["Apple", "Banana", "Mango"]; fruits.splice(1, 1, "Orange"); console.log(fruits); // Output: ["Apple", "Orange", "Mango"] Iterating Over Arrays
for Loop
let fruits = ["Apple", "Banana", "Mango"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } for...of Loop
let fruits = ["Apple", "Banana", "Mango"]; for (let fruit of fruits) { console.log(fruit); } forEach()
Executes a provided function once for each array element.
let fruits = ["Apple", "Banana", "Mango"]; fruits.forEach(fruit => console.log(fruit)); Searching and Sorting
indexOf()
Returns the first index at which a given element can be found.
let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits.indexOf("Banana")); // Output: 1 includes()
Checks if an array includes a certain element.
let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits.includes("Banana")); // Output: true sort()
Sorts the elements of an array.
let fruits = ["Banana", "Apple", "Mango"]; fruits.sort(); console.log(fruits); // Output: ["Apple", "Banana", "Mango"] reverse()
Reverses the order of the elements in an array.
let fruits = ["Apple", "Banana", "Mango"]; fruits.reverse(); console.log(fruits); // Output: ["Mango", "Banana", "Apple"] Array Transformation
map()
Creates a new array with the results of calling a provided function on every element.
let numbers = [1, 2, 3]; let doubled = numbers.map(n => n * 2); console.log(doubled); // Output: [2, 4, 6] filter()
Creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(n => n % 2 === 0); console.log(evenNumbers); // Output: [2, 4] reduce()
Executes a reducer function on each element of the array, resulting in a single output value.
let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // Output: 15 Other Useful Methods
concat()
Merges two or more arrays.
let fruits = ["Apple", "Banana"]; let moreFruits = ["Mango", "Orange"]; let allFruits = fruits.concat(moreFruits); console.log(allFruits); // Output: ["Apple", "Banana", "Mango", "Orange"] join()
Joins all elements of an array into a string.
let fruits = ["Apple", "Banana", "Mango"]; let fruitString = fruits.join(", "); console.log(fruitString); // Output: "Apple, Banana, Mango" slice()
Returns a shallow copy of a portion of an array into a new array object.
let fruits = ["Apple", "Banana", "Mango"]; let citrus = fruits.slice(1, 3); console.log(citrus); // Output: ["Banana", "Mango"] Multidimensional Arrays
Multidimensional arrays are arrays that contain other arrays as their elements.
Example
let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[0][0]); // Output: 1 console.log(matrix[1][2]); // Output: 6 Conclusion
In this chapter, you learned about JavaScript arrays, including how to create arrays, access and modify their elements, use array properties and methods, and work with multidimensional arrays. Understanding arrays is crucial for managing collections of data in JavaScript.