Arrays are a fundamental data structure in JavaScript that can store multiple values in a single variable. They were introduced in ECMAScript 1 and have since become a popular tool for developers.
One of the key benefits of arrays is their ability to store multiple values of the same data type. For example, an array can store multiple strings, numbers, or even other arrays. The values in an array are called elements and are accessed by their index, which is a zero-based integer that represents their position in the array. For example, the first element in an array has an index of 0, the second element has an index of 1, and so on.
Creating an array in JavaScript is very simple. We can use the square brackets notation [] or the Array constructor new Array(). For instance, the code below generates an array of ages:
const ages = [12, 15, 18, 24, 42];
Or
const ages = new Array(12, 15, 18, 24, 42);
Iterating over an Array
Iterating over an array in JavaScript is a common task that allows you to perform a specific action on each element of the array. There are several ways to iterate over an array in JavaScript, but the most commonly used methods are for-loop, forEach, and for-of-loop.
i. for-loop🔁
The for-loop is the traditional way to iterate over an array. It enables you to define the loop's beginning and ending criteria.
const ages = [12, 15, 18, 24, 42];
for (let i = 0; i < ages.length; i++) {
console.log(ages[i]);
}
This code will log the ages 12, 15, 18, 24, and 42 to the console.
ii. forEach🔄️
The forEach method is a more modern and concise way to iterate over an array. The forEach method takes a callback function as an argument, which will be executed for each element in the array.
const ages = [12, 15, 18, 24, 42];
ages.forEach(function(age) {
console.log(age);
});
This code will log the ages 12, 15, 18, 24, and 42 to the console.
iii. for-of-loop
for-of loop: The for-of loop🔃 is another modern way to iterate over an array. It allows you to iterate over the elements of an array without having to access them by index.
const ages = [12, 15, 18, 24, 42];
for (let number of ages) {
console.log(number);
}
Functions of Array🔣
JavaScript arrays come with a set of built-in methods that can be used to perform various operations on the array. These methods are functions that can be called on an array object to manipulate the elements or extract information from the array. Here are a few of the array functions that are most frequently used:
i. push()⬇️
The push function extends an array by adding a new element.
let fruits = ["apple", "banana", "orange"];
fruits.push("pear");
console.log(fruits); // ["apple", "banana", "orange", "pear"]
ii. pop()⬆️
This method removes the last element of an array.
let fruits = ["apple", "banana", "orange"];
fruits.pop();
console.log(fruits); // ["apple", "banana"]
iii. unshift()⬅️
An element is added to the beginning of an array with the unshift method.
let fruits = ["apple", "banana", "orange"];
fruits.unshift("kiwi");
console.log(fruits); // ["kiwi", "apple", "banana", "orange"]
iv. shift()➡️
The array's initial element is eliminated via the shift technique.
let fruits = ["apple", "banana", "orange"];
fruits.shift();
console.log(fruits); // ["banana", "orange"]
v. splice()
This method allows you to add and remove elements at any position in the array. The method takes three arguments: the index where to start, the number of elements to remove, and the elements to add.
let fruits = ["apple", "banana", "orange"];
fruits.splice(1, 1, "kiwi", "pear");
console.log(fruits); // ["apple", "kiwi", "pear", "orange"]
vi. indexOf()
This method returns the index of the first occurrence of a specified value in an array, if the value is not found it returns -1.
let fruits = ["apple", "banana", "orange"];
console.log(fruits.indexOf("banana")); // 1
vii. sort()
An array's items are sorted using the sort function in ascending order.
const ages = [42, 18, 24, 15, 12];
numbers.sort();
console.log(numbers); // [12, 15, 18, 24, 42]
viii. reverse()
The array's items' order is reversed with the help of the reverse function.
const ages = [12, 15, 18, 24, 42];
numbers.reverse(); // 42, 24, 18, 15, 12
ix. map()
This method creates a new array with the result of calling a provided function on every element in the calling array. The map method takes a callback function as an argument, which will be executed for each element in the array.
const ages = [12, 15, 18, 24, 42];
let doubleAges = ages.map(function(number) {
return number * 2;
});
console.log(doubleAges); // [ 24, 30, 36, 48, 84 ]
x. filter()
A new array is created using the filter method that contains all of the elements that pass the test run by the supplied function. The filter method takes a callback function as an argument, which will be executed for each element in the array. The callback function should return a boolean value, indicating whether the element should be included in the new array or not.
const ages = [12, 15, 18, 24, 42];
let evenAges = ages.filter(function(number) {
return number % 2 === 0;
});
console.log(evenAges); // [12, 18, 24, 42]
xi. reduce()
This method applies a function to each element in the array, to reduce the array to a single value. An initial value and a callback function are the two inputs that the reduce() method requires. Two parameters are passed to the callback function: a current value and an accumulator. The accumulator is the value that gets accumulated with each iteration, and the current value is the current element of the array.
const ages = [12, 15, 18, 24, 42];
let sum = ages.reduce(function(acc, curr) {
return acc + curr;
}, 0);
console.log(sum); // 111
In this example, the callback function takes the accumulator and the current value adds them together and assigns the result to the accumulator. This process repeats until the last element of the array, the accumulator will hold the final sum value.
reduce() method can also be used to perform various other operations such as finding the maximum or minimum value in an array, counting the occurrences of an element in an array and many more.
In conclusion, arrays are a fundamental data structure in JavaScript that can store multiple values in a single variable. They can be created using the square brackets notation [] or the Array constructor new Array(). Iterating over an array is a common task that allows you to perform a specific action on each element of the array, and there are several ways to do this including for-loop, forEach, and for-of-loop.
JavaScript arrays come with a set of built-in methods that can be used to perform various operations on the array such as push, pop, unshift, shift, splice, indexOf, and many more. These methods are functions that can be called on an array object to manipulate the elements or extract information from the array. Understanding and utilizing these array methods is essential for any developer working with arrays in JavaScript.