-1

As far as I understand, and you can correct me if I'm wrong, when you assign a variable to a function, i.e. create a function expression, the function is not assigned to the variable the same way a primitive value would be. The variable does not hold that function as a container the same way it holds a primitive value, instead, the variable simply makes a reference to that function.

So, if this is correct, I wanna know how does the invocation of a reference actually works. When you do this:

let func = function() {..} 
func()

since func is not a function, but only makes a reference to a function, then how is it being invoked? Are you simply calling on that reference, func, to invoke the function?

If objects, including functions, can only be referenced, then where are they stored?

Unless it answers those specific questions, please don't bother giving me any external reading sources. I've read a lot already, but non of them actually explicitly answer these questions. They're all vague, and do not provide an explicit clear answer.

happy_story
  • 1
  • 1
  • 7
  • 17
  • 2
    Did you read the [specification](//tc39.es/ecma262/)? It’s the opposite of vague. There isn’t much of a distinction; the only time the “reference” aspect matters is when calling a function as a property of an object, e.g. `obj.method();`. Here, the function is invoked with `obj` as its `this` binding (if the function accepts one), because `obj.method` is resolved with the base reference still in place. For `func()` it doesn’t make a difference, and there’s no way to _see_ which references are at play when the function is invoked. – Sebastian Simon Sep 18 '21 at 12:40
  • _“since `func` is not a function, but only makes a reference to a function”_ — I’m not convinced this is an accurate description. A function, in JS, is just an object with an internal [[Call]] property, and objects are accessed and manipulated via their reference. There are Reference Records in JS, but in this case, this is not observable. `func` is the name of the variable binding that refers to that function. But you can definitely say `func` _is_ a function; it’s a function object. And since there’s no way to differentiate this in JS, it’s also a _reference_ to the function. All the same. – Sebastian Simon Sep 18 '21 at 12:47
  • In other words, the spec describes all the semantics of what happens when you write `func()`. I don’t know which vague resources you’ve read, but the spec should be able to answer your question. I’m also not sure what exactly you’re asking, since some of your concepts don’t really seem to match the specification. It’d be more advantageous if you rephrased your question with more familiarity of the spec. – Sebastian Simon Sep 18 '21 at 12:52
  • *"Unless it answers those specific questions"*: a question on Stack Overflow should be a *single* question. – trincot Sep 18 '21 at 12:53
  • @SebastianSimon The spec [is very vague on this topic](https://stackoverflow.com/a/23556036/1048572), and not really a good resource for a first-time learner. – Bergi Sep 18 '21 at 12:54
  • @Bergi Depends on what is being asked here. E.g. the runtime semantics of how a CallExpression gets a ReferenceRecord from evaluating a MemberExpression, and then gets its value using GetValue, etc., is quite detailed. How the function is actually stored in memory may be described in more vague terms. I don’t know which specific aspect this question is asking about. – Sebastian Simon Sep 18 '21 at 13:01
  • @SebastianSimon I think it asks about object references (as compared to primitive values), not property references or identifier references (that are specification types). – Bergi Sep 18 '21 at 13:05
  • 1
    @IloveCoffee Not sure if that is your misconception, but "*You only assign the reference to the [variable], not the value itself.*" is not quite right. The value *is* a reference, and it is stored in the variable like any other value. – Bergi Sep 18 '21 at 13:40
  • 1
    @IloveCoffee "*when you do `m()`, how are you invoking the function?*" - what exactly is the problem you expect with the invocation if you have only a reference to the function? Why would that limit you to run the function code? Asked differently: Do you understand how you are you accessing the property in `m.name` if all you have is a reference to the object? – Bergi Sep 18 '21 at 13:41
  • @Bergi My confusion was that, when you assign a primitive value to a variable, JS makes a copy of that value, and stores it in the variable, so if you pass that variable as a module, and then use it in another module, you will be taking the value from the passed variable in that particular module, but when you instead assign a reference to a function in module1, and then invoke that variable in module5, you are not invoking the function in that module, you are simply calling on the function to be invoked in the module it was declared. This invocation by reference was confusing. – happy_story Sep 18 '21 at 13:53
  • @Bergi when you assign a primitive value to a variable, then pass that variable to a different module, when you then use that variable in the different module, are you again accessing the value from the first module, or are you passing the actual value, and not just a reference to it? – happy_story Sep 18 '21 at 14:00
  • @IloveCoffee What do you mean by module? And what would be the difference between "*invoking the function in that module*" and "*invoking in the module it was declared*", how would you expect them to behave differently? – Bergi Sep 18 '21 at 14:26
  • Well, React components for example, but also just vanilla JS modules. You can define a function in one module, and then export it to another. You can also export variables too. I don't expect them to behave differently, it's not about behaving differently, it's about just understanding the mechanism. It matters because if the function uses variables or values that only exist in that particular module, then obviously that function must be invoked in that module, not in another. More than anything, I just wanted to understand how it works. – happy_story Sep 18 '21 at 15:58
  • When you assign a primitive value to a variable, `let color = 'red'` and then export that variable, and import it from a different module, when you then just log it out `console.log(color)`, where does the value come from? Am I taking the value directly from that variable, or am I a making a reference to the variable from the first module where I defined it? – happy_story Sep 18 '21 at 16:01

1 Answers1

1

The variable does not hold that function as a container the same way it holds a primitive value, instead, the variable simply makes a reference to that function.

Not sure about your terminology of "makes a reference" here. A variable always holds a value. That value might be either a primitive value or a reference value (i.e. an object reference).

If objects, including functions, can only be referenced, then where are they stored?

Simply elsewhere in memory. It gets created by the object literal expression or function expression, and can be referenced one or many times. Objects are garbage-collected automatically in JavaScript.

How does the invocation of a reference actually work? Are you simply calling on that reference, func, to invoke the function?

Yes, you're simply calling on that reference, which will run the code that is part of the function object.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Straight on point, clear and short. Good explanation. That's all I wanted to hear. Thank you. By the way, I'm not a beginner, but that's a okay. I just needed to refresh my memory on some of the fundamentals. I never liked the specs. One always comes out more confused after reading the specs than he was before. I'm relatively new to React, and I got a bit confused about passing references to different components, and how when you invoke a function defined in one component but passed as a reference to different component, how is it invoked. But now I understand. Thanks again. – happy_story Sep 18 '21 at 13:46