JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.
In this article, we’ll look at ways to manipulate JavaScript arrays with methods and nested arrays.
Array and Object Confusion
It may be easy to confuse arrays and objects.
Objects may have numerical keys and the length property.
However, they aren’t arrays.
The typeof operator doesn’t help with checking arrays. This is because using typeof on an array will just return 'object' .
To check if something is an array, we can use the Array.isArray method.
Methods
JavaScript arrays have lots of methods.
There’re methods to map items in an array to different values.
Also, we can combine them in different ways.
There are also a few methods that help to search for items.
For instance, we can use the map method to map the items of an array to different values as follows:
const arr = [1, 2, 3];
const mapped = arr.map(x => x ** 3);
Now we return a new array with entries of arr that are cubed.
So we get [1, 8, 27] as the value of arr .
To combine all entries of an array in some way, we can use the reduce or reduceRight methods.
For instance, we can write:
const arr = [1, 2, 3];
const sum = arr.reduce((acc, entry) => acc + entry, 0);
The code above combines the items in arr by adding them together. The intermediate result is assigned to ac and entry is the array entry being incorporated.
0 is the initial value of the combined result.
reduce combines entries from left to right.
To combine values from right to left, we can write:
const arr = [1, 2, 3];
const sum = arr.reduceRight((acc, entry) => acc + entry, 0);
reduceRight starts from the end of arr to the start. So acc starts with 3, then 2 is added to 3 to get 5, 5 is added to 1 to get 6.
The find and findIndex methods get the first instance of an object.
find returns the first instance of something that matches the criteria that we get.
findIndex returns the index of the first instance of something that’s been found.
So we can write:
const arr = [1, 2, 3];
const result = arr.find(x => x === 1);
and result is 1.
or we can use findIndex :
const arr = [1, 2, 3];
const result = arr.findIndex(x => x === 1);
and get that result is 0, which is the index of 1.
The filter method returns an array that has the entries that meet a given condition.
For instance, we can write:
const arr = [1, 2, 3];
const result = arr.filter(x => x % 2 === 1);
Then result is [1, 3] since we specified x % 2 === 1 . The condition that we specified is to return all the odd numbers.
Dimensions
There’re no multidimensional arrays in JavaScript.
However, we can have arrays of arrays.
For instance, we can create an array of arrays by writing:
const arr = [];
arr[0] = [1, 2, 3];
arr[1] = [4, 5, 6];
Now we can loop through them by writing:
const arr = [];
arr[0] = [1, 2, 3];
arr[1] = [4, 5, 6];
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
We looped through the items in the top-level array.
Then in the loop body, we loop through the item of each array.
If we run the loop, we get:
1
2
3
4
5
6
from the console log.
Also, we can use the for-of loop to make this clearer. For instance, we can write:
const arr = [];
arr[0] = [1, 2, 3];
arr[1] = [4, 5, 6];
for (const a of arr) {
for (const b of a) {
console.log(b);
}
}
And we get the same result. We just used the for-of loop to make our iteration code cleaner.
Conclusion
Array methods will make our lives easier. We can call the find and findIndex methods to find items.
map will map array entries from one value to another.
reduce and reduceRight let us combine array entries to a single value.
We can create JavaScript nested arrays and use them as multidimensional arrays.
