In JavaScript, arrays are versatile data structures used to store multiple values in a single variable.
Arrays can contain a mix of different data types, including numbers, strings, objects, other arrays, and more.
This tutorial covers the basics of creating and manipulating arrays in JavaScript, including some of the most commonly used array operations.
1. Creating Arrays
Example 1: Creating an Array Using Literal Notation
// Creating an array using literal notation let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
Explanation
fruits is an array containing three elements: ‘Apple', ‘Banana', and ‘Cherry'.
This is the most common way to create an array in JavaScript.
Example 2: Creating an Array Using the Array Constructor
let numbers = new Array(1, 2, 3, 4, 5); console.log(numbers); // Output: [1, 2, 3, 4, 5]
Explanation
new Array(1, 2, 3, 4, 5) creates an array containing the numbers 1 to 5.
However, using the array literal ([]) is generally preferred for simplicity.
2. Accessing Array Elements
Array elements are accessed using index positions, starting from 0.
Example 3: Accessing Elements
let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits[0]); // Output: 'Apple' console.log(fruits[2]); // Output: 'Cherry'
Explanation
fruits[0] accesses the first element (‘Apple').
fruits[2] accesses the third element (‘Cherry').
3. Modifying Array Elements
You can change an element in the array by assigning a new value to a specific index.
Example 4: Modifying Elements
let fruits = ['Apple', 'Banana', 'Cherry']; fruits[1] = 'Blueberry'; console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
Explanation
fruits[1] = ‘Blueberry' changes the second element of the array from ‘Banana' to ‘Blueberry'.
4. Common Array Operations
4.1. Finding the Length of an Array
The .length property returns the number of elements in the array.
let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits.length); // Output: 3
4.2. Adding Elements to an Array
Example 5: Using push() to Add Elements to the End
let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
Explanation
push(‘Cherry') adds ‘Cherry' to the end of the fruits array.
Example 6: Using unshift() to Add Elements to the Beginning
let fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
Explanation
unshift(‘Apple') adds ‘Apple' to the beginning of the fruits array.
4.3. Removing Elements from an Array
Example 7: Using pop() to Remove the Last Element
let fruits = ['Apple', 'Banana', 'Cherry']; let removedFruit = fruits.pop(); console.log(fruits); // Output: ['Apple', 'Banana'] console.log(removedFruit); // Output: 'Cherry'
Explanation
pop() removes and returns the last element of the array (‘Cherry').
Example 8: Using shift() to Remove the First Element
let fruits = ['Apple', 'Banana', 'Cherry']; let removedFruit = fruits.shift(); console.log(fruits); // Output: ['Banana', 'Cherry'] console.log(removedFruit); // Output: 'Apple'
Explanation
shift() removes and returns the first element of the array (‘Apple').
4.4. Finding the Index of an Element
Example 9: Using indexOf() to Find an Element’s Index
let fruits = ['Apple', 'Banana', 'Cherry'];
let index = fruits.indexOf('Banana');
console.log(index); // Output: 1
Explanation
indexOf(‘Banana') returns the index of the first occurrence of ‘Banana', which is 1.
4.5. Removing Elements by Index Using splice()
Example 10: Removing Elements Using splice()
let fruits = ['Apple', 'Banana', 'Cherry']; let removed = fruits.splice(1, 1); // Remove 1 element at index 1 console.log(fruits); // Output: ['Apple', 'Cherry'] console.log(removed); // Output: ['Banana']
Explanation
splice(1, 1) removes 1 element starting from index 1.
The method returns the removed elements as an array.
4.6. Slicing an Array Using slice()
Example 11: Using slice() to Create a Subarray
let fruits = ['Apple', 'Banana', 'Cherry', 'Date']; let slicedFruits = fruits.slice(1, 3); console.log(slicedFruits); // Output: ['Banana', 'Cherry']
Explanation
slice(1, 3) creates a new array containing elements from index 1 to 3 (excluding the element at index 3).
4.7. Concatenating Arrays Using concat()
Example 12: Combining Arrays with concat()
let fruits = ['Apple', 'Banana']; let moreFruits = ['Cherry', 'Date']; let combinedFruits = fruits.concat(moreFruits); console.log(combinedFruits); // Output: ['Apple', 'Banana', 'Cherry', 'Date']
Explanation
concat(moreFruits) combines fruits and moreFruits into a new array.
4.8. Looping Through Arrays
Example 13: Using forEach() to Loop Through an Array
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach((fruit, index) => {
console.log(`${index}: ${fruit}`);
});
Output
0: Apple 1: Banana 2: Cherry
Explanation
forEach() loops through each element in the array, executing the provided function.
5. Multidimensional Arrays (Arrays of Arrays)
Example 14: Creating and Accessing a Multidimensional Array
let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][2]); // Output: 6
Explanation
matrix is a 2D array (array of arrays).
matrix[1][2] accesses the element in the second row and third column (6).
Summary
JavaScript arrays are flexible and provide a variety of methods for adding, removing, and manipulating data.
Here’s a quick overview of some key operations:
Create an Array: Use [] or new Array().
Access Elements: Use array[index].
Modify Elements: Assign a new value using array[index] = value.
Add Elements: Use push(), unshift().
Remove Elements: Use pop(), shift(), splice().
Find Elements: Use indexOf().
Slice Arrays: Use slice() to create subarrays.
Loop Through: Use forEach() to iterate over elements.
Arrays are one of the most fundamental data structures in JavaScript, and mastering these operations is crucial for effective programming. Feel free to experiment with these examples and apply them in your projects!