And learn why it’s crucial to know the difference https://unsplash.com/ is an Object-Oriented language: this means that most things in JavaScript are . For example, functions are Objects. The only elements that are not objects are the , , , and These Primitive Data Types also are , which means that once created they cannot be modified. JavaScript Objects Primitive Data Types : string number boolean null undefined. immutable One of the differences between the two is that Primitive Data Types are passed and Objects are passed . By Value By Reference Primitive Data Types are passed and Objects are passed By Value By Reference. What does this mean ? You can think of it this way: . Picture it like twins: they are born exactly the same, but the first twin doesn’t lose a leg when the second twin loses his in the war. By Value means creating a COPY of the original . When your Mom calls you “Pumpkin Pie” although your name is Margaret, this doesn’t suddenly give birth to a clone of yourself: you are still one, but you can be called by these two very different names. By Reference means creating an ALIAS to the original Let’s examine how Primitives and Objects behave, first when we assign them values with the operator (=), and second when we pass them to a function as a parameter. assignment 1. Assigning a value with the = operator to Primitives an Objects With Primitive Data Types, =operator works by value Consider the following code: var name = "Carlos";var firstName = name;name = "Carla"; console.log(name); // "Carla"console.log(firstName); // "Carlos" → Try it yourself The result is pretty straightforward : that’s the = operator working by value. What really happens here can be simplified as follows : A variable is created and given the value of "Carlos". JavaScript allocates a memory spot for it. name A variable is created and is given a of 's value. has its own memory spot and is independent of . At this moment in the code, also has a value of "Carlos". firstName copy name firstName name firstName We then change the value of to "Carla". But still holds its original value, because it lives in a different memory spot. name firstName When working with primitives, the =operator creates a copy of the original variable. That’s what by value means. With Objects, =operator works by reference Consider the following code : var myName = {firstName: "Carlos"};var identity = myName;myName.firstName = "Carla"; console.log(myName.firstName); // "Carla"console.log(identity.firstName); // "Carla" → Try it yourself Here the output is the same for the variables containing objects. That happens because, when dealing with objects, the =operator works by reference. What is really happening can be described as follows: A variable is created and is given the value of an object which has a property called . has the value of "Carlos". JavaScript allocates a memory spot for and the object it contains. myName firstName firstName myName A variable is created and is pointed to . . It only 's value. identity myName There is no dedicated memory space to _identity_ 's value' points to myName We change the value of 's property to "Carla" instead of "Carlos". myName firstName When we log it displays the new value, which is pretty straightforward. But when we log its displays 's new value "Carla". This happens because only ’s place in the memory. myName.firstName identity.firstName also myName.firstName identity.firstName points to myName.firstName When working with objects, the =operator creates an alias to the original object, it doesn’t create a new object. That’s what “by reference” means. 2. Passing Primitives and Objects to a function Primitive Data Types are passed to a function by value If you change the value of a Primitive Data Type inside a function, this change won’t affect the variable in the outer scope: var myName = "Carlos";function myNameIs(aName){aName = "Carla";}myNameIs(myName); console.log(myName); // "Carlos" → Try it yourself Even if we are changing the variable inside of the function , when we print it after calling the function, it still has the value "Carlos". That is because when primitive types are passed, they are passed by value. myName myNameIs We are passing a copy of : anything you do to inside the body of the function won't affect the variable in the global scope because you are passing a copy of , and not the original variable. myName myName myName myName myName Objects are passed to a function by reference When you are passing something by reference, you are passing something that points to something else, not a copy of the object. So since JavaScript passes objects by reference, when you change a property of that object within the function, the change will be reflected in the outer scope: var myName = {};function myNameIs(aName){aName.firstName = "Carla";}myNameIs(myName); console.log(myName); // Object {firstName: "Carla"} → Try it yourself Now if I log the variable after having invoked the function , it logs an object with a key of with a value equal to "Carla". The object did change in the global scope when we passed it to the function. myName myNameIs firstName This is because when you pass an object into the function, you are not passing a copy. You are passing something that to the object. So when you change a property of that object in the function, you are changing the property of the object in the outer scope. points myName But there is a subtlety you should be aware of: var myName = {firstName: "Carla"}; function myNameIs(aName){aName = {nickName: "Carlita"};} myNameIs(myName);console.log(myName); // Object {firstName: "Carla"} → Try it yourself Here it prints the value of the variable in the outer scope and didn't add a property to the object this time. Why is that ? If you look carefully, what we are doing in the function is trying to reassign the object a new value. myName nickName myName But you can’t change what , you can only change a of to something else, like this: myName points to property myName var myName = {firstName: "Carla"}; function myNameIs(aName){aName.nickName = "Carlita";} myNameIs(myName);console.log(myName); // Object {firstName: "Carla", nickName: "Carlita"} → Try it yourself Want to learn more ? Check out my other articles on the basics of JavaScript: Hoisting in JavaScript: a Quick Guide Understand JavaScript Variable Scope with ease Get your head around “this” How to use JavaScript closures with confidence A Quick Handbook for Dates in JavaScript Work with JavaScript arrays like a boss I hope you enjoyed this explanation of “By Value” and “By Reference”. Feel free to comment and like this article so that others can find it easily on Medium !

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Grasp “By Value” and “By Reference” in JavaScript

Too Long; Didn't Read

Léna Faure

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Grasp “By Value” and “By Reference” in JavaScript

Too Long; Didn't Read

Léna Faure

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES