How this works? I can't understand this snippet

Question

let unrealFunctionToUnderstand = () => {
    let tryToUnderstandThis = () => 666;
    console.log('I\'m calling once time! :D');
    return tryToUnderstandThis;
}

let hardcoreLesson = unrealFunctionToUnderstand();

console.log(hardcoreLesson());
console.log(hardcoreLesson());

I cant understand this code, my friend send me this...

Answer 1

unrealFunctionToUnderstand is a function. When called it logs "I'm calling once time! :D".

It also returns another function (tryToUnderstandThis) when called.

After defining this function you are (1) calling it unrealFunctionToUnderstand(), then (2) assigning it's returned value (tryToUnderstandThis) to hardcoreLesson. Then you are calling hardcoreLesson (reference to tryToUnderstandThis) twice and logging the result.

So you are calling unrealFunctionToUnderstand once, and it logs "I'm calling once time! :D", then calling tryToUnderstandThis twice, and it logs "666" twice.

Can you notice how I "ran" this code on paper? This is how you answer questions like this yourself. You interpret the code the same way the browser would, on paper. It becomes easier to pinpoint language constructs you don't understand or know yet, so you can first learn / ask about those. Then, if you understand each part, it becomes clear what is executed and why.

Answer 2

everything in javascript is an object, including functions. Which means you can return a function from a function.

That is exactly what unrealFunctionToUnderstand() is - it is a function which returns a function.

So, you call it once:

let hardcoreLesson = unrealFunctionToUnderstand();

Hence the console output only displays once. And you now have a reference to a function which simply returns the value 666.

let tryToUnderstandThis = () => 666;
....
return tryToUnderstandThis;

When you execute that, you get back the response.

Answer 3

If you are familiar with any other programming language like C or Java, then you will be familiar with the following syntax.

function functionName(argument1, argument2, ...) {
    // function body
    // return statement
}

The new version of javascript introduces the arrow operator => to reduce your effort of writing single line functions. This is similar to lamda/inline function used mostly for single line functions.

So if you have a following function

function increment (value) {
  return value + 1;
}

you can replace it with

increment(value) => value + 1

The other answers should help you understand how the function are also objects and how it can be called in different ways.

Some helpful links

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36

Answer 4

hardcoreLesson store the value return by this function unrealFunctionToUnderstand. So unrealFunctionToUnderstand calling only one time.

as hardcoreLesson store the value it's shows 2 times as it's called two time.

Answer 5

this is nothing but closure

let hardcoreLesson = unrealFunctionToUnderstand();

when this line called it will log data "I'm calling once time! :D"

and as you got function returned in hardcoreLesson which you are logging twice that what it is printing 666 on console twice

you could call call function without taking as a variable

console.log(unrealFunctionToUnderstand()());

last two parenthesis will call returned function