Value vs Reference: Understanding the Differences in Copying Primitive Values and Objects in JavaScript

JavaScript is a popular programming language that is used to create interactive websites and web applications. One of the key concepts to understand when working with JavaScript is the difference between primitive values and objects.

Primitive values, such as numbers, strings, and booleans, are stored directly in a variable. When a primitive value is assigned to a new variable, JavaScript creates a new copy of the value and assigns it to the new variable. For example:

let x = 5;
let y = x;
x = 10;
console.log(y); // Output: 5

In this example, when we assign the value of x to y, JavaScript creates a new copy of the value 5 and assigns it to y. Changing the value of x does not affect the value of y, because they are two separate copies of the same value.

Objects, on the other hand, are stored as references. This means that a variable holds a reference to the memory location of the object, rather than the object itself. When an object is assigned to a new variable, the new variable holds a reference to the same object in memory. For example:

const obj = { a: 1, b: 2 };
const ref = obj;
obj.a = 10;
console.log(ref.a); // Output: 10

In this example, when we assign the value of obj to ref, JavaScript assigns ref a reference to the same object in memory as obj. Changing a property of the object through one reference affects the other reference as well, because they are both pointing to the same object.

It’s important to keep in mind that when working with objects in JavaScript, it’s generally a best practice to create a new copy of the object if you need to make changes to it, rather than modifying the original object. One way to create a new copy of an object is by using the spread operator .... Here's an example:

const a = [1, 2, 3];
const b = [...a];
const c = a;
a.push(4);
console.log(b); // Output: [1, 2, 3]
console.log(c); // Output: [1, 2, 3, 4]

In this example, the spread operator ... is used to create a new copy of the array a and assign it to the variable b. This means that when we later modify the original array a by adding an element to it using the push() method, the new element is not added to the copy in b.

In contrast, the variable c is assigned a reference to the same array as a, so when we later modify the original array a, the changes are also reflected in c because they are pointing to the same array.

It’s important to understand the difference between primitive values and objects in JavaScript in order to write efficient and maintainable code. The spread operator is a useful tool for creating new copies of objects and avoiding unexpected behavior caused by references.

Apart from the spread operator, here are a few other copying techniques that can be used to create new copies of objects in JavaScript:

It’s important to note that each of these techniques has its own set of advantages and limitations. The choice of which technique to use depends on the specific requirements of your project and the properties of the objects you are working with.

I hope that you have a better understanding of the difference between copying values and copying references after reading this article. Feel free to reach out to me with any questions or comments you may have. I am always happy to hear from my readers and help in any way I can. Happy coding :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kirmani

With 20+ years in IT, a highly experienced Software Engineer. Diverse skills, stay current with latest tech, deliver high-quality work, love to share knowledge