JavaScript filter array: The Complete Guide

0
42

JavaScript filter() is a valuable function to remove an unnecessary element from an array. The filter() function removes 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 use like React, Angular, or Vue or even Serverside JS like Node.js, this Pure function is beneficial. I have called the 

Javascript filter array

To filter an array in JavaScript, use the array.filter() function. The array.filter() is a built-in JavaScript pure function that creates a new array filled with elements that pass a test provided by a function.

The array.filter() function is a pure function because it does not modify the existing array; instead, it creates a new array and then returns that newly created array with the filtered values.

Let’s see 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 Node.js, 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;
});

Parameters

The item argument references 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.

How to filter an array of objects in JavaScript

To filter an array of objects in JavaScript, use the array.filter() method. It is a typical use case of the .filter() method 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 is how you can filter the array of objects using its properties.

Array.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 the 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 is 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.

That’s it for this tutorial.

Related posts

JavaScript array unique

JavaScript array find

JavaScript array contains

JavaScript array reduce

JavaScript pure methods

Leave A Reply

Please enter your comment!
Please enter your name here

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