primitives vs objects in JAVASCRIPT : Call by sharing
Tags: javascript, webdev, beginners, programming
Published: 2021-03-26 05:18:23

Previously in this series, we've discussed how primitives and objects behave when we try to mutate or copy them. 
Now in the final article in this series we're going to see how they behave when we pass them to functions.

#Recap
First article we talked about mutability, which is changing the properties of something without changing it as a whole and we said that objects are mutable while primitives aren't, here's a quick example to demo what I've just said

![mutability example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wo6d37442uqt4q5814r.png)

Second article was all about copying, when you copy a primitive you copy its value but when you copy an object you copy its reference(its address in memory),here's another quick example: 
![copying example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxg09szzwgtjjgba3kqo.png)

Moving on to talk about how both primitives and objects behave when we pass them to functions as arguments but first, let's talk about functions.


#functions
Starting with a really typical function, the function `add`
![function example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq2na7jk6r0vrl7hlpdw.png)
now let's walk through this code to see how javascript is run.
Two main things that a javascript engine does are storing stuff and executing orders, let's see this in action.
The javascript engine reads the code from top to bottom so in our example here the first thing it sees is this:
```
function add(x , y){
  return x + y;
}
```
this is called a **function declaration**, when the engine see 
a function declaration it saves all its code inside the **global memory** and it doesn't execute any of the stuff inside the function because the function hasn't been called yet(remember we're talking about the first 3 lines) 

Moving on to line 4 and 5 in which variables `num_1` and num_2 respectively are also stored in global memory

![global memory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qsqtndlk3nug6cpf2nz.png)
**Notes:**
- in the picture above the letter *f* is short for the function's code
- `num_1` and `num_2` are stored to demo that the engine also saves variables not functions only


###execution context
Right now we've done nothing but storing stuff in global memory, on reaching the line `add(2,6)` the function `add` starts to execute.
when a function is called, an execution context is created and execution context is a place in which information about the function are stored.
It stores stuff like the function's local variables, at what line the program is at the moment.
so as you see in the following picture the function `add` has two local variables `x` and `y` and they store the numbers we provided when we call the function
![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73u85q6ijaw019zkujns.png)
currently we're inside the function body, which is the line `return x+y;` the program calculates the value of `x + y` which is `2 + 6` in this case and that's equal to `8`.
Then the function returns this value(8) and once we return, the function's execution context goes away it vanishes and if we called the function again a new execution context will be created and that's a rule: **for every function call a new execution context is created and once we hit a return statement that execution context disappears**

**Note:**
**things stored in global memory are available everywhere in our program. On the other hand, local variables are available only inside the function**

And that's it for functions in this article, there's one more thing about functions behind the scenes which is the call stack
if you want to learn about it, go watch [this video](https://www.youtube.com/watch?v=W8AeMrVtFLY) or read [this article](https://www.javascripttutorial.net/javascript-call-stack/)

#Primitives as functions arguments
consider the following example
![Primitives as functions arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkcxxh1c7vj9pojaowdp.png)
the question is: will the values of `x` and `language` change ? 
let's see what the console will tell us

![results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ktmqkahu5e8h52fex0e.jpg)

As you can see, nothing has changed that's because when we pass a primitive to a function , we're passing a **copy of its value** 
so `num` and `str` have the same values as `x` and `language` but they're different variables.

![memory visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m4ctcyeox4bi34ynez4.png)

An important thing to note is that the values of `num` and `str` are changed and we can see that if we put a `console.log` inside the function 
![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72la7q7evbwpc2gucj6i.png)

#call by value
when you pass a primitive to a function, its value is copied to the function argument hence the primitive and the argument have the same value but they're two different variables, that's what called **call by value** .

![call by value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul1q8l9xeoduf0x15292.jpg)


#objects as functions arguments
remember that objects are stored by reference which is the memory address of the object so when you say `let obj = {};` you storing the address of `{}` inside `obj`.

Now let's see what happens when we pass an object to a function
![objects as functions arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ichzq36yitq0x6kszmt.png)
do you expect `obj` to change or remain the same ? 
well, there's only one way to find out
![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d41zzqsxkmxf2vno8mx.jpg)
 As our console said, `obj` does change.
 But what if we tried the following: 

![reassigning objects using functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm92omsatt3nq5k2x2id.png)

In this case nothing will change and here's the output to demo that

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3px84egq874ahbhi5d6c.jpg)



##why is that ?
**When you pass an object to a function, you are passing a copy of the reference and you can use that copy to access and modify the object but you can't change the reference using the function**

![mutate objects with functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x90ap10b5s8aw8rwy5wj.png)

![reassign objects with functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/665fu631lui44wd9l8e5.png)

#call by sharing 

if you pass an object to a function, you can **mutate** the object inside the function but you can't **reassign ** it.
That's called call by sharing, many people say that objects are called by reference that's not right because call by reference means passing the reference itself and hence you can both mutate and reassign the object using the function and that's not the case in javascript.
We're passing a copy of the reference not the reference itself, 
it's like primitives when we pass a copy of the value not the value itself.

Hope this makes sense for you, you can read about call by sharing using the following links: 
- https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_sharing
- https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language
- https://wafy.me/tech/2016/07/02/call-by-sharing.html

And that's it for this article and the whole series, hope you guys have enjoyed the series !