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

Last updated

Was this helpful?