find(), filter(), map() and reduce()

find(), filter(), map() and reduce()

This article contains about commonly used array methods in Javascript.

The find(), filter(), map(), and reduce() methods are powerful tools for working with arrays in JavaScript. They provide concise ways to find specific elements, filter elements based on conditions, transform array elements into new values, and perform calculations on arrays.


find():

  • The find() method is used to retrieve the first element in an array that satisfies a given condition. It returns the value of the first element that matches the condition, or undefined if no element satisfies the condition.

const array = [1, 2, 3, 4, 5];
const foundElement = array.find(element => element > 2);
console.log(foundElement); // Output: 3        


filter():

  • The filter() method creates a new array with all elements that pass a certain condition. It returns an array containing the elements that satisfy the provided condition.

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element % 2 === 0);
console.log(filteredArray); // Output: [2, 4]        


map():

  • The map() method is used to create a new array by performing a specified operation on each element of the original array. It applies a provided function to each element and returns a new array with the results.

const array = [1, 2, 3, 4, 5];
const mappedArray = array.map(element => element * 2);
console.log(mappedArray); // Output: [2, 4, 6, 8, 10]        


reduce():

  • The reduce() method applies a provided function to reduce an array to a single value. It iterates over each element of the array and accumulates a value based on the logic defined in the provided function.

const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, element) => accumulator + element, 0);
console.log(sum); // Output: 15        


These methods are commonly used in JavaScript to perform various operations on arrays.


#javascript #find #filter #map #reduce #js

To view or add a comment, sign in

More articles by Jasberraja P

  • 💡 Breaking the Hidden Cycle of Stress: 10 Everyday Habits That Quietly Drain You

    Stress isn’t always about deadlines or workload — it often builds up from small daily choices that silently affect our…

  • How to Become a Full-Stack Developer: A Practical Roadmap

    In today’s tech-driven world, Full-Stack Developers are in high demand. Companies value engineers who can understand…

    2 Comments
  • AI's Impact: Which Jobs and Tasks Are Being Replaced in Applications?

    In 2025, artificial intelligence (AI) is transforming workplaces by automating repetitive tasks in software tools and…

  • 🚀 VS Code Shortcut Tips to Supercharge Your Productivity

    If you’re a developer, chances are you spend a big chunk of your day inside Visual Studio Code. While it’s already one…

    1 Comment
  • 🚀 Exploring the Power of the HTML <canvas> Element

    The element in HTML is one of the most powerful yet often underutilized tools in web development. It provides a…

  • Naming Conventions

    Naming conventions are guidelines for choosing names for variables, functions, classes, and other elements in your…

    2 Comments
  • CSS Positioning

    SS positioning refers to the technique of controlling the layout and placement of HTML elements on a web page. It…

    3 Comments
  • SCSS (Sass CSS)

    SCSS (Sass CSS) is a superset of CSS that allows for more powerful and flexible stylesheets. SCSS provides additional…

    4 Comments
  • Spring Boot - AWS S3 integration

    Spring Boot is a popular Java-based framework used for building standalone, production-grade applications. It provides…

    6 Comments
  • TypeScript

    Do you know why JavaScript developers are choosing Typescript? Let's have a look into the reasons with details. What is…

Explore content categories