By Value vs By reference in javascript

Something Like that:
By Value vs By reference

by value (primitive)
For that you need to create first html code.

HTML

<p>Value of a =  <span id="demo1"></span></p>
<p>Value of b =  <span id="demo2"></span></p>

After that add this JS code.

JS

var a = 3;
var b;

b = a; //create copy from a, but not update the value
a = 2; //update the value.

document.getElementById("demo1").innerHTML = a;
document.getElementById("demo2").innerHTML = b;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”vJxaJP” default_tab=”result” user=”pradeepanvi”]See the Pen by value (primitive) in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Value of a = 2
Value of b = 3

by reference (all object (including functions))
For that you need to create first html code.

HTML

<p>Value of c =  <span id="demo1"></span></p>
<p>Value of d =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = { greeting: 'hi'};
var d;

d = c;
c.greeting = 'hello'; //mutate

    /*Mutate: To change something ('Immutate' means it can't be changed.)*/

document.getElementById("demo1").innerHTML = c.greeting;
document.getElementById("demo2").innerHTML = d.greeting;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”YxZjYg” default_tab=”result” user=”pradeepanvi”]See the Pen by reference (all object (including functions)) in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see
Value of c = hello
Value of d = hello

by reference (even as parameters)

For that you need to create first html code.

HTML

<p>Value of c =  <span id="demo1"></span></p>
<p>Value of d =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = { greeting: 'hi'};
var d;

d = c;
c.greeting = 'hello'; //mutate

//by reference (even as parameters)
function changeG(obj){
    obj.greeting = 'Hola';
}

changeG(d);
document.getElementById("demo1").innerHTML = c.greeting;
document.getElementById("demo2").innerHTML = d.greeting;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”preZZP” default_tab=”result” user=”pradeepanvi”]See the Pen by reference (even as parameters) in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see
Value of c = Hola
Value of d = Hola

equal operator sets up new memory space (new address)

For that you need to create first html code.

HTML

<p>Value of c =  <span id="demo1"></span></p>
<p>Value of d =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = { greeting: 'hi'};
var d;

d = c;
c.greeting = 'hello'; //mutate

c = {greeting: 'howdy'};
document.getElementById("demo1").innerHTML = c.greeting;
document.getElementById("demo2").innerHTML = d.greeting;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OjmmjZ” default_tab=”result” user=”pradeepanvi”]See the Pen equal operator sets up new memory space (new address) in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see
Value of c = howdy
Value of d = hello