JavaScript 101: Implicit Type Coercion

tl;dr: Javascript automatically converts some types into others implicit - always to be found in; essentially connected with. coercion - persuading someone to do something by using force or threats.

By looking into the definition of each of these words, it isn’t immediately clear what is meant by the term implicit type coercion, and we need the context of computer programming to understand what is actually going on.

When writing programs, it’s important to know how to compare values to each other - by doing this we can control an applications flow. We know that Javascript has types, but how does it compare each type to another value of a different type? Or a value of the same type? This is where JavaScripts’ implicit type coercion comes in. String Coercion

Consider the following situation:

const a = 10;
const b = "20";
console.log(a + b); // "1020"

Remember that the + operator in Javascript is used for adding not just numbers but strings.

The example above is string coercion at play. When a number is added to a string, Javascript will always convert the number into a string. It’s a major gotcha.

A clearer example would be to explicitly add a number to a string:

const a = 456;
const b = "javascript";
console.log(a + b); // "456javascript"

But does it work the other way?

const a = 10;
const b = "5";
console.log(a - b); // 5

Here, type coercion also takes place, but while using the - operator, a string is converted to a number first and then subtraction takes place.

const a = 456;
const b = "javascript";
console.log(a - b); // NaN

We get a NaN value this time, as the first thing Javascript will do is try to convert the string “javascript” into a number type, which it obviously cannot do, resulting in a NaN.

Boolean Coercion

To understand Boolean coercion is to understand what truthy and falsy values are. In Javascript, any value deemed truthy will be converted to true (a boolean type) and falsy values converted to false.

// We can use the Boolean object to check if a value resolves to true or false

Boolean(); // false Boolean("") // false Boolean(2) // true Boolean(null) // false Boolean(0) // false Boolean(0n) // false Boolean(undefined) // false Boolean("a string") // true Boolean({}) // true Boolean([]) // true

and so on, try changing the 0 value of x below to something else:

const x = 0
Boolean(x) ? "true" : "false"}

Knowing how Javascript evaluates truthy and falsy values helps us determine an applications’ logic flow (if statements etc.).

Logical Operators

Javascript ships with three “logical operators”: || (OR) , && (AND) and ! (NOT).

It’s important to remember that logical operators do not return true or false, they just return one of the operands. But because as we’ve seen, Javascript treats things like non null strings as truthy, this means we can still evaluate values in the same way.

    OR (
    AND ( && ) operator - If both the values are truthy, always the second value is returned. If the first value is falsy then the first val ue is returned or if the second value is falsy then the second value is returned. <br/>
    NOT ( ! ) operator - Returns false if its single operand that can be converted to true; otherwise, returns true.

const x = 2340;
const y = "A string";
const z = undefined;

console.log(x || y); // 2340 since the first value is truthy console.log(x || z); // 2340 console.log(x && y); // "A string" as both the first and second alue are truthy console.log(x && z); // undefined

Equality Coercion

When comparing two values it’s important to know how Javascript actually handles the comparison.

When using == it doesn’t just compare the values of the two operands, it actually converts the values first, and then compares them.

Equality coercion does not take place when using the triple equals === operator.

const a = 3;
const b = "3";
console.log(a == b); // true, Javascript converts the value of a into a string and asserts it is in fact the same as b

const a = 3;
const b = "3";
console.log(a === b); // false, as triple equals compares both the type and the value