Skip to content

Instantly share code, notes, and snippets.

@sandrabosk
Last active April 7, 2020 03:16
Show Gist options
  • Save sandrabosk/6397460c6e792d9bb534973f4591e206 to your computer and use it in GitHub Desktop.
Save sandrabosk/6397460c6e792d9bb534973f4591e206 to your computer and use it in GitHub Desktop.

.filter()

  • doesn't mutate the original array
  • returns a new array with only the elements that satisfy conditions (returns a new array of smaller size than original (subarray))

We will be working on the following array:

const numbers = [3, 7, 9, 10, 12];

Let's use .filter() to extract the numbers that are divisible with 3.

const filteredArr = numbers.filter(num => {
  if (num % 3 === 0) return num;
})
// filteredArr: 3,9,12

// and in one line, this would look like:

const filteredArr2 = numbers.filter(num => num % 3 === 0); 
// filteredArr2: 3,9,12

Remember, anything we use the array methods for (map, reduce, filter, ...) can be done using for loop or .forEach() method. Let's see what is under the hood of the .filter() method:

const filtered = [];
for (const num of numbers){
  if (num % 3 === 0) filtered.push(num);
}

console.log(`filtered: ${filtered}`); // filtered: 3,9,12

// in one line:

const filtered2 = [];
numbers.forEach(num => num%3 === 0 ? filtered2.push(num) : null)

console.log(`filtered2: ${filtered2}`); // filtered2: 3,9,12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment