Learn pass by value and pass by reference in JavaScript

This article was originally posted on my blog. Head over to inspiredwebdev.com for more articles and tutorials. Check out my JavaScript course on Educative to learn everything from ES6 to ES2019.

If you just started learning how to code you may have heard the terms pass by value and pass by reference but you may not be 100% clear as to what they mean.

In this article we will go over the difference between the two, using JavaScript as the language of reference.

First of all, let's define what these two terms mean:

• pass by value means that when we pass a variable to a function, it is copied over onto a new one and a change inside of the function scope will not be reflected outside of it
• pass by reference, on the other hand, means that our variable is not copied over onto a new one but simply referenced in our function so a change inside of the function will be reflected outside of it

Pass by value

JavaScript always passes arguments by values, meaning that a new variable is created inside the scope of the function so changing its value inside of it will not affect what's outside of the scope.

Let's look at this simple example:

function incrementNumber(num){
    num = num +1;
    console.log(num);
}

let myNumber = 1;
incrementNumber(myNumber);
// 2
console.log(myNumber);
// 1

As you can see, the value got updated inside of the function, but the original variable that we passed as the argument of the function did not change.

Pass by reference

We just mentioned that JavaScript always passes arguments by value so when is it that we actually can leverage passing by reference?

Let's look at this example:

function increaseAge(person){
    person.age = person.age + 1;
    console.log(person.age);
}

const me = {
    name: 'Alberto',
    age: 27
}

increaseAge(me);
// 28
console.log(me.age);
// 28

As you can see, this time instead of a Primitive, I passed an Object and when I changed the value of a property of that object, the change was reflected outside of the scope of the function.

Does this mean that Objects are passed by reference in JavaScript? The answer is no and this simple example will show you why JavaScript always passes by value.

function increaseAge(person){
    person = {
        name: "Alberto",
        age: person.age + 1
    }
    console.log(person.age);
}

const me = {
    name: 'Alberto',
    age: 27
}

increaseAge(me);
// 28
console.log(me.age);
// 27

What happened here? Why this time when we accessed me.age the value was not changed?

The reason is that the Object is passed by value but its value (its properties) is just a reference to that of the original Object. That's why when we changed a property of the object inside of our function, that change was reflected outside of it but when we change the Object itself to a new one the change was not reflected outside because we changed the new one that lived inside of the function scope.

Thank you very much for reading. Follow me on DevTo or on my blog at inspiredwebdev or on twitter. Check out Educative.io for interactive programming courses.

Disclaimer: Links to Amazon and Educative are affiliate links, purchases you make will generate extra commissions for me. Thank you

Get my ebook on Amazon and Leanpub