How to compare if two variables reference the same object in javascript

Question

I am new to JavaScript and getting my hands on the spread operator. I understand that it will deep copy the top-level elements of an array or object but shallow copy the nested arrays or objects. I wanted to see it action and hence the code below but was unable to get the required output as per my understanding.

const originalObject = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'Anytown',
  },
};

const copiedObject = { ...originalObject };

console.log(copiedObject.name === originalObject.name); // Expected Output: false but Outputs: true

originalObject.address.city = 'Newtown';

console.log(copiedObject.address.city); // Output: "Newtown" (modification affects both objects)
console.log(originalObject.address.city);

console.log(copiedObject.address === originalObject.address); // Output: true (Can we understand this means both has a reference to the same object?)

Shouldn't it give an output as false? console.log(copiedObject.name === originalObject.name);

Could someone explain in simpler terms how can I visualise it in code and also compare if two properties share the same reference in javascript?

Similar questions on stackoverflow thay I went through but couldn't find an answer:

Spread syntax does not deep-copy anything; it's strictly a shallow copy. The property values of the source object are copied (as values) to the destination object. — Pointy
– Pointy, Commented Feb 3, 2024 at 20:42
What do you mean by "it will deep copy the top-level elements"? — Bergi
– Bergi, Commented Feb 3, 2024 at 21:09
Did you mean to console.log(copiedObject === originalObject);? — Bergi
– Bergi, Commented Feb 3, 2024 at 21:10
For strings, there is no difference between "deep" and "shallow" copy. Since they are immutable, there is not even a difference between "copy" and "share" for them. — Bergi
– Bergi, Commented Feb 3, 2024 at 21:12
Does this answer your question? Compare if two variables reference the same object in javascript — pilchard
– pilchard, Commented Feb 8, 2024 at 13:01

Adam Jenkins · Accepted Answer · 2024-02-08 14:18:13Z

Primitives are always compared by value, objects (including arrays and functions) are always compared by reference.

Thats about as simple as it can get.

Primitives in JS are strings, numbers, bigints, booleans, symbols, undefined, and null.

Everything else is an object

You’ve got two questions in here, though.

The first is “how does JS compare variables” - answered above.

The second is “how does the spread operator work (on objects or arrays)”

That was answered by Pointy in the comments, the spread operator always creates a shallow copy of the thing (object or array) you’re using it on.

That means that any object defined within the object you’re spreading is NOT shallow/deep cloned at all, its reference will be the same in object you’ve created with the spread operator.

So if you modify a property in that nested object in an object cloned using the spread operator, it’s also modified in the original object, because it’s the same reference, it’s the same thing

James · Accepted Answer · 2024-02-03 21:31:19Z

0

Here's a small function that checks if two things are types that are references, and if so checks if they are equal.

const isSameReference = (a, b) => {
  return a === b && a != null && ["object", "function"].includes(typeof a)
}

const originalObject = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'Anytown',
  },
};

const copiedObject = { ...originalObject };

console.log(isSameReference(copiedObject.name, originalObject.name));

console.log(isSameReference(copiedObject.address, originalObject.address));

edited Feb 3, 2024 at 21:31

answered Feb 3, 2024 at 20:59

James

22.4k5 gold badges29 silver badges44 bronze badges

1 Comment

Bergi Over a year ago

Checking typeof b === t is unnecessary when you already check a === b

Collectives™ on Stack Overflow

How to compare if two variables reference the same object in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related