JavaScript Arrays
Arrays in JavaScript are used to store multiple values in a single variable. They allow you to work with collections of data, which can be accessed by their index and modified with various array methods.
1. Declaring an Array
Arrays can be declared using the Array constructor or the array literal syntax. The latter is more commonly used.
Syntax (Array Literal):
let fruits = ["Apple", "Banana", "Orange"];
Syntax (Array Constructor):
let fruits = new Array("Apple", "Banana", "Orange");
Both methods create an array that holds the values "Apple", "Banana", and "Orange". The array's elements are zero-indexed, meaning the first item has an index of 0.
2. Accessing Array Elements
You can access an array element by using its index number within square brackets [ ].
Example:
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana
In the above example, fruits[0] returns "Apple" because array indices start at 0.
3. Modifying Array Elements
To change an element in an array, simply assign a new value to the specific index.
Example:
let fruits = ["Apple", "Banana", "Orange"];
fruits[1] = "Strawberry"; // Modify the second element
console.log(fruits); // Output: ["Apple", "Strawberry", "Orange"]
Here, the second element ("Banana") is replaced by "Strawberry".
4. Array Methods
JavaScript provides a variety of methods for manipulating arrays. Some of the most common methods include:
4.1. push() - Add an item to the end of an array
let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // Output: ["Apple", "Banana", "Orange"]
4.2. pop() - Remove the last item from an array
let fruits = ["Apple", "Banana", "Orange"];
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
4.3. shift() - Remove the first item from an array
let fruits = ["Apple", "Banana", "Orange"];
fruits.shift();
console.log(fruits); // Output: ["Banana", "Orange"]
4.4. unshift() - Add an item to the beginning of an array
let fruits = ["Banana", "Orange"];
fruits.unshift("Apple");
console.log(fruits); // Output: ["Apple", "Banana", "Orange"]
4.5. splice() - Add or remove items from a specific index
let fruits = ["Apple", "Banana", "Orange"];
fruits.splice(1, 1, "Strawberry", "Grapes"); // Start at index 1, remove 1 element, add 2 elements
console.log(fruits); // Output: ["Apple", "Strawberry", "Grapes", "Orange"]
5. Looping through Arrays
You can loop through an array using the for loop or other methods like forEach() for more concise code.
Example of using a for loop:
let fruits = ["Apple", "Banana", "Orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output:
// Apple
// Banana
// Orange
Example of using forEach:
let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// Output:
// Apple
// Banana
// Orange
6. Array Properties
Arrays in JavaScript have some useful properties, such as length, which returns the number of elements in the array.
Example:
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length); // Output: 3
The length property returns the number of items in the array, which in this case is 3.
7. Multidimensional Arrays
JavaScript arrays can also contain other arrays, which allows you to create multidimensional arrays (also known as arrays of arrays).
Example:
let multiArray = [
["Apple", "Banana", "Orange"],
["Carrot", "Potato", "Cucumber"]
];
console.log(multiArray[0][1]); // Output: Banana
8. Conclusion
JavaScript arrays are one of the most essential data structures, allowing you to store and manipulate collections of data. Understanding arrays and their methods will help you work with data more efficiently and write clean, scalable code.