Arrays
Arrays are one of the most used data types in JS, and luckily we have a very good set of methods to make any array operation a walk in the park.
1. find()
Finding if a particular value exists in a given array is one of the most basic operations we will have to perform on an array in almost every case. The find method is a very short and sleek method that does this for you in JS, avoiding the need to write loops on your own every time you want to find something.
const numbers = [1, 2, 3, 4, 10];
numbers.find( x => x === 4 ); // returns 4
numbers.find( x => x > 5 ); // returns 10
const itemPresent = numbers.find( x => x === 4 );
return itemPresent ? true : false;
This is very useful in conditional statements where want to proceed only if the value is present. Line 8 in the above code snippet statement will return true if 4 exists in the array, and false otherwise. Short and simple! And you can perform the same operation on an array of objects as well.
const people = [
{ name: 'test1', id: 1 , email: '[email protected]'},
{ name: 'test2', id: 2 , email: '[email protected]' },
{ name: 'test3', id: 3 , email: '[email protected]'},
{ name: 'test4', id: 4 , email: '[email protected]'}
];
const person2 = people.find( person => person.id === 2 );
console.log(person2); // { name: "test2", id: 2, email: "[email protected]"}
2. findIndex()
It does what it says, gives you the index value if the value is present in the array and -1 if it’s not present.
const numbers = [1, 2, 3, 4, 10];
numbers.findIndex( x => x === 4 ); // returns 3
numbers.find( x => x === 15); // returns -1
Note: find and findIndex() methods will return the first element or its position that satisfies the given test function or expression.
3. filter()
It gives you a new array, with all the values from the given array that satisfy the given condition or test.
const numbers = [1, 2, 3, 4, 10];
const evenNumbers = numbers.filter( x => x % 2 === 0 );
console.log(evenNumbers); // returns [2, 4, 10]
4. includes()
The include method simply returns true or false after checking whether the given array contains the provided element or not.
const cars = ['BMW', 'Toyota', 'Tesla', 'Audi'];
console.log(cars.includes('Toyota')); // true
console.log(cars.includes('mercedes')); // false
5. Spread operator
The spread operator is a utility operator that be used for multiple purposes, like copying an array or concatenating two arrays.
const cars = ['BMW', 'Toyota', 'Tesla', 'Audi'];
let newCarsArray = [...cars];
console.log(newCarsArray);
// ['BMW', 'Toyota', 'Tesla', 'Audi']
const array1 = [1,2,3];
const array2 = [4,5];
const array3 = [...arr1,...arr2];
console.log(array3);
// [ 1, 2, 3, 4, 5 ]
6. Map
The JavaScript map method takes an array(Array 1) and creates a new array(Array 2) by calling a function on each element in the given array(Array 1). To explain this further, we will use an example to see what the map method accomplishes.
Let us use our regular for-loop to show that the map function does. A classic example is if we want an array of the square of all elements in a given array, we could do this using a for-loop as seen in the example below:
let newArray = array.map((currentValue, index, array) => {
// return element to new Array
});
- newArray - the array that is returned
- array - the array on which the map method is called
- currentValue - the value being processed
- index - the index of the current value being processed
7. Reduce
The array reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator.
array.reduce( function(total, currentValue, currentIndex, arr), initialValue)
const data = [5, 10, 15, 20, 25];
const res = data.reduce((total,currentValue) => { return total + currentValue; });
console.log(res); // 75
- In this example, the reduce() method accepts two parameters, the total and the current value.
- The reduce() method cycles through each value in the array much like it would in the for-loop.
- In this specific example, we want to add a current value to the total values.
- The calculation is repeated for each value in an array, but each time a current value changes to the next value in the array, moving right.
- When there are no more values left in the array, reduce() method returns the total value.