{"componentChunkName":"component---src-templates-blog-post-js","path":"/reference-value/","result":{"data":{"site":{"siteMetadata":{"title":"Noah's Web Dev Notes"}},"markdownRemark":{"id":"c063f940-d1d1-5055-a113-1f6316505656","excerpt":"In javascript, when you assign value to a variable, it has two different ways to achieve that: assign value or assign reference. The main difference between the…","html":"
\n

In javascript, when you assign value to a variable, it has two different ways to achieve that: assign value or assign reference.

\n
\n

The main difference between the two is that passing by value happens when assigning primitives while passing by reference when assigning objects.

\n
value
\n
let a=10\nlet b=a\na=11\nconsole.log(a,b) //11, 10
\n

When assign primitives such as string, number, boolean or symbol to a variable. In memory it works like below:

\n
\n

a=10, it generate a key value pair and save them into stack

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
keyvalue
a10
\n
\n

b=a

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
keyvalue
a10
b10
\n
\n

a=11

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
keyvalue
a11
b10
\n
reference
\n
let a = {age:10}\nlet b = a\nb.age = 11\nconsole.log(a.age) // 11
\n

But if you assign object to a variable, in memory it works like below:

\n
\n

let a = {age:10}, it save the reference address of the object instead of the value of the object in the stack

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
keyaddress
aaddress1
\n
\n

and in the heap it save the object value:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
addressvalue
address1{age:10}
\n
\n

Therefore, when assign b=a, they will share the same reference address in the stack

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
keyaddress
aaddress1
baddress1
\n

and this is why when you change the value of b, it will also effect a

\n
\n

b.age = 11

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
addressvalue
address1{age:11}
\n
Why make reference instead of value?
\n

It is because normally object could be huge, and if we all save them as key-value pairs in the stack, it will lead to a heavy memory cost.

","frontmatter":{"title":"Reference and value","date":"December 16, 2020","description":"The concept of reference and value."}},"previous":{"fields":{"slug":"/keyword-this/"},"frontmatter":{"title":"Javascript keyword:'this'"}},"next":null},"pageContext":{"id":"c063f940-d1d1-5055-a113-1f6316505656","previousPostId":"7ddbb1fd-8bfe-59c3-a3ae-6514e1d78309","nextPostId":null}},"staticQueryHashes":["2841359383","3257411868"]}