re: 10 JavaScript concepts you need to know for interviews VIEW POST

VIEW FULL DISCUSSION

(Note: the original author has clarified the wording on this point since I wrote this. My note here applies to the original wording.)

Great stuff, especially the note about hoisting and higher-order functions. But, your note about pass-by-reference is incorrect. It's important to differentiate what is passed from how it's passed. Yes, JavaScript passes references, but it passes them by value.

For example, if JavaScript passed object references by reference, this would log { x: 'bar' }:

var o = { p: 'foo' };
(function(n) { 
    n = { x: 'bar' };  // Sets the value of n. Value of o unaffected.
})(o);
console.log(o); // Emits { p: 'foo' }

However, because JavaScript passes all arguments by value, it emits something like { p: 'foo' }. Changing the value of n inside the function doesn't change the value of o outside the function.

It's a common point of confusion in object-oriented languages, since this code appears at first glance to be very similar to the code above:


var o = { p: 'foo' };
(function(o) { 
    o.p = 'bar';  // Sets the value of o.p. 
})(o);
console.log(o); // Emits { p: 'bar' }

Note that in this example, we're changing a property of o, rather than o itself. Since o is a reference to an object, changes to its properties do affect those properties outside the scope of the function.

This is a really solid list-- nearly every point here has come up on every JavaScript-related interview I've done, and if you've got these nailed, you're well on your way to getting the gig.

Cheers!

Interesting distinction, and thanks for clearing that up!

I was curious what would happen if you did something like this

    var o = { p: 'foo' };
    (function(o) {
        o = { x: 'bar' };
    })(o)
    console.log(o);

This is weird at first glance to me because while, yes, you're passing in o to the closure, when you set o to {x: 'bar'}, which o are you talking about; is it the o outside the function?

This becomes a bit more of a scoping issue. But the solution is that the o inside the function is still a separate variable from the o outside the function, because it was "declared" separately as an argument (function(o)). So the final output is still { p: 'foo' }

If you change it to this:

    var o = { p: 'foo' };
    (function(z) { //note now we've declared 'z', and there's no 'o' in the inner function
        o = { x: 'bar' }; //because there's no 'o' inside here, we use the 'o' defined in line 1
    })(o)
    console.log(o);

o gets changed! Because it was never redeclared inside the function. So the final output here is: { x: 'bar' }

This has nothing to do with pass-by-reference issue! it's about scoping

JavaScript passes functions by reference! So when you pass 'o', you are not passing the value { p: 'foo' }... you are passing its memory location which is named 'o' for readability. 'n' is a local variable inside your function that points to whatever value/reference you are passing to your function. n will refer to the same object o refers to. When you say n = { p: 'bar'}, n is now pointing to a "newly" created object that happens to have the same property 'p' as that of the one you passed to the function.

Wait, I am not sure that is correct. In this case you are you are reassigning the value of the variable n locally but that is just overwriting your reference inside the function. You are actually passing a reference, because you can do:
var o = { p: 'foo' };
(function(n) {
n.p: 'bar'; // Sets the value of n.p, Value of o affected.
})(o);
console.log(o); // Emits { p: 'bar' }

You are passing a reference, but you are not passing by reference.

If you were passing by reference, the variable inside the function would refer to the variable outside of the function.

See this PHP example.

<?php
$o = "foo";
function modifyVariable(&$n) {
  $n = "bar";
}
modifyVariable($o);
echo $o; // "bar"
?>

This is not the case in JavaScript - the variable inside the function is completely separate from the variable outside the function, but it refers to the same value.

You are given a reference to the value - you are not given the variable by reference.

I don't think most JS developers that are reading this article don't know the concept of true pass by reference as it's used in other programming languages. That's why I think the wording I use is sufficient to get the point across that the reference is being copied instead of the object being copied, even though it is technically by value. Thanks for the suggestion!

I see you updated the wording, and yes, it's now much clearer. Awesome! Thanks!

code of conduct - report abuse