JS Syntax
  • Introduction
  • this
  • block-level scope
  • ===
  • inefficient DOM manipulation
  • Reference equality, shallow equality and deep equality
  • D3 - 2
  • D3 - 5
  • D3 - static
Powered by GitBook
On this page
  • refer to the same object
  • same data but are not referentially equal.
  • same content
  • equality with JSON.stringify

Was this helpful?

Reference equality, shallow equality and deep equality

===same reference

shallowEqual compare each nested object by ===

deepEqual same content, and don't care about reference

shallowEqualWhen it reaches theaddressobject, it doesn’t go deeper to compare the contents and relies on the two objects having the same reference.

refer to the same object

user1 = {
    name: "John",
    address: {
        line1: "55 Green Park Road",
        line2: "Purple Valley"  
    }
}

user2 = user1;
console.log("user1 === user2", user1 === user2);
console.log("shallowEqual(user1, user2)", shallowEqual(user1, user2));
console.log("deepEqual(user1, user2)", deepEqual(user1, user2));

// user1 === user2 true // reference equality
// shallowEqual(user1, user2) true
// deepEqual(user1, user2) true

same data but are not referentially equal.

user2 = {
    name: "John",
    address: user1.address
}
console.log("user1 === user2", user1 === user2);
console.log("shallowEqual(user1, user2)", shallowEqual(user1, user2));
console.log("deepEqual(user1, user2)", deepEqual(user1, user2));

// user1 === user2 false
// shallowEqual(user1, user2) true
// deepEqual(user1, user2) true

same content

user2 = {
    name: "John",
    address: {
        line1: "55 Green Park Road",
        line2: "Purple Valley" 
    }
}
console.log("user1 === user2", user1 === user2);
console.log("shallowEqual(user1, user2)", shallowEqual(user1, user2));
console.log("deepEqual(user1, user2)", deepEqual(user1, user2));

// user1 === user2 false
// shallowEqual(user1, user2) false
// deepEqual(user1, user2) true

equality with JSON.stringify

function jsonEqual(a,b) {
    return JSON.stringify(a) === JSON.stringify(b);
}
jsonEqual(user1, user2) // true in all three cases above

jsonEqual({a: 1, b: 2}, {b: 2, a: 1}); // false

jsonEqual({a: 5, b: function(){}}, {a: 5}); // true

JSON.stringify rely on [1]the ordering of the properties, [2]does not serialize functions, [3]still generate the two complete JSON strings.

deepEqual is much faster at finding out False. As soon as it finds two properties that don’t match up it returns false.

Prefer deepEqual

Previousinefficient DOM manipulationNextD3 - 2

Last updated 5 years ago

Was this helpful?