Shallow Equality

Easy Important

Prompt

Write a JavaScript function shallowEqual(obj1, obj2) that checks if two given objects (or arrays) are shallowly equal.

Playground

Hint 1

Start by understanding what "shallow equality" means. Two objects or arrays are considered shallowly equal if their first level of properties or values are equal to each other, without considering deeper levels of nesting.

Hint 2

For each property in the first object, you need to check if the second object has a property with the same name and value. Remember, you're only checking for equality at the first level.

Hint 3

For iterating over the properties of an object, consider using a loop like for...of on the result of Object.keys(obj). This way, you can access each key directly. For example, for (const key of Object.keys(obj)) allows you to work with each property name (key) in the object. This is useful for comparing corresponding property values in two objects.

Solution

Concept Explanation 🧠

Shallow equality in JavaScript is a term used to describe a way of comparing two objects or values.

When you compare two things using shallow equality, you're asking, "Do these two things look the same right now, at this level?"

Imagine you have two boxes of crayons. If you're only checking for shallow equality, you'd just check if both boxes have the same number of crayons. You wouldn't care about the colors of the crayons inside. So even if one box has all red crayons and the other has all blue crayons, they are still "shallowly equal" because they both contain the same number of crayons.

In JavaScript, when comparing objects or arrays, shallow equality means we're only checking if the top-level elements are the same, not worrying about any deeper elements.

For example:

let obj1 = { name: 'Alice', age: 30 };
let obj2 = { name: 'Alice', age: 30 };

In this case, obj1 and obj2 are shallowly equal because they both have the same keys ("name" and "age") and corresponding values ("Alice" and 30).

However, consider this case:

let obj1 = {
  name: 'Alice',
  age: 30,
  address: { city: 'NY' },
};
let obj2 = {
  name: 'Alice',
  age: 30,
  address: { city: 'NY' },
};

Here, even though obj1 and obj2 look identical, they are not shallowly equal. Because the "address" property is an object itself (a "nested" object), a shallow equality check would see those "address" objects as different, even though they look the same, because they exist in different places in memory.

So, shallow equality is a "surface-level" comparison, it doesn't go "deep" into the values to compare them. It's a bit like saying two books are the same because they have the same number of pages, without checking if the text on those pages is the same.

Code Explanation 💻

This function works by first comparing the number of keys in each object. If the numbers are different, the function immediately returns false, as the objects cannot be shallowly equal.

If the number of keys is the same, the function uses a for...of loop to go through each key in the first object's keys. If it finds a key that is in the first object but not in the second, or if the values at any key are different, it immediately returns false.

If it gets through all keys without finding any differences, it returns true, signifying that the objects are shallowly equal.

Remember, this is a "shallow" comparison: it won't correctly compare objects that have nested objects or arrays. For that, you'd need a function that performs a "deep" comparison.

00:00

Table of Contents