Question 333709 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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:

  1. How to check if two vars have the same reference?
  2. How to compare two variables in javascript
  3. Compare if two variables reference the same object in javascript
Tags:

2

Answers


  1. 0

    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, 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

    Login or Signup to reply.
  2. 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));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search