Learn pass by value and pass by reference in JavaScript
Tags: javascript, tutorial, codenewbie, beginners
Published: 2020-06-07 23:52:22

---
canonical_url: https://inspiredwebdev.com/javascript-pass-by-value-or-reference
---

> This article was originally posted on my [blog](https://inspiredwebdev.com/javascript-pass-by-value-or-reference). Head over to [inspiredwebdev.com](https://inspiredwebdev.com) for more articles and tutorials. Check out my **JavaScript course** on [Educative](https://www.educative.io/courses/complete-guide-to-modern-javascript?aff=BqmB) to learn everything from ES6 to ES2019.

&nbsp;

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

&nbsp;

## 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:

```javascript
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.

&nbsp;

## 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:

```javascript
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.

```javascript
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.

&nbsp;

---

Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [inspiredwebdev](https://inspiredwebdev.com/) or on [twitter](https://twitter.com/montalesi). Check out [Educative.io](https://www.educative.io/explore?aff=BqmB) for interactive programming courses. 

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

<div className="promotional_banner">
<a href="http://a-fwd.to/jHO6m9t" target="_blank">
<img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg" />
</a>
<span>Get my ebook on <a href="http://a-fwd.to/jHO6m9t" target="_blank">Amazon</a> and <a href="https://leanpub.com/completeguidetomodernjavascript2020" target="_blank">Leanpub</a></span>
</div>