Javascript Call By Reference

Question

I have a quick question regarding some code I do not understand:

var anonymousGreet = function(){
 console.log('Hi');
}
function log(a){
 console.log(a);
}
log(anonymousGreet);

In the code above when I call the function log and pass in the function expression anonymousGreet as a parameter to log. Does that mean the variable "a" in log is pointing to the variable anonymous greet which is then pointing to the function object. Or does a point directly to the function object pointed to by anonymousGreet? I am a little confused if a first points to the variable anonymous greet or does it directly point to the function object pointed to by anonymousGreet. Sorry if this is confusing but any help would be appreciated! Thanks you!

Answer 1

If you come from a C++ background then a simple rationalization is

• In Javascript everything is passed by value, references are never used
• All passed values are however pointers to objects

For example when you write:

a = b + c;

you should imagine (in C++) something along the lines of

Object *a, *b, *c;
a = new Number(b->numericValue() + c->numericValue());

(note that however Javascript differently from C++ provides a garbage collector so no explicit delete is ever needed).

This is of course just a simple description of what is the observable behavior (and it was may be the implementation of very first Javascript engines). Today what really happens behind the scenes is much more sophisticated and includes run-time generation of machine code (JIT).

This is the reason for which for example:

function foo(x) {
 x[0] = 1;
}
var a = [0];
foo(a); // Will change the content of a[0]

but

function bar(x) {
 x = 9;
}
var b = 0;
bar(b); // Will *NOT* change the content of b

• Northern Star: This definitely cleared things up. I do come from a C++ and C background haha... but now things are more clear! Thank you!
• Northern Star: Thank you so much for this detailed answer! I have one more quick question: let's say we have two variables: var greet = 'Hi' and var greet = 'Hola' (I purposely made the variable names the same). First greet points to the primitive 'Hi' and then it points to the primitive 'Hola'. When the pointer of the greet variable gets updated to point to 'Hola' does the previous pointer that was pointing to 'Hi' get deallocated or does the value of the original pointer simply just get changed to point to 'Hola'?
• 6502: @NorthernStar: You can have many pointers (variables) that are pointing to the same object, deallocation will happen when last pointer is reassigned to something else. Note that Javascript doesn't provide "destructors" or "weak pointers" so you cannot be informed of when an object will be deallocated. Moreover strings in Javascript are immutable and for immutable values there is no way to know if two pointers are referencing the same object or not (for example there is no way to know the address of an object or something like Python id(x), you can only access the value).
• Northern Star: Ok! That makes sense now! Thanks for all the help.

Answer 2

Yes, if you check a===anonymousGreet, the result is true. All primitive values are passed by value, but objects are passed by reference in Javascript.

var anonymousGreet = function(){
 console.log('Hi');
}
function log(a){
 console.log(a === anonymousGreet); //true
 console.log(a);
}
log(anonymousGreet);

• Northern Star: ahh ok that makes sense! Thank you so much!

Answer 3

As a matter of terminology, and to avoid confusion, I would avoid the use of the word "pointer". It's too easy to get confused when using the word "pointer". Sometimes "A pointing to B" can mean that A is a kind of alias for B. Or that B can be modified through A. Or A can point to B which points to C; what does that mean?

IMO it is clearer to use the terminology that in JavaScript a variable holds a value. That's it. It holds a value. It does not point to anything, it does not refer to anything, it holds a value.

However, two variables may hold the same value, such as an empty array []:

var a = [];
var b = a;

Both a and b hold the same value, a particular empty array. We can see that they hold the same value by checking a === b. Since they hold the same value, that value can be manipulated through either one; a.push(1) and b.push(1) do exactly the same thing, because they are both manipulating the value held in common by each. Re-assigning to a merely changes the value that a holds; it does not and cannot affect b, and vice versa. b is not a "pointer" to a, or an alias to a; it is a variable which happens to hold the same value as a.

In other words, a = b does not make a "point" to b. Nor does it copy the value of b and assign it to a. It gives a the value of b, so that a and b now hold the identical value.

The function parameter passing mechanism can be thought of as a particular type of assignment. It makes the formal parameter in the function definition assume, or hold, the value of a parameter specified in the call. When I define a function

function foo(x) { console.log(x); }

and then call it

var y = 42;
foo(y);

the variable/parameter x is assigned the value of the parameter passed in the function call. In other words, x comes to hold the value of y. x does not "point" to y, and it is not a copy of y. It holds the same value as y, which in this case is 42.

Let's take your specific example:

var anonymousGreet = function(){
 console.log('Hi');
}
function log(a){
 console.log(a);
}
log(anonymousGreet);

In this case, anonymousGreet is a variable which, by virtue of the assignment, holds as its value a particular anonymous function. When you call log(anonymousGreet), the parameter a to the log function is set to hold the value of the parameter in the call, so it now holds the value of anonymousGreet. It does not "point" to the variable anonymousGreet, and any changes to it cannot affect the value of anonymousGreet, nor of course the function which that value represents.

Does that mean the variable a in log is pointing to the variable anonymousGreet which is then pointing to the function object?

No, it means that the variable/parameter a in log holds the value held by anonymousGreet, which is the anonymous function.

Or does a point directly to the function object pointed to by anonymousGreet?

Yes, but not "point to the thing pointed to by", but rather, "holds the value of anonymousGreet, which holds as its value the anonymous function.

• Northern Star: Hello @torazaburo, thank you so much for your detailed answer. I am still a little bit confused since I thought that primitives in JS are passed by value and objects are passed by reference. So technically when I pass anonymousGreet to the log function, the parameter, "a", in the log function would simply hold the same value of anonymousGreet (which is the anonymous function)? But if I do a.someProperty = 'Hello' that mutated the original function object that the variable anonymousGreet was holding correct?