Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What is JavaScript type coercion?
Type coercion in JavaScript refers to the automatic conversion of values from one data type to another. This happens implicitly when JavaScript needs to perform operations between different types.
How Type Coercion Works
JavaScript automatically converts types in certain situations, such as when using operators or comparing values. This can sometimes lead to unexpected results if you're not familiar with the coercion rules.
String Coercion Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Coercion Example</title>
</head>
<body>
<h1>JavaScript Type Coercion</h1>
<p>Number: <span id="number">22</span></p>
<button onclick="demonstrateCoercion()">Add 5 to "22"</button>
<p id="result" style="color: green; font-weight: bold;"></p>
<script>
function demonstrateCoercion() {
const numberStr = "22";
const result = numberStr + 5;
document.getElementById("result").innerHTML =
`"22" + 5 = ${result} (Result is a ${typeof result})`;
}
</script>
</body>
</html>
Common Type Coercion Examples
// String concatenation (+ operator with strings)
console.log("22" + 5); // "225" (number 5 coerced to string)
console.log(22 + "5"); // "225" (number 22 coerced to string)
// Arithmetic operations (-, *, /, % convert to numbers)
console.log("22" - 5); // 17 (string "22" coerced to number)
console.log("22" * 2); // 44 (string "22" coerced to number)
// Boolean coercion
console.log(Boolean("")); // false (empty string)
console.log(Boolean("hello")); // true (non-empty string)
console.log(Boolean(0)); // false (zero)
console.log(Boolean(1)); // true (non-zero number)
225 225 17 44 false true false true
Comparison Coercion
// Loose equality (==) performs type coercion
console.log("5" == 5); // true (string coerced to number)
console.log(true == 1); // true (boolean coerced to number)
console.log(false == 0); // true (boolean coerced to number)
// Strict equality (===) does NOT perform coercion
console.log("5" === 5); // false (different types)
console.log(true === 1); // false (different types)
true true true false false
Type Coercion Rules
| Operation | Coercion Rule | Example |
|---|---|---|
| String + Any | Convert to string | "5" + 3 = "53" |
| Arithmetic (-, *, /) | Convert to number | "5" - 2 = 3 |
| Boolean context | Convert to boolean | if ("hello") ? true |
Best Practices
To avoid unexpected behavior from type coercion:
// Use explicit conversion
console.log(Number("22") + 5); // 27 (explicit number conversion)
console.log(String(22) + "5"); // "225" (explicit string conversion)
// Use strict equality
console.log("5" === 5); // false (no coercion)
console.log(parseInt("5") === 5); // true (explicit conversion first)
27 225 false true
Conclusion
JavaScript type coercion automatically converts values between types during operations. While convenient, it can cause unexpected results. Use explicit type conversion and strict equality (===) to write more predictable code.
Updated on: 2026-03-15T23:18:59+05:30
269 Views
Advertisements