Introduction
In JavaScript, a lot of people work with arrays, but most of them use loops to perform operations on the array. This is not the right way to do so and can break the flow if logic goes wrong. Also, it increases the complexity of the logic.
Instead of using loops, we can use the JavaScript Array methods which are map() , filter(), reduce(), find(), every() and some().
map()
map() allows you to perform the same operation on every element of an array. People often use the forEach loop for this purpose instead of map() but that may cause the issues later.
For example...
You can also use map() with an array of objects to return a single value of each object. Refer to the example below:
- let numbers = [2, 3, 4, 5, 6, 7, 8, 9]
-
- let multipliedNumbers = numbers.map((value) => {
- return value * 2
- })
-
filter()
Filter() lets you filter the elements of an array based on the condition imposed. Elements not passing the condition will be discarded from the result.
For example:
- const cars = [{
- model: 'ferrari portofino',
- price: 100000
- }, {
- model: 'maserati quattroporte',
- price: 140000
- }, {
- model: 'ford mustang',
- price: 170000
- }, {
- model: 'lamborghini gallardo',
- price: 200000
- }, {
- model: 'bentley mulsanne',
- price: 210000
- }, {
- model: 'rolls royce phantom',
- price: 260000
- }, {
- model: 'ferrari california',
- price: 320000
- }, ]
-
- const myCars = cars.filter((element) => {
- return element.price > 150000
- })
-
-
-
-
-
-
-
-
reduce()
The reduce method allows you to perform an operation on two adjacent elements of an array and use that result with the next element of an array. People usually avoid using it and they prefer to create their own logic, but reduce can save a lot of their work and makes the function smaller.
Consider the example below:
- let myCars = [{
- model: 'ferrari california',
- price: 100000
- }, {
- model: 'maserati quattroporte',
- price: 140000
- }, {
- model: 'ford mustang',
- price: 170000
- }, {
- model: 'lamborghini aventador',
- price: 200000
- }, {
- model: 'bentley continental',
- price: 210000
- }, {
- model: 'rolls royce ghost',
- price: 260000
- }, {
- model: 'ferrari portifino',
- price: 320000
- }, ]
-
- myCars = myCars.reduce((worth, car) => {
- return worth + car.price
- }, 0)
-
find()
The find method seems similar to filter, but it gives us an object in response, unlike filter. It creates an object based on the condition imposed. If you use find method in an array, it will return the first matching object.
Consider the example below:
- let myCars = [{
- model: 'ferrari portofino',
- price: 100000
- }, {
- model: 'maserati quattroporte',
- price: 140000
- }, {
- model: 'ford mustang',
- price: 170000
- }, {
- model: 'lamborghini gallardo',
- price: 200000
- }, {
- model: 'bentley mulsanne',
- price: 210000
- }, {
- model: 'rolls royce phantom',
- price: 260000
- }, {
- model: 'ferrari california',
- price: 320000
- }, ]
-
- myCars = myCars.find((car) => {
- return car.price > 150000
- })
-
every()
The every method returns a Boolean value based on the condition imposed. It is used to check if all the elements of an array pass the condition or not.
Think of it as AND operator, the response will be true only if all the elements pass the criteria.
For example:
- let myCars = [{
- model: 'ferrari portofino',
- price: 100000
- }, {
- model: 'maserati quattroporte',
- price: 140000
- }, {
- model: 'ford mustang',
- price: 170000
- }, {
- model: 'lamborghini gallardo',
- price: 200000
- }, {
- model: 'bentley mulsanne',
- price: 210000
- }, {
- model: 'rolls royce phantom',
- price: 260000
- }, {
- model: 'ferrari california',
- price: 320000
- }, ]
-
-
-
-
-
-
-
- myCars = myCars.every((car) => {
- return car.price > 150000
- })
-
- myCars = myCars.every((car) => {
- return car.price > 50000
- })
-
some()
The some method also returns a Boolean value just like every, based on the condition imposed. It is used to check if any of the elements of an array passes the condition.
You may think of it as an OR operator, the response will be true if any of the elements pass the criteria.
For example:
- let myCars = [{
- model: 'ferrari portofino',
- price: 100000
- }, {
- model: 'maserati quattroporte',
- price: 140000
- }, {
- model: 'ford mustang',
- price: 170000
- }, {
- model: 'lamborghini gallardo',
- price: 200000
- }, {
- model: 'bentley mulsanne',
- price: 210000
- }, {
- model: 'rolls royce phantom',
- price: 260000
- }, {
- model: 'ferrari california',
- price: 320000
- }, ]
-
-
-
-
-
- myCars = myCars.some((car) => {
- return car.price > 150000
- })
-
Depending upon your requirement, you can use these methods.
In the example below, all the array methods are used on the same set of data.
- const cities = [{
- city: 'Gurgaon',
- population: 99000
- }, {
- city: 'Seattle',
- population: 108000
- }, {
- city: 'London',
- population: 91000
- }, {
- city: 'Milan',
- population: 100000
- }, {
- city: 'Athens',
- population: 120000
- }, {
- city: 'sydney',
- population: 88000
- }, {
- city: 'Toronto',
- population: 55000
- }, {
- city: 'Tokyo',
- population: 92000
- }, {
- city: 'Berlin',
- population: 110000
- }, {
- city: 'Jakarta',
- population: 11000
- }, {
- city: 'Moscow',
- population: 199000
- }, {
- city: 'Zurich',
- population: 65000
- }, ]
-
-
-
-
-
- let mapResult = cities.map((city) => {
- return city.population / 1000
- })
-
-
-
-
-
-
- let filterResult = cities.filter((city) => {
- return city.population > 100000
- })
-
-
-
-
-
-
-
-
-
-
-
-
-
- let findResult = cities.find((city) => {
- return city.population > 100000
- })
-
-
-
-
-
-
- let reduceResult = cities.reduce((population, city) => {
- return population + city.population
- }, 0)
-
-
-
-
-
-
-
- let everyResult = cities.every((city) => {
- return city.population > 50000
- })
-
-
-
-
-
-
-
- let someResult = cities.every((city) => {
- return city.population > 50000
- })
-
For any query or suggestion, you can get in touch with me @ https://twitter.com/nitinmanocha16