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.
Related
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.
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)
Closed 7 years ago.
In the Eloquent Javascript book I came across this code.
I understood how this works and the passing of arguments but what I am unable to understand is author's statement regarding this code that it's a function which can create another function!
My question is: How is it creating a new function? What is happening which the author is calling creation of a new function? I mean sure we are creating a function called greaterThan and it has another function in it but I can't see how greaterThan is creating another function!
I assure you I have read many similar Qs before asking but couldn't find the answer I am looking for. Thank you for your time & help.
function greaterThan(n) {
return function(m) {
return m > n;
};
}
var greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
The function is being created on the sixth line.
var greaterThan10 = greaterThan(10);
This creates a function greaterThan10 which can be used to check if numbers are greater than 10. You can see it used on line 7.
Edit:
When the function greaterThan is called on line 6, it returns the nested function, effectively making
greaterThan10 = function(m){
return m > 10;
};
The author was calling greaterThan10 a 'new function' created by the function greaterThan.
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).
This question already has answers here:
Is JavaScript a pass-by-reference or pass-by-value language?
(33 answers)
Closed 8 years ago.
While some people are saying that this question has been answered before, its only the answer that has been given before to a different question with much more specifics (ie. asking specifically about call-by-reference / call-by-value, whereas this question does not presuppose knowledge of eiither)
The following code appears to be very confusing. We can logically deduce that the reason why z.id updates after the function is because it is an object. But why? What particular trait or characteristic of javascript is doing this?
function changea(a) {
a = 100; // does not change a
} // no return
function changez(z) {
z.id = 100; // does change z
} // no return
var a = 0; // a is zero
changea(a) // a variable
alert('variable a is equal to ' + a); // why does this stay at zero?
var z = {id: 0};
changez(z);
alert('variable z.id is equal to ' + z.id); // why does this change to 100
see the demo here: http://jsfiddle.net/u0pysgjy/7/
In the first case a is passed by value to the changea function and in the second case z is an object and it is passed by reference to the changez function.Whenever a function gets a variable which is passed to it by value, even if you change the value it will not reflect outside of the function which is the case of a. And if a function gets its parameter which is passed to it by reference if you change the value of its property it will be reflected outside of the function also.
There is a nice explanation here