TL;DR

In this blog post, I will try to explain what coercion is. How you can use it or what can cause you problems in your code.

Introduction

There are some things you want to be aware of when you start to create in JavaScript. For example, converting or controlling variables. In JavaScript, there is this thing that we call coercion.

What even is coercion? You may ask.

As many of you know JavaScript is a dynamically typed language. After the compilation, JavaScript will convert variables to other suitable types. But only if it is necessary, of course. In the next sections, we will go through some of these situations together.

JavaScript can be surprisingly forgiving when it comes to type errors. In many languages, an expression like

3 + true // 4

is an error, because Boolean and Number are incompatible together. JavaScript will not only run but happily will produce 4 🤯 as a result.

String coercion

Now, what will happen if you want to combine a number or a string?

JavaScript is in favor of a string and will convert a number to a string.

2 + "3" // "23"
"2" + 3 // "23"

But that's not all that JavaScript has for us. It can be even more confusing.

Let's take this expression for example:

1 + 2 + "3" // "33"
// same as
(1 + 2) + "3" // "33"

Here you have another example:

1 + "2" + 3 // "123"
(1 + "2") + 3 // "123"

The moral of the story is when you combine:

• number + number = number
• string + number = string
• string + string = string

Object coercion

valueOf method

valueOf method inherits every descendant of the Object data type. JavaScript calls this method to convert an object to a primitive value. You rarely will call this method by yourself. JavaScript is invoking this method when we expect a primitive value from an object.

MDN is explaining it in more depth (there also are examples).

toString method

toString method is also inherited by descendants of the Object data type. Its task is to return a string value of an object. Most of the time this method will be invoked in these situations:

• explicit type conversion to a string (for example, String(myObject))
• implicit type coercion into a string (for example, myObject + "hello world")

If you want to learn about the toString method in more depth here you can do it.

bits of Advice

An example is when you want to work with user inputs. The content from an input is a string, so before you start to work with it, you should convert it to a number. Also, a good practice is to write data submitted from a form before you send them to your backend for example. So you can be sure what you are sending there.

// conversion examples
const convertedInput = Number(valueFromInput);
const convertedInput = +valueFromInput;

Things to remember

• Type errors can be silently hidden by coercions
• The + operator is overloaded to do string concatenation or addition (depending on the variable type)
• Objects are coerced to string using the toString function and to number using the valueOf function

I hope this post helped you to be more confident with JavaScript. Your feedback will be very much appreciated. You can follow me on Twitter (DM me if you want to talk 😄)

See ya, till the next post. 👋