Type coercion - Objects to Primitives
Type coercion can also occur on objects when certain operations are done on them.
See the example below:
const obj1 = { name: 'Peace', age: 18 };
const obj2 = { name: 'Bob', age: 10 };
const obj = obj1 + obj2;
// const obj = obj1 - obj2 // NaN number
console.log(obj, typeof obj)
// [object Object][object Object] string
See another example below:
const date1 = new Date(2050, 04, 03);
const date2 = new Date(2040, 11, 06);
const delta = date1 - date2;
console.log(delta, typeof delta); // 296784000000 number
date1 > date2 // true
In the examples above, the object type is converted to the different data types.
Type conversion - Objects to Primitives
Apart from objects auto-conversion to primitive, conversion can be specified ourselves.
const date1 = new Date(2050, 04, 03);
const date2 = new Date(2040, 11, 06);
const delta = date1 - date2;
// delta.valueOf() // 296784000000 => number
console.log(delta.toString, typeof delta);
// [Function: toString] number
Symbol.toPrimitive
The built-in symbol named Symbol.toPrimitive can specify the conversion on an object.
obj[Symbol.toPrimitive] = function(hint) {
// must return a primitive value
};
See the example below:
const user = {
name: "Bello",
money: 4000,
[Symbol.toPrimitive](hint) {
console.log(`hint: ${hint}`);
return hint == "string" ? `{name: "${this.name}"}` : this.money;
}
};
// conversions
console.log(user);
/*
{
name: 'Bello',
money: 4000,
[Symbol(Symbol.toPrimitive)]: [Function: [Symbol.toPrimitive]]
}
*/
console.log(+user);
/*
hint: number
4000
*/
console.log(user + 500);
/*
hint: number
4500
*/
In the example above, the method user[Symbol.toPrimitive] handles all the conversion.
toString and valueOf methods
Instead of the Symbol.toPrimitive method to handle all conversions, we can use the toString() and valueOf() methods.
A little adjustment is made to the example above.
See the example below:
const user = {
name: "Bello",
money: 4000,
toString() {
return `{name: "${this.name}"}`;
},
valueOf() {
return this.money;
}
};
// conversions
console.log(user);
/*
{
name: 'Bello',
money: 4000,
toString: [Function: toString],
valueOf: [Function: valueOf]
}
*/
console.log(+user); // 4000
console.log(user + 500); // 4500
Below is another example:
const obj = {
// toString handles all conversions in the absence of other methods
toString() {
return "10"; // string
}
};
const toNum = obj * 4;
console.log(toNum, typeof toNum); // 44 number
// * converted 10 in string to 44 in number
See another example below:
const obj = {
// toString handles all conversions in the absence of other methods
toString() {
return "10";
}
};
const str = obj + 4;
console.log(str, typeof str); // 104 string
// + concatenate 10 and 4 to give a string
Top comments (0)