CODEWITHSUNDEEP
javascript
user8871438
user8871438

Reputation: 19

Why variable is called as a function?

This code snippet was in "Eloquent Javascript". What does line 3 mean and where is the function name? Also, how in line 7, wrap1 is being called as a function despite wrap1 being a variable.

function wrapValue(n) {
  let local = n;
  return () => local;
}
let wrap1 = wrapValue(1);
let wrap2 = wrapValue(2);
console.log(wrap1());
console.log(wrap2());

Upvotes: 0

Views: 89

Answers (4)

axiac
axiac

Reputation: 72226

() => local is an anonymous function that uses the arrow notation. It is a short (but not equivalent) way to write function() { return local; }

The functions are first-class citizens in JavaScript. They are objects and consequently they can be stored in variables, passed as arguments or returned by functions.

The function:

function wrapValue(n) {
    let local = n;
    return () => local;
}

returns another function (the anonymous function () => local explained above).

The statement:

let wrap1 = wrapValue(1);

calls wrapValue() with argument 1 and stores in the wrap1 local variable the function returned by wrapValue().

The statement:

console.log(wrap1());

calls the function stored in the variable wrap1 and prints the value it returns.

We can pretend that wrap1 is the name of the function until we put something else in the wrap1 variable.

Upvotes: 1

user2226755
user2226755

Reputation: 13157

The MDN explain you that : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Your line 3 :

return () => local;

mean :

return function () {
  return local;
}

Upvotes: 1

Ivan
Ivan

Reputation: 40648

wrapValue returns the object () => local which is a function. This is the arrow function syntax (a type of anonymous function). It would be the same if you had:

function wrapValue(n){
    let local = n; 
    return function() { 
       return local;
    }
}

So when calling let wrap1 = wrapValue(1); the function returns the following function:

function() {
  return 1
}

So when calling wrap1() you get 1.

To come back to what you asked:

Also, how in line 7, wrap1 is being called as a function despite wrap1 being a variable.

wrap1 is indeed a variable but as I explained above it's a function. So you can call it with the parenthesis () and it will execute

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

The reason is, the variable is assigned to a function call wrapValue() and that function returns another function.

When you assign the variable to that return function of the function call, then you have to execute the function, which is why you are executing the variable as a function call.

It's a #FunctionCeption.

Let me show you a quick example:

function one() {
  // This function returns another function.
  // Note that this is anonymous function doesn't have a name.
  return function () {
    // This is another function, returned by the first function.
    console.log("I am in the second function.");
  }
}

// Now when you assign this to a function:
var two = one();
// You are getting the value returned by the one function. That's actually a function.

// So now you are executing the two as a function, because it is a function.
two();

In your case, it is a matter of using Private Variables. To make your ES6 JavaScript in a normal JavaScript, let me convert it:

function wrapValue(n) {
  let local = n;
  return function () {
    return local;
  }
}
let wrap1 = wrapValue(1);
let wrap2 = wrapValue(2);
console.log(wrap1());
console.log(wrap2());

The local is set by the parent function. So it is not at all accessible.

Upvotes: 2

Related Questions