To do arithmetic calculations such as addition, subtraction, multiplication, division, etc you need to overwrite the default valueOf() method in the object.
Consider 2 objects John and Lily with name and salary properties defined in it.
// 2 objects
const John = {
name: "John Doe",
salary: 23000,
};
const Lily = {
name: "Lily Rose",
salary: 45000,
};
What would you think if we try to add these 2 objects together? Let's find out.
// 2 objects
const John = {
name: "John Doe",
salary: 23000,
};
const Lily = {
name: "Lily Rose",
salary: 45000,
};
// add 2 objects together
console.log(John + Lily); // ==> [object Object][object Object] 😟
Well, we would get something like this, [object Object][object Object].
Not useful at all.
We can make this useful by overwriting the default valueOf() method in John and Lily objects, because when doing an arithmetic calculation (+, -, *, /) with objects JavaScript internally calls valueOf() method.
So let's define the method in both the objects.
// 2 objects
const John = {
name: "John Doe",
salary: 23000,
valueOf: function () {
return this.salary;
},
};
const Lily = {
name: "Lily Rose",
salary: 45000,
valueOf: function () {
return this.salary;
},
};
// add 2 objects together
console.log(John + Lily); // ==> 68000 😃
// calculate 500 + John
console.log(500 + John); // ==> 23500
In the valueOf() method we are returning the salary property value so that when we do numerical calculations with the objects the calculated value of both the salary is returned instead of [object Object][object Object].
Useful! Right? 😃
This also depends on the context you are using to calculate.
Consider adding a string Hello to John object.
// 2 objects
const John = {
name: "John Doe",
salary: 23000,
valueOf: function () {
return this.salary;
},
};
const Lily = {
name: "Lily Rose",
salary: 45000,
valueOf: function () {
return this.salary;
},
};
// add Hello with John
console.log("Hello" + John); // ==> Hello23000