What is the difference between passing by value or by reference in JavaScript

What is the difference between passing by value or by reference in JavaScript
Check out my Github for my free-to-read JavaScript Ebook that covers all the new features from ES6 to 2019. If you want find a great place for interactive tutorials, i recommend Educative where I'm currently finishing to build my JavaScript course.
This website contains affiliate links. See my disclosure about affiliate links here

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, if you enjoyed this article, please share it with friends and colleagues and if there is a topic you would like me to cover, reach out to me on twitter at @montalesi. Follow me on DevTo or on Twitter for more.

complete guide to modern javascript alberto montalesi ebook bannerGet my ebook on Amazon and Leanpub or get my course on Educative


NEWEST ARTICLES




ABOUT ME

author alberto montalesi profile picture

Alberto is a software developer specialized in building enterpise software using Angular and author of the 'Complete guide to Modern JavaScript' ebook and course. In his free time he writes articles and tutorials on InspiredWebDev.com and Dev.to

You can read more about him here