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...

Answers bellow are fine. I'll just add, that its probably arrow function that confuse you? This syntax:`unrealFunctionToUnderstand = () => {...}` is same as `function unrealFunctionToUnderstand() {...}` — Ludovit Mydla, Apr 08 '19 at 13:08
Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) or [Functions that return a function](https://stackoverflow.com/questions/7629891) — adiga, Apr 08 '19 at 13:09

score 2 · Answer 1 · answered Apr 08 '19 at 13:05

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.

score 1 · Answer 2 · answered Apr 08 '19 at 13:06

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.

AshTyson · Answer 3 · 2019-04-08T13:25:31.843

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

The phrase "functional programming language" generally means a functional programming language, not simply a language that has functions (or methods depending on your point of view). C is *definitely* not an FP language, Java isn't really either although the latest iterations are vaguely functional. — Dave Newton, Apr 08 '19 at 13:19

score 0 · Answer 4 · answered Apr 08 '19 at 13:13

0

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.

answered Apr 08 '19 at 13:13

Obaidul Kader

217
1
7

How this works? I can't understand this snippet

4 Answers4