Issues with closures in JavaScript

Struggling to grasp closure with 3 levels of scopes.

https://jsfiddle.net/Ar2zee/wLy8rkyL/1/

How can I retrieve the value of parameter "g" within the level3 function?

var a = 10;

function level1(b) {
  var c = 1;

  function level2(f) {
    var d = 2;

    function level3(g) {
      return a + b + c + d + f + g;
    }
    return level3()
  }
  return level2;
}
var temp = level1(10);
var temp2 = temp(10);
var temp3 = temp2(10);
console.log(temp3(10)); // or level(10)(); without using a variable

Appreciate any insights!

Answer №1

When Line:1 calls the level1 function, it receives back the level2 function stored as temp.
Line:2 then calls the temp function, which retrieves the level3 function stored as temp2.
Line:3 finally, invoking temp2 executes the level3 function and returns the result of an addition operation.

This means that temp3 is not a function but a value.

var a = 10;

function level1(b) {
  var c = 1;

  function level2(f) {
    var d = 2;

    function level3(g) {
      return a + b + c + d + f + g;
    }
    return level3;
  }
  return level2;
}
var temp = level1(10);
var temp2 = temp(10);
var temp3 = temp2(10);
console.log(temp3); // or level(10)();  without variable

Answer №2

Instead of swapping out

Exchange level3()

Substitute it for

Swap in level3

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

Reload a jquery pop up upon closing a pop up window

I have a modal pop up that appears after clicking an ASP button : <div class="form-group"> <asp:Button ID="btnBrand" runat="server" Text="Add brand" CssClass="btn btn-info" OnClick="btnAdd_Click" /> </div> Code Behind : protected ...

What is the best way to safely distribute the same npm package with multiple contributors?

Imagine a collaborative open source project with multiple contributors working on it. As the project progresses, these contributors need to publish their work to the NPM registry. But how can this be done securely when multiple people are involved? The ow ...

Tips for opening a variety of links in new tabs with unique popup buttons

Currently, I am facing a challenge where I need to use a button to trigger an ajax HTML popup and also navigate to a link simultaneously. The issue is that there are multiple buttons on the page, each needing to open different links. Any assistance would b ...

Utilize the variable's identifier, not its assigned data

What? I'm looking to reference a variable's name rather than its value. For example, in the scenario below, I want the function to return my_list[1], not B. my_list = ['A', 'B'] def example(list_element): print(repr(eval(l ...

Next.js API route is showing an error stating that the body exceeds the 1mb limit

I'm having trouble using FormData on Next.js to upload an image to the server as I keep getting this error. I've tried various solutions but haven't been able to resolve it yet. This is my code: const changeValue = (e) => { if (e.target ...

What is the process for sending data to a database using a URL?

I am in need of developing a public API for my application that will be capable of receiving a single POST request. The main goal is to provide users with the ability to submit data directly to my database without having to manually interact with forms on ...

Navigate to the next page in Angular ui-grid when the down key is pressed on the last row of the grid

Is there a way to navigate to the next page if the down key is pressed in the last row of the grid? const gridScope = angular.element(document.getElementById("MainWrap")).scope(); gridScope.gridApi.pagination.nextPage(); What is the best method to detect ...

Restore original scale ratio to 1:1 following zoom

I am looking for a way to revert the image back to its original zoom level when a button is clicked using the onclick() event. I require the specific code for the onclick() event function. This is the div element in my HTML: div id="zoom"> ...

Trigger the script upon clicking the Save button within the AdminBro Edit page

AdminBro's documentation mentions that they provide predefined actions Edit (record action) - update records in a resource They also offer a hook called after. I created a function and assigned it to MyResource.edit.after. However, the issue is tha ...

Maintain dropdown menu visibility while navigating

I'm having an issue with my dropdown menu. It keeps sliding up when I try to navigate under the sub menu. I've spent all day trying to fix it, testing out various examples from the internet but so far, no luck. Any help would be greatly apprecia ...

Transform the words in a string into an array

I'm scratching my head trying to find a solution on Stack Overflow, but nothing seems like the right fit. Can anyone provide some guidance? I need a regex that will enable me to use JavaScript split to break a string into an array. The test case is: ...

Is it possible for the Vue computed function to use destructuring assignment for the parameter even when no arguments are provided?

new Vue({ el: "#app", data: { value: "text", }, computed:{ all: function({value}){ return value } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> ...

Concealing the nearest object

I am currently working on using jquery to hide certain content on a website's index page. Within the fiddle, there is commented out code which I have been experimenting with - however, it hides all content divs if any toggle link is clicked. HTML & ...

CreatePortalLink directs users to a payment URL instead of a dashboard

I am currently working on a project that utilizes the Stripe payments extension in conjunction with Firebase. The application is built using Next JS. After a user subscribes, I want to provide them with a tab where they can manage their subscription. The ...

Verify if the user is currently inputting text within a specific range of characters within

I am dealing with a specific issue involving a textarea. By default, this textarea contains a string of any type, but a user is only able to type inside opening and closing brackets. For example, "Leave[]" allows typing within the brackets but not outsid ...

Removing a database record with JQuery

I have implemented a PHP function that converts any 2D PHP array into an HTML table. Within the table, I want to include a delete button in each row. When the user clicks on the delete button, I need jQuery to extract specific fields (3 fields) and submit ...

Using AngularJS to Bind HTML Safely: Understanding ngBindHtml and 'unsafe' HTML

I am facing an issue with displaying HTML content containing inline styling in my view. The code I currently have is: <div ng-repeat="snippet in snippets"> <div ng-bind-html="snippet.content"></div> </div> Unfortunately, all of ...

calling object functions using additional parentheses

After reviewing the passport.js documentation, I came across this piece of code: app.get('/login', function(req, res, next) { passport.authenticate('local', function(err, user, info) { if (err) { return next(err); } if (!u ...

Implementing a password toggle feature on a form that extends Django's default Authentication Form

Incorporating a password toggle feature has become quite the challenge as I extend Django's AuthenticationForm to create my UserLoginForm. Attempting to implement this feature has proven difficult, especially since I have been unable to make use of th ...

Guaranteeing the sequential execution of JavaScript functions

For weeks, I've been struggling with a program that utilizes ajax post methods and dataTables. It has become clear to me that my understanding of how javascript operates is lacking. Below is the javascript code: $('#SaveTimeSheet').click(fu ...