{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/objects-vs-primitives-in-javascript/", "result": {"data":{"markdownRemark":{"html":"

We know that JavaScript has six primitive data types: string, number, boolean, undefined, null and symbol. A primitive is data that is not an object and has no methods.

\n

We also know that in JavaScript, except the primitive data types, everything is an object. An Object is an object. An array is an object. A function is an object and so on.

\n

To understand some of the key differences between objects and primitives, let’s start with an example:

\n
let topScore = 90\nlet myScore = topScore
\n

On line 1, when topScore variable is created JavaScript engine creates a new space in memory and saves the value of topScore as 90. On line 2, we have a different variable called myScore whose value is equal to the value of the topScore variable. In this case, JavaScript creates a different space in memory and copies the value of the topScore variable. As a result, we have two different spaces in memory and both the variables have the same value.

\n

\n \n \n \n \n

\n
topScore = 100\n\nconsole.log(topScore) // 100\n\nconsole.log(myScore) // 90
\n

Now if we assign the topScore variable a different value, the value of myScore variable doesn't change because myScore variable points to a different space in memory than the topScore variable.

\n

\n \n \n \n \n

\n

When we deal with objects, something different happens though. Consider the following example:

\n
let phone = {\n  brand: "Apple",\n}\n\nlet cellphone = phone
\n

On line 1, we have defined an object, during the creation of which JavaScript engine creates new space in memory. On line 5, the value of the cellphone variable is equal to the value of the phone variable. In this case, unlike primitives, Javascript engine doesn't create new space for the cellphone variable. In other words, the cellphone variable doesn't copy the value of the phone variable. Both the variables - phone and cellphone - become references for the same object in memory.

\n

\n \n \n \n \n

\n

Let's assign the brand property a new value using the dot operator.

\n
phone.brand = "OnePlus"\n\nconsole.log(phone.brand) // OnePlus\n\nconsole.log(cellphone.brand) // OnePlus
\n

Now, if we check the value of the brand property of both the phone and cellphone variables, we get the same result - OnePlus - in both the cases.

\n

\n \n \n \n \n

\n
let phone = {\n  brand: "Apple",\n}\nlet cellphone = phone\nphone = {\n  brand: "Nokia",\n}\nconsole.log(phone.brand) // Nokia\n\nconsole.log(cellphone.brand) // Apple
\n

However, if we assign the phone variable a new object using the equal (=) sign (line 5), then JavaScript will create new space in memory. And if we log the value of the brand property of both the phone and cellphone variables, we get different results as shown below:

\n

\n \n \n \n \n

\n","frontmatter":{"title":"Objects vs Primitives in JavaScript","date":"2021-05-26"}}},"pageContext":{"slug":"/objects-vs-primitives-in-javascript/","prev":{"fields":{"slug":"/javascript-dom-manipulation/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/understanding-execution-stack-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}