Type conversions in Javascript objects
Understanding type conversions
Since Javascript is a weakly-typed language, types are determined implicitly. If I were to initialize a variable with something like const four = 4
, we can infer that the type of four
is number
since 4 is a number. If I performed an operation on hello
with something like const sum = four + 8
, the type of sum would also be a number
since hello
and 8
are both numbers and can successfully be added together. But if I tried to perform an operation on four
with something like const drink = four + 'loco'
, and since we know that numeric addition can't take place on 'loco'
, the Javascript engine converts hello to a string
, where instead of 4
, the new value of four
will be '4'
, and then string concatenation can take place.
This would all look something like this:
const four = 4
const sum = four + 8 // 4 + 8 = 12
const drink = four + 'loco' // '4' + 'loco' = '4loco'
Some important things to not here if any of this is confusing:
A number without quotations is of the type
number
A number with quotations is of the type
string
Numeric addition cannot take place on a
number
and astring
String concatenation can take place on a
number
and astring
Primitive conversions of objects
Javascript objects can also be converted to primitive types, either implicitly or explicitly. In the example below, we have two objects that can be added together in a similar way as is shown above.
const obj1 = [1,2,3,4,5]
const obj2 = [6,7,8,9]
const result = obj1 + obj2
// 1,2,3,4,56,7,8,9
By default, if you try to add two objects together, Javascript will convert the two objects to strings and then perform string concatenation. To paint this picture more explicitly, the conversion would look like this:
const result = obj1 + obj2
// '1,2,3,4,5' + '6,7,8,9' = '1,2,3,4,56,7,8,9'
The way this conversion takes place is that the Javascript engine sees +
and tries to perform numeric addition by calling the valueOf
method on the object to see if a numeric value can be determined. If it can't get a numeric value and thus still can't perform numeric addition, it will call the toString
method on the object to convert the object to a string to that string concatenation can be performed.
Overriding object methods
We can also override the methods valueOf
and toString
to specify the the outputs of these methods. For example, if I want to add the sums of the two objects by simply calling obj1 + obj2
, I can do the following:
const obj1 = [1,2,3,4,5]
const obj2 = [6,7,8,9]
Array.prototype.valueOf = function() {
return this.reduce((sum, num) => sum + num)
}
const result = obj1 + obj2
// 45
By overriding the valueOf
method to calculate the sum of all numbers in the array, when the two objects are added together, the Javascript engine calls valueOf
on each array, successfully calculates the sum of each array, and since both obj1
and obj2
are now both of type number
, it performs numeric addition to calculate the result which is 45.
Similarly, we can override toString
:
const obj1 = [1,2,3,4,5]
const obj2 = [6,7,8,9]
Array.prototype.toString = function() {
return 'hello'
}
const result = obj1 + obj2
// hellohello
By overriding toString
to return 'hello'
, when the Javascript engine calls toString
in its attempt to concatenate the two objects, it gets 'hello'
for each object and simply concatenates the two strings.