Arrays allow you to store and manage multiple values in a single variable, making them essential for handling collections of data. They are dynamic, meaning their size and content can change as needed and they offer a wide range of methods to manipulate and interact with their elements.
What Are Arrays in JavaScript?
An array is a special type of object in JavaScript designed to hold a collection of values. These values can be of any data type, including numbers, strings, objects and even other arrays.
Key Features of Arrays
- Indexed: Elements in an array are indexed, starting from
0. - Dynamic: You can add, remove, or modify elements.
- Heterogeneous: Arrays can contain values of different data types.
Example:
// Example of a JavaScript array
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits.length); // Output: 3
Creating Arrays in JavaScript
You can create arrays in two primary ways:
1. Using Square Brackets (Recommended)
let numbers = [10, 20, 30, 40];
console.log(numbers); // Output: [10, 20, 30, 40]
2. Using the Array Constructor
let numbers = new Array(10, 20, 30, 40);
console.log(numbers); // Output: [10, 20, 30, 40]
Array Properties
1. length
The length property returns the number of elements in an array.
let animals = ["Dog", "Cat", "Elephant"];
console.log(animals.length); // Output: 3
2. Indexing
Array elements are accessed using their index, starting from 0.
let colors = ["Red", "Green", "Blue"];
console.log(colors[1]); // Output: Green
Array Methods
JavaScript provides powerful methods to manipulate arrays. Here are the most commonly used methods:
1. push()
Adds an element to the end of the array.
let fruits = ["Apple", "Banana"];
fruits.push("Cherry");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
2. pop()
Removes the last element from the array.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
3. shift()
Removes the first element from the array.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.shift();
console.log(fruits); // Output: ["Banana", "Cherry"]
4. unshift()
Adds an element to the beginning of the array.
let fruits = ["Banana", "Cherry"];
fruits.unshift("Apple");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
5. splice()
Adds or removes elements at a specified index.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Mango"); // Replace Banana with Mango
console.log(fruits); // Output: ["Apple", "Mango", "Cherry"]
6. slice()
Returns a portion of the array without modifying the original.
let fruits = ["Apple", "Banana", "Cherry", "Mango"];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // Output: ["Banana", "Cherry"]
7. concat()
Merges two or more arrays.
let fruits = ["Apple", "Banana"];
let vegetables = ["Carrot", "Potato"];
let food = fruits.concat(vegetables);
console.log(food); // Output: ["Apple", "Banana", "Carrot", "Potato"]
8. forEach()
Executes a function for each element in the array.
let numbers = [1, 2, 3];
numbers.forEach((num) => {
console.log(num * 2); // Output: 2, 4, 6
});
Looping Through Arrays
You can use loops to iterate through arrays.
1. Using for Loop
let fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output: Apple, Banana, Cherry
2. Using for…of Loop
let fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
console.log(fruit);
}
// Output: Apple, Banana, Cherry
3. Using forEach Method
let fruits = ["Apple", "Banana", "Cherry"];
fruits.forEach((fruit) => console.log(fruit));
// Output: Apple, Banana, Cherry
Multidimensional Arrays
Arrays can contain other arrays, creating a multidimensional structure.
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // Output: 6
Common Use Cases of Arrays
- Storing Lists
let shoppingList = ["Milk", "Eggs", "Bread"];
- Managing Data
let studentScores = [95, 85, 90];
- Creating Tables
let table = [
["Name", "Age", "Grade"],
["Alice", 20, "A"],
["Bob", 22, "B"]
];