Different between find(), filter() and map() in javascript

author

Aneh Thakur

. 2 min read

Follow

In JavaScript, find(), filter(), and map() are all array methods that can be used to manipulate and transform data stored in arrays.

Here is a brief description of each method:

  1. find(): The find() method returns the first element in an array that satisfies a given condition. It takes a callback function as an argument, which is called for each element in the array until the condition is satisfied. The callback function should return a boolean value indicating whether the element satisfies the condition. If an element is found that satisfies the condition, find() returns the value of that element. If no such element is found, find() returns undefined.
  2. filter(): The filter() method creates a new array with all elements that satisfy a given condition. It takes a callback function as an argument, which is called for each element in the array. The callback function should return a boolean value indicating whether the element should be included in the new array. Elements for which the callback function returns true are included in the new array, while elements for which the callback function returns false are excluded.
  3. map(): The map() method creates a new array with the results of calling a provided function on every element in the array. It takes a callback function as an argument, which is called for each element in the array. The callback function can modify the element and return a new value, which is then added to the new array. The new array will have the same length as the original array, but its elements will have been transformed by the callback function.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Find the first even number
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

// Filter the array to only include even numbers
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// Create a new array with the square of each number
const squaredNumbers = numbers.map(num => num ** 2);
console.log(squaredNumbers); // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]


Array method in javascript?

In JavaScript, an array method is a function that can be applied to an array object to perform a specific task. Array methods are called on arrays and typically modify the array or return a new value or array based on the elements in the original array.

JavaScript provides a number of built-in array methods that allow you to manipulate and transform data stored in arrays. Some of the most commonly used array methods are:

  1. push(): adds one or more elements to the end of an array
  2. pop(): removes the last element from an array
  3. shift(): removes the first element from an array
  4. unshift(): adds one or more elements to the beginning of an array
  5. concat(): combines two or more arrays into a new array
  6. join(): combines all elements of an array into a string
  7. slice(): extracts a portion of an array and returns a new array
  8. splice(): adds or removes elements from an array
  9. sort(): sorts the elements of an array

Here is an example of using some of these array methods:

const numbers = [1, 2, 3, 4, 5];

// Add an element to the end of the array
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

// Remove the last element from the array
numbers.pop();
console.log(numbers); // [1, 2, 3, 4, 5]

// Add an element to the beginning of the array
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5]

// Combine two arrays into a new array
const moreNumbers = [6, 7, 8];
const combinedNumbers = numbers.concat(moreNumbers);
console.log(combinedNumbers); // [0, 1, 2, 3, 4, 5, 6, 7, 8]

// Combine all elements of the array into a string
const numbersString = numbers.join(', ');
console.log(numbersString); // "0, 1, 2, 3, 4, 5"

// Sort the elements of the array
numbers.sort();
console.log(numbers); // [0, 1, 2, 3, 4, 5]


More Stories from Trinitytuts Tech

Monetize react native app with Google Admob

Aneh Thakur.2 min read
Monetize react native app with Google Admob

Deploying React & Node.js App using GitHub Actions CI/CD

Aneh Thakur.5 min read
Deploying React & Node.js App using GitHub Actions CI/CD

What is DevOps?

Aneh Thakur.1 min read
What is DevOps?

All about MongoDB

Aneh Thakur.3 min read
All about MongoDB

What is React context API?

Aneh Thakur.3 min read
What is React context API?