10 Tips and Tricks to Work Fast With Array in JavaScript
Wanna speed up your works with arrays in JavaScript to save time? Check out these 10 Tips & Tricks which will literally speed up your coding.
JavaScripts comes with some amazing methods to play with the array. Let’s explore them…
1) map()
What you usually do when you have to iterate through every item in an array? Most probably you run for loop in that array. But there is a method built-in with JavaScript which is called map(). Here is an example of it.
let numbers = [18, 21, 32, 49, 5, 6, 7, 8];
const mapResult = numbers.map(number => number * 2);
console.log(mapResult)// Expected output
// [36, 42, 64, 98,10, 12, 14, 16]
The map method takes an argument which is every element of an array. Then it does some operations with that element and returns a new array.
2) filter()
The filter method is used when you have to filter some elements from an array if they pass the test implemented by the provided function. It is helpful when you have a large array and want to filter some items of the same category. Let’s see how it works…
const names = ['Tom', 'Cruise', 'Ema', 'Watson'];
const result = names.filter(name => name.length < 6);
console.log(result)// Expected output
// [ 'Tom', 'Ema' ]
In this case, the filter function is filtering the names which lengths are less than 6. That’s why we got Tom and Ema.
3) find()
Let’s say, you want to find a specific item from an array. Now you can go through the whole array and see if the item is there or not. But what if the array is populated with 1000 items? Here find method comes in the picture. Let's see how it works…
let numbers = [18, 21, 32, 49, 5, 6, 7, 8];const found = numbers.find(number => number < 10)console.log(found);//Expected Result: 5
In this case, this find method is iterating through all the items in the array and checking if the item is less than 10.
NOTE: find() will return only one item
4) indexOf()
Let’s imagine you want to know the index number of an item inside an array. You can manually find it. But as programmers are lazy, JavaScript gives us a method called indexOf() to find the index of an item inside an array. Let’s see how it works…
const fruits = ['apple', 'banana', 'mango'];console.log(fruits.indexOf('banana'))// Expected Output: 1
5) join()
Now let’s think of a situation where you have to join every element of an array with a special character (or any character). JavaScript has a cool method called join() to join all the items of an array with some special characters. Here is an example…
const fruits = ['lemon', 'orange', 'strawberry'];console.log(fruits.join('+'));// Expected Output: lemon+orange+strawberry
Here the join function is iterating through each element of fruits array and joining them with a plus (+).
6) pop()
Now imagine you want to remove the last item of an array. What will you do? Don’t worry. JavaScript has a method called pop(). This method will pop up the last method. Here is an example…
const animals = ['tiger', 'lion', 'tiger', 'penguin']animals.pop()console.log(animals)//Expected Output: [ 'tiger', 'lion', 'tiger' ]
7) push()
Last time removed the last item from an array. Now, what if you want to add an item to an array? Again, JavaScript has a method called push(). This method will push an element to an array. Here is an example…
const animals = ['tiger', 'lion', 'tiger', 'penguin']animals.push('cheetah')console.log(animals)//Expected Output: ['tiger', 'lion', 'tiger', 'penguin', 'cheetah']
8) shift()
In the last two cases, we removed and added an item at the last position of an array. Now, what if you want to remove the first element of an array? Here shift() method comes into the picture. Let’s see an example…
const fruits = ['apple', 'banana', 'mango'];fruits.shift()console.log(fruits)//Expected Output: [ 'banana', 'mango' ]
9) unshift()
Now we have learnt how to remove the first item from an array. Let’s learn how to add an item in the first position of an array. To add an item at the first position of an array, we use the unshift method(). Here is an example…
const animals = [ 'tiger', 'lion', 'tiger', 'cheetah' ]animals.unshift('cow')console.log(animals)//Expected Output: [ 'cow', 'tiger', 'lion', 'tiger', 'cheetah' ]
10) reverse()
Let’s say you want to reverse the items of an array. It means the first item will be the last and the last item will be the first. The second last item will be the second item and the second item will be the second last item and so on. In this case, we use the reverse() method. Here is an example…
const fruits = [ 'apple', 'banana', 'mango' ]fruits.reverse()console.log(fruits)//Expected Output: [ 'mango', 'banana', 'apple' ]
