This question already has answers here:
How do JavaScript closures work?
(86 answers)
Higher-order functions in Javascript
(5 answers)
Closed 8 months ago.
In the code below, can someone please explain how did add5(2) get interpreted as passing an argument 2 to y argument of the inner function?
var count = 0;
function makeAdder(x) {
return function inner(y) {
return x + y;
};
}
var add5 = makeAdder(5);
count += add5(2);
makeAdder is what is known as a 'higher order function' - essentially a function that returns a function. Higher order functions are also functions that accept functions as parameters, so any function that takes or returns another function is a higher order function.
In this case, its returning the function named inner, although the functions can also be anonymous.
Because inner is defined in the scope of makeAdder, the value of x is captured by inner, so that it can be used later when inner is actually called.
The return value from makeAdder is assigned to add5, so add5 is now a variable holding a reference to the inner function. By adding the call operator (()) to add5 you are calling the function assigned to add5, so inner is now called with 2 as the value of y, and x is the value captured in the call to makeAdder, so 5. 5 + 2 = 7.
Related
This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 3 years ago.
I'm confused as to why the below will output "1".
If I use var to declare a in myFunc that should limit the scope of a to that function.
Calling "a" in the anonymous function (in the setInterval call) is a different function so why is that considered with the scope of myFunc?
Is it only because the function is anonymous? I would expect a to be available to another function unless bind() was used.
myFunc = function(){
var a = 1;
var int = setInterval(function () {
console.log(a);
}, 5);
}
The function bound to setInterval is a closure, when something is unknown in its own scope, it looks in the outer scope, in your case myFunc scope
This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 4 years ago.
In the following code, shouldn't x be considered a global variable? Thus, when it gets to the console.log line x it should have the value of "World". However, when I run this code it logs "Hello undefined". `
let x = "World";
function sayHello(x) {
console.log("Hello ", x);
}
sayHello();
But when I change the parameter to y, it then works as I expected, logging "Hello World.
let x = "World";
function sayHello(y) {
console.log("Hello ", x);
}
sayHello();
Can someone explain what is going on here?
thanks
The x parameter in sayHello(x) shadows the global let x = "World";. If you pass a value in, sayHello("Hello"), you would get an output, Hello.
Try calling sayHello(‘Stack Overflow’). I’m sure you can guess whet the result will be.
The function is expecting x to be the first argument passed to the function. If no argument is passed, the argument x is undefined.
The technical term for what happened here is shadowing. The argument named x shadows the variable named x, even if no value is passed for the argument.
This question already has answers here:
How do JavaScript closures work?
(86 answers)
How is a closure different from a callback?
(9 answers)
Closed 5 years ago.
From every definition I have looked up, closure is when a function is created or declared from within another function. Examples are plentiful across blogs and websites of this happening. But what about when the function is declared outside of another function, but called then called from within a function? For example:
const add = (x,y) => {
return x + y;
};
const double = num => {
return add(num,num)
};
let a = double(6);/*?*/
Does add(num, num) create closure? If so, please help me understand why.
Closures are a product of lexical scope.
A closure is the combination of a function and the lexical environment
within which that function was declared.
You must define a function within another one to create a closure.
What you do in your example is simply call a function that calls another and uses its return value. At no point can the double function access the scope of the add function: their scopes are distinct.
Here is a classical example of JavaScript closure
var makeAdder = function(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
In both cases, the functions returned by makeAdder, "remember" the outer scope in which the were created (the scope created by the makeAdder function).
Anything that was in scope of the outer function was also in scope for the inner function, and it remains so when the inner function is returned.
This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 5 years ago.
From this documentation on closures:
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
I can't understand how in makeAdder(5) the parameter is received as x, but in add5(2) it is y.
I would expect it to say y is undefined both times. Can anyone explain how it works the way it does?
When you call makeAdder() it returns a function (not a value). Therefore to use it, you would have something like
makeAdder(4)(5)
This would add 4 to 5 and return 9. Again, makeAdder() here returns another function, which is why I called an argument after it ((5)).
If you would like to read further, this is a concept in JavaScript which is called currying. It is a functional programming technique.
When calling add5 = makeAdder(5); essentially what is happening is:
add5 = function(y){
return 5 + y;
}
At this point add5(y) will give you y + 5.
As you've noticed from your comment you can use makeAdder(x)(y), this essentially does the same thing, it boils down to:
(function(y){return x + y})(y);
makeAdder takes a parameter x, and returns a function that can see x (google: "closure") and also takes its own parameter, y.
This question already has answers here:
Why JavaScript function declaration (and expression)?
(5 answers)
Closed 7 years ago.
can anybody tell me whats the difference between this two examples:
//difference with this:
var x = function withName(a,b,c) {} //why i should declare a name here?
//and this
var y = function (a,b,c) {}
According to the ECMA specification, a function can be written either through declaration or through expression,
Declaration is writing function as below,
function withName(a,b,c) {
}
With declaration, it is required to write an identifier which in this case is withName
Both the example that you have given are of function expression where it is not required to write the identifier i.e. withName as you can still call this function with the variable x or y
var x = function withName(a,b,c) {}
var y = function (a,b,c) {}
However, the only difference here is that if you don't specify the identifier you are creating a anonymous funtion.
You can see this link for detailed explanation.
On this particular case, there is no difference. But in general, the fact that the function assigned to a variable has a name, makes it possible to invoke the function from inside the same function (recursion).