Today I observed the following syntax (simplified example):
const test = fn => () => console.log(fn)
test('foo')();Having a hard time wrapping my head around this but it still remains vague to me. What exactly happens step by step?
asked Feb 14, 2018 at 19:54
Willem van der Veen
37.1k19 gold badges208 silver badges178 bronze badges
3 Answers
Let's rewrite this in a way which maybe more understandable for you
const test = function(fn){
return function (){
console.log(fn);
}
}
test('foo')();Do you understand it now? If yes this is same as your example just uses normal function instead of arrow functions.
You also need to know what a closure is to understand this.
Comments
As the answers already mentioned you are creating a closure.
In my answer, I want to say what it is a closure good for:
Imagin you want to greet three persons and two of them are your frinds and one is your boss. You want to greet your frinds with "Hi" but your boss with "Hello".
const greet = greetingWord => name =>
`${greetingWord}, ${name}`
const greetFrind = greet('Hi')
const greetBoss = greet('Hello')
We create a function greet which takes one arguement an will return a new function with one argument too (greet = greetingWord => name). Once we implement it we can define a greeter for our frinds and for the boss.
const greet = greetingWord => name =>
`${greetingWord}, ${name}`
const greetFrind = greet('Hi')
const greetBoss = greet('Hello')
console.log(greetFrind('Paul'))
console.log(greetFrind('Julia'))
console.log(greetBoss('Mr. Paker'))Comments
So this is basic concept of closure in JavaScript. If you rewrite the code in ES5:
var test = function(fn){
return function(){
console.log(fn);
};
}
test('foo')();
So the inner function has access to the argument that was passed into the outer function. So that's why you are getting "foo"
testwithfunction?test('foo')part of the expression?testreferences an arrow function that when called returns another arrow function.'foo'is being passed in as an argument totestwhich only has one parameter namedfnand that is probably not the best name for a variable holding a string and could be contributing to your confusion.