Copy by Value vs Reference
Tags: javascript, reference, value, beginners
Published: 2022-02-18 19:15:30

**<u>Intro</u>**
There are two ways to pass a value to a variable in JavaScript and understanding how they operate is fundamental to your success at manipulating data in your code. In this short blog I will explain the differences between the two and provide examples along the way. Variables will either be passed a **copy of the value** of they're being assigned, or be passed a **reference to the value** they're being assigned.
![sample variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5kibnwkd6g73ucf5ozy.png)




**<u>Copy by Value</u>**
When working with primitive data types (numbers, strings, Booleans, null, and undefined) your variables will be making a copy of the value they're being assigned and represent that specific copy of the value. Any changes to the original data will not effect the copy that was made and stored in the variable we've created. Vice versa, these values stored into our variable can be manipulated without any changes to the original data.

![value copies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbcn85o7aocst02lsieu.png)

In the image above, <u>b</u> is being assigned the value stored in the <u>a</u> variable. Since the <u>a</u> variable is storing a primitive data type <u>b</u> is **assigned a copy** of that value. Any changes made to <u>a</u> later on will not effect <u>b</u>'s value. 
`a === 1 //true` `b === 1 //true`

```
a = undefined;
console.log(b); // prints 1, not effected by a being reassigned.
```
**<u>Copy by Reference</u>**
When working with complex data types (Objects, arrays, functions) your variables **will not make a copy** of the value they're being assigned to, but instead **will make a reference** to that data. Any manipulation of our variable will effect the original data since our variable is just a reference to the original data. Similarly, any changes to the original data _will_ effect our variable as well.

```
let a = {
   name: 'Object',
   color: 'blue'
}
let b = a;
```
In the code above, the <u>a</u> variable has been assigned to an object with two properties. Just under that, we've assigned the <u>b</u> variable to the <u>a</u> variable. When the <u>b</u> variable is assigned here, it will be **assigned a reference** to the same object the <u>a</u> variable is already assigned to. Any changes to the <u>b</u> variable will effect the original data stored in the <u>a</u> variable.
`b.color = 'orange'`
Since both variables point to the same object, the color of the object both variables point to will be assigned to 'orange'.

```
console.log(a); // prints {name: 'Object, color: 'orange'} 
console.log(b); // prints {name: 'Object, color: 'orange'}
```
![by reference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1szuiyruaz2mq708jj41.png)

**<u>In Summary</u>**
![coffee cups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00irkh2jsmre37ngzdgt.gif)It's important to know whether the data you're working with is a copy or a reference. If you're working with a copy it's less detrimental to the overall program as your changes are localized to that copy of the data. When working with a reference your changes effect the overall data and can produce unwanted changes later in your code if not caught.