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

people

Aneh Thakur

. 2 min read

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

Aneh Thakur
Aneh Thakur.3 min read

Get Started with TypeScript: A Beginner's Guide with Code Samples

TypeScript is a popular, powerful programming language that is a superset of JavaScript. If you're new to TypeScript, this beginner's guide is the perfect place to start. With clear explanations and code samples, you'll learn the basics of TypeScript and

.
Get Started with TypeScript: A Beginner's Guide with Code Samples
Aneh Thakur
Aneh Thakur.2 min read

TypeScript vs TSX: Understanding the Differences

This article delves into the key differences between TypeScript and TSX, two programming languages used for developing complex web applications. From syntax and static typing to React integration and code organization, learn which language is best suited

.
TypeScript vs TSX: Understanding the Differences
Aneh Thakur
Aneh Thakur.2 min read

Learn about the different types of React hooks with code examples

React hooks are a powerful feature that allow you to use state and other React features inside functional components. In this tutorial, you will learn about the different types of hooks available in React, and see code examples of how to use them in your

.
Learn about the different types of React hooks with code examples
Aneh Thakur
Aneh Thakur.2 min read

A step-by-step guide to deploying a ReactJS app online

Learn how to deploy your ReactJS app to the internet with this comprehensive tutorial. From setting up a hosting platform to building and uploading your code, we'll cover all the steps you need to take to get your app live. Whether you're a beginner or an

.
A step-by-step guide to deploying a ReactJS app online
Aneh Thakur
Aneh Thakur.3 min read

What is React context API?

React Context is a way to share values that are considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. It allows you to avoid prop drilling, or the passing of props through multiple levels

.
What is React context API?
Built on Koows