JavaScript: The Battle of Anonymity - Anonymous Functions vs Helper

I'm currently grappling with a piece of functional style code that is featured in the book Eloquent Javascript:

Here's the issue I'm facing: When I have the count() function passing an anonymous function to reduce(), everything seems to work perfectly. However, once I try breaking out the function into a helper function (countHelper()), I encounter a reference error.

If anyone could shed some light on why count() works smoothly while countHelper() throws an error, I would greatly appreciate it!

var numbers = [1,2,3,0,1,2,3,0]

function forEach(array, action) {
  for (var i = 0; i < array.length; i++)
    action(array[i]);
}

function reduce(combine, base, array) {
  forEach(array, function (element) {
    base = combine(base, element);
  });
  return base;
}

function equals(x) {
  return function(element) { return x === element;};
}

function count(test, array) {  
  return reduce(function(base, element) {
    return base + (test(element)?1:0);
  }, 0, array);
}

function countHelper(test, array) {
  function helper(base, element) {
    return base + (test(element)?1:0);
  }
  return reduce(helper(base, element), 0, array);
}

function countZeroes(array) {
  return count(equals(0), array);
}

print(countZeroes(numbers)) // 2

function countZeroesHelper(array) {
  return countHelper(equals(0), array);
}

print(countZeroesHelper(numbers)) // ReferenceError: base is not defined

Answer №1

When using countHelper(), ensure that you are passing a reference to the helper function rather than calling it immediately and passing its return value to reduce(). Here is the corrected code:

function countHelper(test, array) {
  function helper(base, element) {
    return base + (test(element)?1:0);
  }
  return reduce(helper, 0, array);
}

Remember not to include parentheses when passing a function as an argument, as this will execute the function instead of just passing a reference to it.

Making this distinction is crucial in Javascript, where any type can be passed as an argument. Even experienced programmers can fall into this trap, so understanding the difference between executing a function and passing a reference to it is essential.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript in Internet Explorer 11, you can open multiple tabs without the UrlReferrer being null

I have tried numerous solutions to open multiple tabs in IE 11, but none of them seem to work for me. In Chrome, everything works smoothly with a simple window.open(url) command. When I try to open tabs using an iterative JavaScript code snippet, only one ...

Design a CreateJS/EaselJS website, comprised of multiple web pages, that is not focused on gaming

I have developed an existing HTML5 Canvas webpage composed of multiple pages, buttons, and hotspots using pure canvas javascript code. The reason I refer to 'buttons' and 'hotspots' in quotes is because I created them from scratch in j ...

Tips for contacting the giveaway host after the giveaway has finished

I am currently utilizing the Discord Giveaways module. I am interested in learning how to send a direct message to the host of the giveaway once it has ended. I haven't quite figured out how to do that yet. Here is what I have gathered so far: manag ...

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

Sharing data from AJAX calls in Vue using vue-resource

After using Vue resource, I'm attempting to create an AJAX call that is based on the data received from a prior AJAX call. I have successfully bound the data fetched from /me to the userDetails prop. However, when trying to pass userDetails.id into t ...

The jQuery AJAX function appears to be unresponsive and failing to execute

I have a form that needs to update values on click of a radio button. Unfortunately, my jQuery skills are lacking. Here's what I have tried so far: HTML: <form> <input type="radio" checked="true" id="q1r1" name="q1" value="Awesome"> ...

Using RTK Query to store data in a Firebase Realtime Database

Currently, I am facing an issue while trying to retrieve data from a Firebase Realtime Database using RTK Query. The code in this section is throwing an error because the return value is incorrect. If anyone has experience with this particular issue, I wou ...

What could be causing my PrimeReact dropdown component to ignore the custom class styles?

Within my Project, I am utilizing multiple Prime React dropdown components and I am aiming to customize one of them with a unique style. In my CSS, I have established global styles to overwrite the default settings for all the dropdowns. However, when tryi ...

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

I am attempting to create dynamically generated text inputs that only allow for digits and an optional decimal point. I have added the required attribute but the inputs are not responding to the RegEx pattern. var howMuch = $("<input>").attr("type", ...

Checking the content of a textfield in React Material UI based on the user input

Hello! I am seeking a solution to trigger an error message whenever the value entered in the first text field is not equal to "28.71", otherwise display a correct message. Here is my current code: class Main extends React.PureComponent { render() { ...

What is the process for uploading or hosting a Reactjs website?

Currently, I am in the process of developing a React web application project using create-react-app. The project is nearly complete and as part of my preparation, I have been researching how to obtain a hostname. During my research, I came across https://w ...

Retrieve JSON data from Form Submission

While I am not a front end developer, I have been trying my hand at it recently. I hope that the community here can assist me with an issue I am facing. I have a form that is supposed to send files to a server-side API like shown below: <form id="uploa ...

Can all date fields with identical dates be updated simultaneously?

Is it feasible for a user to modify the date in one input and have that change reflected in all other inputs with the same 'initial' attribute? I've made an attempt at it, but haven't quite cracked the code on how to achieve this... ...

Renewed Promises: Exploring Promises in Angular JS

Revised with HTTP and initial code inspired by requests/Refer to the end of the post: Lately, I have been seeking help from the amazing SO community as I navigate through my AngularJS learning journey. I used to be a traditional C programmer but recently ...

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

Output information to the specified divID using Response.Write

Currently, I have knowledge of javascript and I am currently expanding my skills in ASP.NET C#. My goal is to achieve the following task using javascript: document.getElementById('divID-1').innerHTML= '<p>Wrong Password< ...

Loading indicator displayed at the top of a div using JavaScript/jQuery

My current challenge involves implementing a progress bar, similar to the pace.js progress bar. The issue arises when the browser is refreshed, as the pace.js progress bar loads on top of the body instead of within a specified div. It is important that the ...

Problem with email verification process

Hey there, I'm currently working on validating an email address using regular expressions. Here is the code snippet I'm using: <input type="text" name="email" id="email"/> var email = $("input#email"), re = /^[A-Za-z ...

Tips for properly formatting functional Vue components?

Below is a functional component that functions as intended. <template functional> <div> <input /> </div> </template> <script> export default { name: "FunctionalComponent" } </script> <styl ...

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...