Type coercion in JavaScript

SrijanJun 08, 2025 - JavaScript

What you should know?

• How to declare variables and assign values to them?
• Different data types in JavaScript
• Different operators are available in JavaScript

What you will learn

• What "Type Coercion" means in JavaScript
• The difference between implicit and explicit type coercion
• The common methods used for explicit type conversion

Key concepts

What is type coercion?

Type coercion refers to JavaScript automatically or manually converting one data type to another.

There are two types of coercion:

• Implicit coercion (done automatically by JavaScript)
• Explicit coercion (done manually by the programmer)

Implicit type coercion (automatic)

JavaScript tries to guess what you mean when different types are used together.

Using the + operator: JavaScript prioritizes string concatenation (joining strings) if either value is a string. It will convert the non-string value into a string and join them. If both are numbers, it performs mathematical addition.

1// Both numbers -> Addition
2let sum = 10 + 5; // Output: 15
3
4// String + Number -> Concatenation
5let message = "Your score: " + 100; // Output: "Your score: 100"
6
7// Number + String -> Concatenation
8let tricky = 10 + "5"; // // Output: "105"

Other Math Operators -, *, /, %: Math operators primarily expect numbers. If they encounter strings representing numbers, they will attempt to convert those strings to numbers before performing the calculation.

1// JS converts "50" to the number 50 implicitly
2let difference = "50" - 10; // Output: 40
3
4// JS converts both "5" and "8" to numbers 5 and 8 implicitly
5let product = "5" * "8"; // Output: 40
6
7// If conversion to a number fails
8// JS tries to convert "hello" to a number, fails
9let invalidCalc = "hello" * 5; // Output: NaN (Not-a-Number)

Comparison with Loose Equality ==: The double equals operator == checks for equality after attempting to coerce the values to a common type.

1100 == "100"; // Output: true (String "100" is coerced to number 100)
20 == false; // Output: true (Boolean false is coerced to number 0)
31 == true; // Output: true (Boolean true is coerced to number 1)

Explicit type coercion (manual)

You can use built-in JavaScript functions to intentionally convert a value's type. This makes the intent of your code clear.

• Number(): explicitly convert a value to the Number type.
• String(): explicitly convert a value to the String type.
• Boolean(): explicitly convert a value to the Boolean type. This reveals whether a value is considered "truthy" or "falsy".
• parseInt(): Parses a string argument and returns an integer (whole number). It reads the string from left to right and stops at the first character that isn't a digit (or ignores leading whitespace).
• parseFloat(): Parses a string argument and returns a floating-point number (can include decimals). Similar to parseInt, but it recognizes the decimal point (.).

Number()

Number() explicitly converts a value to the Number type.

1let pageCountStr = "50";
2let pageCountNum = Number(pageCountStr); // 50
3
4let userLoggedIn = true;
5let loginValue = Number(userLoggedIn); // 1
6
7let invalidInput = "Chapter 1";
8let inputNumber = Number(invalidInput); // NaN

String()

String() explicitly converts a value to the String type.

1let orderId = 12345;
2let orderIdStr = String(orderId); // "12345"
3
4let isActive = false;
5let activeStr = String(isActive); // "false"
6
7### Boolean()
8`Boolean()` explicitly converts a value to the Boolean type. This reveals whether a value is considered "truthy" or "falsy".
9
10```javascript
11Boolean("");        // false (empty string is falsy)
12Boolean("Hi");      // true (non-empty string is truthy)
13Boolean(0);         // false (zero is falsy)
14Boolean(12);        // true (the non-zero number is truthy)
15Boolean(null);      // false (null is falsy)
16Boolean(undefined); // false (undefined is falsy)

parseInt()

parseInt() parses a string argument and returns an integer (whole number). It reads the string from left to right and stops at the first character that isn't a digit (or ignores leading whitespace).

1parseInt("200"); // 200 (Number)
2parseInt("19.99"); // 19 (Stops at '.')
3parseInt(" 50 stars"); // 50 (Ignores leading space, stops at 's')
4parseInt("Age: 30"); // NaN (Doesn't start with a digit)

parseFloat()

parseFloat() parses a string argument and returns a floating-point number (can include decimals). Similar to parseInt, but it recognizes the decimal point (.).

1parseFloat("3.14"); //  3.14 (Number)
2parseFloat(" 120.5 kg"); // 120.5 (Ignores leading space, stops at 'k')
3parseFloat("100"); // 100 (Number)
4parseFloat("Version 2.0"); // NaN (Doesn't start with a digit or '.')

Why it matters

• Avoiding bugs: Implicit Coercion can lead to unexpected outcomes if not understood. '7' + 7 will give "77" instead of 14.
• Writing clean code: Explicit Coercion (Number(), String(), etc.) is easier to read and understand.
• Debugging effectively: Know why a value is not what you expect.
• Working with Input: User input (e.g., from forms) is often received as strings. You must explicitly convert this input to numbers (Number(), parseInt()) if you need to perform calculations.
• Conditional Logic: Understanding how values coerce to booleans (Boolean(), truthy/falsy) is fundamental for writing if statements and other control structures that rely on conditions being true or false.