reduce() method in JavaScript

reduce() method in JavaScript

Let's see what MDN has to say: The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise, the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

pretty intense ??.

Actually, this one is quite tricky as compared to map and filter.

for now understand this: Each element of the array passes through the function provided by us in order to give a single value as output.

The best way to understand is through examples. So, let's get the ball rolling:

Example 1: Given an array of numbers, return the sum of all numbers?

const numbersArray = [1, 6, 9, 4];

//we'll understand using normal function:

function sum(accumulator, currentValue){
        return acc+current;
}

const output = numbersArray.reduce(sum);
console.log(output)

Result: 20        

So, what the heck just happened. Don't worry, just listen to me carefully and while doing that refer to the above example.

[Click to continue reading...]

要查看或添加评论,请登录

Rajat Gupta的更多文章

  • pseudo classes in css part 1 (:hover)

    pseudo classes in css part 1 (:hover)

    Note: This is the first part of the series dedicated to the pseudo-classes of CSS. In this part, we'll understand the…

  • useContext in react: everything you need to know

    useContext in react: everything you need to know

    only understand this: Using useContext is not necessary, we use it to avoid prop drilling. Here's how prop drilling…

  • Sibling combinator in css

    Sibling combinator in css

    There may be some confusion as what we are calling sibling. So, let's first get that out of the way.

  • rest parameter in javascript

    rest parameter in javascript

    The rest parameter is introduced in ES6. It allows a function to accept an indefinite number of arguments as an array…

    1 条评论
  • PropTypes in react

    PropTypes in react

    Let's see what reactjs.org has to say: As your app grows, you can catch a lot of bugs with type-checking.

  • What the heck are props in react

    What the heck are props in react

    Although we can make web apps using JavaScript. One of the reasons we are using react over JS is component reusability.

  • JavaScript: single-threaded and synchronous

    JavaScript: single-threaded and synchronous

    A few days ago single threaded and synchronous were just 2 heavy words for me. If this is you right now, don't worry…

    1 条评论
  • filter() method in JavaScript

    filter() method in JavaScript

    Definition by MDN: The filter() method creates a new array with all elements that pass the test implemented by the…

  • map() method in JavaScript

    map() method in JavaScript

    Let's see what MDN has to say: The map() method creates a new array populated with the results of calling a provided…

  • object-fit property in CSS

    object-fit property in CSS

    The object-fit CSS property sets how the content which includes images, videos and other embedded media formats should…

社区洞察

其他会员也浏览了