How to compare Objects in TypeScript

It’s simple to compare primitive values in TypeScript. You just use any of the available equality operators. Objects, however, are more difficult to compare because they are structured data. In this post, you will learn how to compare Objects in Typescript.

To compare Objects in TypeScript

Use the logical AND operator

In case your Objects have a few properties, and you know exactly all the names of keys, you can use the logical AND(&&) operator to compare objects. For instance:

// Definition of Type Student
type Student = {
	name: string;
	id: string;
	ranking: number;
};

const student1: Student = {
	name: "Michael",
	id: "2896",
	ranking: 1,
};

const student2: Student = {
	ranking: 2,
	id: "2998",
	name: "Ritchie",
};

// Compare 'student1' to 'student2'
if (
	student1.name === student2.name &&
	student1.id === student2.id &&
	student1.ranking === student2.ranking
) {
	console.log(true);
} else {
	console.log(false);
}

Output:

false

We make a key-value comparison in each object. The result is’ true’ if all key-value pairs are the same. Otherwise, it’s ‘false’.

Use the JSON.stringify() method

The following approach we want to show you is using the JSON.stringify() method. However, this method can be applied only when the key-value pairs in each object are in the same order.

To illustrate, take a look at this example:

// Definition of Type Student
type Student = {
	name: string;
	id: string;
	ranking: number;
};

const student1: Student = {
	name: "Michael",
	id: "2896",
	ranking: 1,
};

const student2: Student = {
	ranking: 1,
	id: "2896",
	name: "Michael",
};

const student3: Student = {
	name: "Michael",
	id: "2896",
	ranking: 1,
};

// Compare 'student1' to 'student2'
if (JSON.stringify(student1) === JSON.stringify(student2)) {
	console.log(true);
} else {
	console.log(false);
}

// Compare 'student1' to 'student3'
if (JSON.stringify(student1) === JSON.stringify(student3)) {
	console.log(true);
} else {
	console.log(false);
}

Output:

false
true

As you can see, all three objects: ‘student1’, ‘student2’, and ‘student3’, have the same value for key-value pairs. However, when comparing ‘student1’ with ‘student2’, the result is ‘false’ because the properties’ order is different. Conversely, we get the value’ true’ when comparing ‘student1’ with ‘student2’.

Deep Comparison of Objects

The last approach we want to share with you is using the lodash.iseQual library. This is the most straightforward method to compare Objects in TypeScript. 

First, you need to install the ‘lodash’ module. Open the terminal on the root directory of your project and run the following commands:

npm i lodash.isequal
npm i --save-dev @types/lodash.isequal

Now you can start using it to compare Objects in TypeScript.

import isEqual from "lodash.isequal";

// Definition of Type Student
type Student = {
	name: string;
	id: string;
	ranking: number;
};

const student1: Student = {
	name: "Michael",
	id: "2896",
	ranking: 1,
};

const student2: Student = {
	ranking: 1,
	id: "2896",
	name: "Michael",
};

// Apply the isEqual() method to compare 'student1' to 'student2'
console.log(isEqual(student1, student2));

Output:

true

The ‘isEquals()’ method allows us to compare the values ​​passed deeply, then return ‘true’ if they are equal and ‘false if they are different.’

Summary

To sum up, we just shared with you three methods on how to compare Objects in TypeScript. You can choose which method you like. However, we recommend you use the ‘lodash.iseQual’ library because of its convenience and accuracy. Hopefully, the information we provided will be helpful to you.

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js