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 a string
String concatenation can take place on a number and a string

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.

Initialize React project with Vite