Pass By Value in JavaScript
Tags: html, javascript, webdev, functions
Published: 2019-11-04 15:07:01

One of the most confusing topics in programming is distinguishing whether a variable is passed by reference or by value. In JavaScript, things are a little different. Javascript always uses the pass by value concept. And only that.

#Data types again

JavaScript has two categories for data types: **Primitives** and **complex** types. The primitive keyword is referring to simple data types as Numbers or Strings and complex are objects, arrays or functions. 

Javascript **always** uses the *pass by value* concept. That means that changing the value of a variable never changes the underlying primitive. 

The confusing part is when the variables hold an object, a function or an array. These are generally complex types, which means that the variable holds the *reference/address* of the object. Technically, again the pass by value concept is present. In the complex types, **we pass by value the references**! 

#Passing by value (primitives edition)

When we access a primitive data type, we work on its value. Primitive types are Boolean, Number, String, Null, Undefined and symbol. 

When we assign primitives to the variable, we copy the value. If any changes are made to the variable copied, the original variable will not be affected by them.

![Copy variable by value](https://i.ibb.co/3f5vKKw/copybyvalue.png)

Imagine the memory as a storing apothecary where a series of boxes exist. These boxes are boxes of data and we use them to store our values. Upon declaring a variable, you were given a box for use and you will hold it until you need it later. So, in our example we allocate a box, we named it originalBox and put inside the string "doughnut". We can allocate another box, and name it to box and copy the content of the originalBox to it. What will happen if we want to change the box variable content? Simple we will remove the string "doughnut" from the box and put inside the string "apple"! Only the original value was copied when the box was created. The two boxes are not related to each other and not affect each other.

![Copy variable by value illustration](https://i.ibb.co/X7kxMRt/Web-1920-1.png)

Passing a primitive variable as a function parameter means that we make a new local instance of the variable and copy the value. Any changes made to the parameter, leave the original variable unaffected. 

![Pass variable by value](https://serving.photos.photobox.com/84405570b5bda936577c66128a365d2c0e22d372bf41a257e65711dcdb3b9e81c0b3a903.jpg)

In both of these examples, we pass the primitive value directly. Because we call the variable by value, any changes to the copied value do not affect the original variable.

#Passing by value of references

There are also complex types as objects, arrays and functions. When you manipulate a complex type you work on a reference (memory address) to its value. In JS everything is passed by value, and here this argument stands. The memory address of the parameter at the time of the function call is passed to the function as the value to be associated with the corresponding copied parameter. 

We will use the same example here, with the only difference of using a complex variable: an object!

![Copy variable by value](https://i.ibb.co/qR7FdYv/carbon-1.png)

Here in this example, when we create our variable JS recognizes that we creating a complex entity. That means in our variable we will store it's location in the storehouse. When we copy the variable, we copy the location that our original box is copied. That means that the 'boxObjCopied' is referencing the location of 'boxObject' and its content. What does that mean though? Because 'boxObjCopied' doesn't contain the value but a reference, when we update the property of it, we actually update the original object!


![Copy variable by value](https://i.ibb.co/6thQcMC/Group-19.png)


So, how we can make a shallow clone of the boxObject, and use it without altering its value?

We can use 2 ways: spread operator or Object.assign to deep clone the boxObject!

![Spread operator](https://i.ibb.co/p1FC66j/spread.png)

![Object assign](https://i.ibb.co/tDcjZsw/assign.png)

A more intermediate approach about the differences of spread operator and Object assign can be found here: [Object.assign vs Object Spread in Node.js](https://thecodebarbarian.com/object-assign-vs-object-spread.html)]


For deep clones see here: [[Shallow clone vs Deep Clone](https://masteringjs.io/tutorials/fundamentals/shallow-copy)]



#References 

 [[The Quite Nice and Fairly Accurate Intro to JS Primitive Data Types (pt. 1)](https://dev.to/ale3oula/the-quite-nice-and-fairly-accurate-introduction-to-javascript-primitive-data-types-e99)]

[[The Quite Nice and Fairly Accurate Intro to JavaScript Objects (pt. 2)](https://dev.to/ale3oula/the-quite-nice-and-fairly-accurate-intro-to-javascript-objects-pt-2-1aaf)]

[[Object.assign vs Object Spread in Node.js](https://thecodebarbarian.com/object-assign-vs-object-spread.html)]

[[Explaining Value vs. Reference in Javascript](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0)]

[[JavaScript, Ruby and C are not call by reference](https://dev.to/xpbytes/javascript-ruby-and-c-are-not-call-by-reference-23f7)]

[[Javascript Pass By Value And Pass By Reference In JavaScript](https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c)]

[[Understanding JavaScript Pass By Value](https://www.javascripttutorial.net/javascript-pass-by-value/)]