Javascript academy #1: Primitive value vs reference value
Tags: javascript, node, webdev, beginners
Published: 2021-10-22 14:43:34

Welcome to this new academy! In this I will NOT explain you javascript from scratch, the aim of this javascript academy is to explain you some concept in javascript that will help you to understand javascript engine!

Today I will show you the difference between `primitive value` & `reference value`.

### Primitive value 

Primitive value are `string`, `number`, `boolean`, `null`, `undefined` and `symbols`.

### Reference value

All others things like `plain object {}`, `array`, `Map`, etc...

### How data is stored?

For **Primitive value** the value is store on the `stack`, in other word, in the `current context!`

For **Reference value** the value is store in the `heap`, it's a big storage that keep all `objects` and each `object` has it's own adress! (Like house in a village, each house has its own adress)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbtg7oy5bfm308gq4ekx.png)

So in order to get the `object` through the `Heap` you need to use the adress of this `object`!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sccdy2tuo5l73p5epshf.png)
 
Fortunately you don't need to manage the `adress` yourself!

 
### Declaration of variable

For **Primitive value** the variable store the value. So you manipulate the `actual value` stored in this variable.

```javascript
let toto = 5
toto = 6
console.log(toto) // 6
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3r95z6sqv2tnuiake6.png)
 
For **Reference value** unlike primitive value when you manipulate an object you work on the `reference` of that object! So you store the `reference` of the object in the variable.

```javascript
let toto = {}
toto.a = 'hello'
console.log(toto) // { a: 'hello' }
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvt09t48t7al2q1rqnqy.png)
 

### Copy a value

For **Primitive value** when you assign a variable that store `primitive value` it will copy the `value` into a new variable.

So if you modify the value into a variable, the other variable value will be not changed.

```javascript
let a = 55
let b = a

a = 100
console.log(a) // 100
console.log(b) // 55
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq0t2t3tcpn0axlsqese.png)
 

For **Reference value** when you assign a variable that store `reference value` it will copy the **reference** of this object into a new variable.

So if you modify the value into a variable, the other variable value will change! Since both variable share the same `reference`!

```javascript
let a = {}
let b = a

a.toto = 'hello'
console.log(b) // { toto: 'hello' }
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s5ohwdwxcyei60l92u1.png)

### Working with function parameters


For **Primitive value** when you pass a variable that contains a `primitive value` as arguments of your function, it will copy the `value` of this variable.

So if you edit this value into the function, it will not change the value in the original variable!

```javascript
let a = 55

const foo = function (arg) {
   arg = 100
   console.log(arg) // 100
}
foo(a)
console.log(a) // 55
```

For **Reference value** when you pass a variable that contains a `reference value` as arguments of your function, it will copy the `reference` of this variable.

So if you edit this value into the function, it will change the value in the original variable!

 ```javascript
let a = { toto: 'hello' }

const foo = function (arg) {
   arg.toto = 'changed'
   console.log(arg) // { toto: 'changed' }
}
foo(a)
console.log(a) // { toto: 'changed' }
```

As you can see when you are working with `reference value` you can edit other variable that are sharing this `reference value`!

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and send message to me 😁 and **SAVE 19$** 💵💵

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp) 

🇫🇷🥖 For french developper you can check my [YoutubeChannel](https://www.youtube.com/channel/UCC675U1ZUPFASsK9-FjawtA)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!