In short
Type conversion in JavaScript turns one type into another, like text into a number. Learn implicit and explicit conversion, truthy and falsy values, and why === beats ==. What is type conversion?
Type conversion in JavaScript turns one type into another, like text into a number. Learn implicit and explicit conversion, truthy and falsy values, and why === beats ==.
What is type conversion?
Type conversion means changing a value from one type to another, for example from the string '25' to the number 25. It happens in two ways:
- Explicit conversion: you ask for it on purpose, with functions like
Number()orString(). - Implicit conversion (also called type coercion): JavaScript does it automatically, without asking, when you mix types.
Implicit conversion is the source of many beginner surprises:
console.log('5' + 2); // Output: 52 (+ with a string joins text)
console.log('5' - 2); // Output: 3 (- only works on numbers, so '5' becomes 5)
console.log('5' * '2'); // Output: 10
console.log('10' / 2); // Output: 5
console.log(true + 1); // Output: 2 (true becomes 1)
console.log('apple' - 1); // Output: NaN
The + operator is special: if either side is a string, it joins them as text. The other math operators always try to turn both sides into numbers. Since this is easy to forget, it's best to convert values yourself.
Explicit conversion with String(), Number() and Boolean()
These three functions convert a value to the type in their name:
// To string
console.log(String(42)); // Output: 42 (now a string)
console.log(String(true)); // Output: true (now a string)
console.log(String(null)); // Output: null (now a string)
// To number
console.log(Number('42')); // Output: 42
console.log(Number('')); // Output: 0
console.log(Number(' 7 ')); // Output: 7 (spaces are ignored)
console.log(Number('hello')); // Output: NaN
console.log(Number(true)); // Output: 1
console.log(Number(false)); // Output: 0
console.log(Number(null)); // Output: 0
console.log(Number(undefined)); // Output: NaN
// To boolean
console.log(Boolean('hello')); // Output: true
console.log(Boolean('')); // Output: false
console.log(Boolean(0)); // Output: false
console.log(Boolean(25)); // Output: true
Here is a realistic example. The user types their age into a form, and you want to calculate their age next year:
const ageInput = '29'; // form values are always strings
console.log(ageInput + 1); // Output: 291 (wrong!)
console.log(Number(ageInput) + 1); // Output: 30 (correct)
Common mistake: Forgetting that
Number('')is0. If a user leaves a form field empty,Number()gives0, not an error. Check for empty input before converting.
Truthy and falsy values in JavaScript
When JavaScript needs a true/false answer (for example in an if statement, which you'll learn next), it converts the value to a boolean. Values that become false are called falsy. Everything else is truthy.
There are only eight falsy values. Learn this list by heart:
| Falsy value | What it is |
|---|---|
false | The boolean false |
0 | The number zero |
-0 | Negative zero |
0n | BigInt zero |
'' | An empty string (also "" and an empty template literal) |
null | Empty on purpose |
undefined | No value |
NaN | Not a Number |
Every other value is truthy. Some truthy values surprise beginners:
console.log(Boolean('0')); // Output: true (a string with a character in it)
console.log(Boolean('false')); // Output: true (also just a non-empty string)
console.log(Boolean(' ')); // Output: true (a space is a character)
console.log(Boolean([])); // Output: true (an empty array)
console.log(Boolean({})); // Output: true (an empty object)
console.log(Boolean(-5)); // Output: true (any number except 0 and NaN)
Truthy and falsy values let you write short checks, like "if the username is not empty". You'll use this a lot in the next module.
What is the difference between == and === in JavaScript?
JavaScript has two ways to check if two values are equal:
===is strict equality. It checks if the values are the same and the same type. No conversion happens.==is loose equality. If the types are different, it converts them first, then compares. The conversion rules are complicated and full of surprises.
There are matching "not equal" operators: !== (strict) and != (loose).
console.log(5 === 5); // Output: true
console.log(5 === '5'); // Output: false (number vs string)
console.log(5 == '5'); // Output: true ('5' is converted to 5)
console.log(0 == ''); // Output: true (surprise!)
console.log(0 == false); // Output: true
console.log('0' == false); // Output: true
console.log(null == undefined); // Output: true
console.log(null === undefined); // Output: false
console.log(NaN === NaN); // Output: false (NaN is never equal to anything)
console.log(5 !== '5'); // Output: true
Look at 0 == '' and '0' == false. With ==, very different values are treated as equal. These rules cause real bugs in real websites.
Always use === and !==
The rule is simple: always use === and !==. They do exactly what you expect: same value, same type. If you need to compare values of different types, convert them yourself first, so your code clearly shows what you mean:
const enteredCode = '1234'; // from a form, so it's a string
const correctCode = 1234; // a number
console.log(enteredCode === correctCode); // Output: false
console.log(Number(enteredCode) === correctCode); // Output: true
Tip: Many code editors and tools (like ESLint) can warn you whenever you write
==by accident. It's a common, recommended rule in professional projects. You can read more about equality on MDN.
Practice exercise
Predict the result of each line before you run it in the console, then check: '3' + 4, '3' * 4, Boolean('0'), Boolean(0), Number(' '), 1 == '1', 1 === '1', null == 0. Then write code that takes const quantity = '3'; and const price = 4.5; and correctly logs the total 13.5.
Hint: for the total, convert quantity with Number() before multiplying. And yes, null == 0 is false, one more reason to avoid ==.
Key takeaways
- Explicit conversion (
Number(),String(),Boolean()) is clearer and safer than implicit conversion. - With
+, a string on either side makes JavaScript join text; other math operators convert to numbers. - There are eight falsy values:
false,0,-0,0n,'',null,undefinedandNaN. Everything else is truthy. ==converts types before comparing and can give surprising results.- Always use
===and!==.