AppDividend
Latest Code Tutorials

Filter Array Method in Javascript

312

Get real time updates directly on you device, subscribe now.

Filter Array Method in Javascript is today’s leading topic.  Filter functionality is handy when we need to filter out values from an Array. In CRUD operation, this function is beneficial to remove an element from an array. Generally, we remove an element with the help of an index of that element. The filter() creates a new array with elements that fall under given criteria from an existing array. No matter, what JS frameworks you are using like React, Angular, or Vue.js or even Serverside JS like Node.js, this Pure function is beneficial. I have called the Filter() function as a Pure Function because it does not modify the existing array instead it creates a new array and then return that newly created array with the filtered values.

Filter Array Method in Javascript

Let us take an example to understand the filter() method.

// server.js

let numbers = [1, 3, 7, 8, 10];

let even = numbers.filter(function(number) {
  return number % 2 == 0;
});

console.log(even);

If you have installed the Node.js, then you can see the output by typing the following command.

 

Filter Array Method in Javascript

#Syntax

The filter() function syntax is following.

let newArray = array.filter(function(item) {
  return condition;
});

The item argument is the reference to the current element in the array as the filter() checks it against the condition. This is useful for accessing properties, in the case of objects.

If the current item passes the condition, it gets sent to the new array.

#Filtering an array of objects

A typical use case of .filter() is with an array of objects through their properties.

// server.js

let products = [
	{ name: 'Windows', company: 'Microsoft' },
	{ name: 'Mac', company: 'Apple' },
	{ name: 'Xbox', company: 'Microsoft' },
	{ name: 'IPhone', company: 'Apple' }
];

let digitalGoods =  products.filter(function(product) {
	return product.company == 'Microsoft';
});

console.log(digitalGoods);

So that us is how you can filter the array of objects using its properties.

#Filter Method Using ECMAScript

You can use the arrow function like the following.

// server.js

let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

let result = words.filter(word => word.length > 6);

console.log(result);

The filter() method calls a provided callback function once for each element in the array and constructs a whole new array of all the values for which callback returns a value that coerces to true.

The callback is invoked with three arguments:

  1. The value of the element.
  2. The index of the element.
  3. The Array object being traversed.

Note: The filter() method does not execute the function for array elements if there are not any values.

Note: The filter() method does not change the original array.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.