JS Concepts: Value vs. Reference
Tags: javascript, webdev, beginners, programming
Published: 2020-12-19 10:29:42

---
title: JS Concepts: Value vs. Reference
series: [JS Concepts]
published: true
description: This article is a part of a series covering fundamentals of the JavaScript language. Today, we're going to discuss the difference between value and reference.
tags: javascript, webdev, beginners, programming
---

>This article is a part of a series covering fundamentals of the JavaScript language. The intention of this series is to help developers advance their knowledge and really understand how the JavaScript language works. And to help myself get better at writing 😉

----
In the previous article, we talked about [call stack](). Today, we're going to discuss the difference between value and reference in JavaScript. At the end of this article, you will be able to tell why primitives and objects behave differently and how to avoid mistakes while manipulating them. 💪

# Types in JavaScript

In JavaScript we have two categories of types.


### Value types (primitives)
Types that are passed by value:
- String
- Number
- BigInt
- Boolean
- Symbol
- undefined 
- null

### Reference types
Types that are passed by reference:

- Object
- Array
- Function


Let's have a closer look at both of them.

# Value vs. Reference

When you assign a variable, the JavaScript engine decides whether the value is a primitive or a reference value.

## Primitive

When we assign a value as primitive, **the value is actually stored in the variable**. This means that when you manipulate the  variable, you are working on the actual value stored in the variable. If you assign primitive variables to other variables using `=`, their values are copied to new variables. We say that **they are copied by value**.

## Reference

When we assign non-primitive value to the variable, **we copy them by reference**. In other words, variables are given a reference to that value, so **they don’t actually contain the value**. 

When you assign a non-primitive variable to other variable using `=`, its reference is copied to the new variable and so they now both point to the same object’s location in memory. Consequently, if you decide to manipulate only one of them, you are actually working on the reference, which means you manipulate both variables!

This is crucial to understand as it’s often the reason behind bugs.

# Examples

### Primitive values
```javascript
const a = 5
let b = a

console.log(a) // 5
console.log(b) // 5

b = 10

console.log(a) // 5
console.log(b) // 10
```
As you can see in the example above, the value stored in the variable `b` has been changed, but the value of variable `a` remains intact. This is because variables `a` and `b` have no relationship. By copying value from variable `a` to `b`, we created a new independent value.

```javascript
let index = 0

function increaseIndex(index) {
    index++
}

increaseIndex(index)
console.log(index) // 0
```
The index value stays 0 even after executing `increaseIndex` function. This is because primitive values are copied by value. We're dealing with two independent values here, so changing the copied value has no effects on the original value.

### Non-primitive values
```javascript
const person_one = {
    name: 'Adam',
    age: 20
}
const person_two = person_one

console.log(person_one.name) // 'Adam'
console.log(person_two.name) // 'Adam'

person_two.name = 'George'

console.log(person_one.name) // 'George'
console.log(person_two.name) // 'George'
```
By changing the name of `person_two`, we're also modifying value in `person_one` because both `person_one` and `person_two` are pointing to the same object. When the variable `person_two` is created and assigned to `person_one`, we're creating an alias to the original object, not a new object.


```javascript
const person = {
    name: 'Adam',
    age: 20
}
function changeName(person) {
    person.name = 'George'
}

changeName(person)
console.log(person.name) // 'George'
```
In this case, the `person` name was changed after executing `changeName` function. This is because when we pass an object into the function, we're passing a reference to that object. When we change a property of that object within the function, the change will be reflected in the outer scope.

# Summary

- Primitives are copied by their value
- Objects are copied by their reference
- When you manipulate variable that stores a primitive value, you are working on the value stored in the variable
- When you manipulate an object, you are working on the reference to that object, not on the actual object


<br />
<br />
This article was originally published on my personal blog [mateuszjanusz.dev](https://mateuszjanusz.dev).