ES6 - Use Arrow Functions to Write Concise Anonymous Functions

[Jackelope]

Hello i am unclear about something regarding this code

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

namely wether the variable const myFunc is being assigned as ‘value’
or if it is being assigned as the function that returns ‘value’
and wether the difference has any tangible effects.

[bbsmooth]

@Jackelope

wether the variable const myFunc is being assigned as ‘value’

Yes, the variable myVar is being assigned the value “value”.

This would be no different than if you wrote the function like this:

function myFunc() {
  const myVar = "value";
  return myVar;
}

UPDATE: Oh, my bad, you were asking about myFunc, not myVar. For whatever reason I read that wrong. Sorry about that.

[bbsmooth]

@Jackelope

it is being assigned as the function that returns ‘value’

Now that I have read your question correctly

Yes, the variable myFunc is being assigned a function. That function executes the two statements in the body. So when you invoke myFunc() then you are executing that function which returns the value of myVar.

@Jackelope

wether the difference has any tangible effects

Yes, there is a big difference. If myFunc were just assigned “value” then you could use it by just invoking its name, since it would just be a variable that holds a string, for example:

console.log("The value of myFunc is " + myFunc);

This would print “The value of myFunc is value”.

But since myFunc actually holds a function, then if you want to get the value returned by the function then you must invoke myFunc as a function:

console.log("The value of myFunc is " + myFunc());

If you leave off those parens then console.log is going to print out the actual function code (at least it does with my version of node):

The value of myFunc is () => {
  const myVar = "value";
  return myVar;
}

[Jackelope]

Hey thanks for the explanation i understand now that a function is being invoked when you use the variable name, which is of course very different since you could create any kind of function to fit into a variable.
thanks for that big distinction there.

however since the actual function in this case takes no params and just creates a const myVar =‘value’;
return myVar ;

this would be functionally the same as let myFunc=‘value’ right?
or does the fact that its being done through a function give some sort of manouverability when using other code?

[bbsmooth]

@Jackelope

this would be functionally the same as let myFunc=‘value’ right?

No, only myFunc() produces the value “value”. The variable myFunc holds a function, so it is equal to a function, not the string “value”. If you console.log myFunc you will not see “value” you will instead see the code for the function.

myFunc = 'value'

is not the same as

myFunc = function that returns 'value'

I understand how it can seem that way, but this is a very important distinction to make. Functions get thrown around a lot in JS. It is not uncommon to create functions that return functions. Or to pass functions as arguments into functions. Functions are considered to be “first class citizens” in JS, which means they can be treated like any other variable. The thing to remember is that you don’t get a return value from a function until you invoke it. So if a function is assigned to a variable then the value of the variable is the function itself, and if you want to get a return value from the function then you need to use the parens after the variable name to invoke the function.