I thought it would be fun to do a back-to-basics kind of post on the JavaScript language and base it on my second most popular blog post of all time Parameter passing in C#.
In other words this post will present some JavaScript brain teasers around parameter passing and visually illustrate the solutions.
In other words this post will present some JavaScript brain teasers around parameter passing and visually illustrate the solutions.
Since JavaScript doesn't have the ref or out keywords like C# we'll just be looking at:
- Primitive Values
- Reference Values
- Strings (Immutable Values)
- Passing Primitives
- Passing References
Primitive Values
Starting simple, what's the result of the following, and why?
Let's take it line by line. On the first line we declare a variable i and assign it the value 5. 5 is a value of type 'number', and number is a one of a handful of primitive types including undefined, null, boolean, and string.
On the second line we declare a new variable j and assign it the value held by the variable i. If we think of variables as small containers (boxes) that can only contain primitives or references, then we can picture the first two lines of code like this:
var i = 5;
var j = i;
j = 10;
alert(i);Let's take it line by line. On the first line we declare a variable i and assign it the value 5. 5 is a value of type 'number', and number is a one of a handful of primitive types including undefined, null, boolean, and string.
On the second line we declare a new variable j and assign it the value held by the variable i. If we think of variables as small containers (boxes) that can only contain primitives or references, then we can picture the first two lines of code like this:
If JavaScript were pass by reference then j might contain a pointer to i. But because JavaScript is pass by value for primitives the second line copies the value in i into the box for j (copying is illustrated with the blue line).
Consequently when we assign j the value 10, it doesn't affect what's in the box for i.
Thus the answer to alert(i) is 5.
Reference Values
So what is the result of the following, and why?
var i = { a: 5 };
var j = i;
i.a = 10;
alert(j.a);In this example we declare a variable i and assign an object to it. Consequently i contains a reference value. Reference values are essentially pointers to objects (which are in turn aggregations of properties). In a language like C# they'd be like a pointer on the stack to an object on the heap (although technically JavaScript doesn't have a stack or a heap).
So on line two we then instantiate a variable j and assign to it the value that's in i. Illustrating the pointer as an arrow we end up with this:
If JavaScript were pure pass by value then j might have contained a complete copy of the object. But JavaScript, like Java, Python, Ruby, and C# is technically call by sharing, which means that for reference values we treat the pointer as pass by value, and thus the object it points to as pass by reference.
Consequently when we assign anything to j.a we follow the pointer to the shared object, and get this:
And that's why alert(j.a) returns 10.
Strings (Immutable Values)
How about this:
In C# strings are immutable reference types. In JavaScript, however, they're just primitive values, which are all immutable. So it's kind of a trick question and this turns out to be identical to our first example.
Thus alert(s1) is simply 'hello'.
var s1 = 'hello';
var s2 = s1;
s2 = 'world';
alert(s1);In C# strings are immutable reference types. In JavaScript, however, they're just primitive values, which are all immutable. So it's kind of a trick question and this turns out to be identical to our first example.
Thus alert(s1) is simply 'hello'.
Passing Primitive Values
Let's expand what we've learned about primitives to functions:
If you guessed that this is almost identical to our first example you're absolutely right. Illustrating it roughly how the interpreter would see it would result in this:
Thus alert(i) is 5.
function Change(j) {
j = 10;
}
var i = 5;
Change(i);
alert(i);If you guessed that this is almost identical to our first example you're absolutely right. Illustrating it roughly how the interpreter would see it would result in this:
Thus alert(i) is 5.
Passing Reference Values
Finally we can explore how reference values get passed with something like this:
function Change(j) {
j.a = 10;
}
var i = { a: 5 };
Change(i);
alert(i.a);If you're thinking this is nearly identical to our second example, you're right. Illustrating it roughly how the interpreter would see it would result in this:
Thus alert(i.a) gets us 10.
Double Bonus Points
You're tied up in double overtime with one second left on the clock:
function Change(j) {
j = { a: 10 };
}
var i = { a: 5 };
Change(i);
alert(i.a);
Go ahead, hit F12 .... nothing but net! ... and the crowd goes wild!
Hope you had fun reading this and hopefully learned something new. Please post in the comments or hit me up on twitter if something doesn't look right.
Hope you had fun reading this and hopefully learned something new. Please post in the comments or hit me up on twitter if something doesn't look right.
Comments