Callback functions in JavaScript

JavaScript
1

Having some issues with CallBack functions. Almost done with the first course for javascript and I was doing the examples in the array section. The countoccurences and getmax examples. I have no issue with writing the code in long format and having it work just fine but when he goes over the notation using the shorthand or callback methods I cant seem to keep up.

function countOccurrences(array, searchElement) {

let count = 0;
    for (let items of array) 
    if (items === searchElement)
    count++;
    return count;

}

works great understand with no issue

this is where I get lost…

function countOccurrences(array, searchElement) {
return array.reduce((accumulator, current) => {
const occurrence = (current === searchElement) ? 1 : 0;
console.log(accumulator, current, searchElement);
return accumulator + occurrence;
}, 0 );
}

is there someplace where I can get some practice with the breakdown and understanding of the conversion from one code block to the next. Thanks

2

I really like the site Codewars. They don’t give you a breakdown on how to solve the problems, but what ends up happening is you keep plugging away until you get the correct answer, and then you get to see how everyone else did it. Chances are you’ll see a solution that was similar to what you did, but maybe just a bit closer to what you were aiming for. So then you try the same problem again, but with that new approach. It’s great practice.

As for callbacks and the reduce method in particular, yep it can be a lot to get your head around. With your first example, the imperative approach, at least you can point your finger at the code and say “okay I’m at this spot and this is what is happening, and next I go to…” and then you move your finger to the next thing that happens. You can’t do that as easily or sometimes at all with the declarative approach. For example, the filter method for finding items that are greater than 2:

array.filter(item => item > 2);

There’s no following along there! Just a bunch of magic behind the scenes. You’ve given a callback but who knows how it’s being used. But, over time, the declarative approach can actually become easier to read than the imperative approach. You can more quickly see what the code is doing despite not knowing exactly how it is done.

As for understanding the conversion from an imperative approach to array.reduce, that’s a good question, and I don’t know that I have a good answer. However, I think there’s a bit too much going on in the countOccurrences exercise. I’d start even simpler, like a function that gets the sum of the numbers in an array. First you’d try the imperative approach:

function sum(array) {
  let total = 0;
  for (let item of array) {
    total = total + item;
  }
  return total;
}

Then you could try replacing the names of the variables with the names that you would see in the reduce function:

function sum(array) {
  let accumulator = 0;
  for (let current of array) {
    accumulator = accumulator + current;
  }
  return accumulator;
}

And then you’d try the reduce version:

function sum(array) {
  return array.reduce((accumulator, current) => {
    return accumulator + current;
  }, 0);
}

And maybe that middle step can help connect the concepts from the two approaches.

1 Like
3

I appreciate the step approach. I think I have a balanced understanding for the long form but I know this is not how it will be done in real applications and I need to learn that. Thanks again for your help.

4

first, you need to understand reduce method and function, in js, function can be passed as arguments.
reduce method takes two parameters, callback function as its first parameter and initalizer as the second.

This callback function takes two parameter, (accumalator which is the sum) and currentValue which is the element value of the array in the current loop

The 0 at the end is the initial value of accumalator which is the second parameter of reduce method.

I am not sure which part of the code you don’t understanding, but you will need to understand what callback function and reduce method. If you are looking for a place to practice, use algoexpert or leedcode, they are moe like algorithm exercises but that is what really helps you understand the logic of the code.

1 Like