⬅ Previous Topic
JavaScript Data TypesNext Topic ⮕
JavaScript Operators⬅ Previous Topic
JavaScript Data TypesNext Topic ⮕
JavaScript OperatorsJavaScript is a loosely typed language. This means you can assign different types of values to the same variable without any error. But how does JavaScript handle the change of types under the hood? That's where Type Conversion comes in.
There are two types of type conversions in JavaScript:
JavaScript often converts types behind the scenes to make the code work, which can sometimes lead to unexpected results. This is called type coercion.
let result = 5 + "5";
console.log(result);
console.log(typeof result);
55
string
Explanation: When a number is added to a string, JavaScript converts the number to a string and performs string concatenation instead of arithmetic addition.
let value = true + 2;
console.log(value);
3
Explanation: The boolean true
is implicitly converted to 1
, so the result becomes 1 + 2 = 3
.
console.log(null + 1);
console.log(undefined + 1);
1
NaN
Explanation: null
is treated as 0
in numeric contexts, but undefined
becomes NaN
(Not a Number).
This is when you intentionally convert data from one type to another using built-in functions like String()
, Number()
, and Boolean()
.
let num = 100;
let str = String(num);
console.log(str);
console.log(typeof str);
100
string
let str = "42";
let num = Number(str);
console.log(num);
console.log(typeof num);
42
number
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));
false
true
false
Explanation: Falsy values like 0
, ""
, null
, undefined
, and NaN
convert to false
. All other values are considered true
.
let str = "99";
let num = +str;
console.log(num);
console.log(typeof num);
99
number
Explanation: The unary +
operator is a quick way to convert strings to numbers.
console.log({} + []);
console.log([] + {});
[object Object]
[object Object]
Explanation: When used with +
, both objects and arrays are converted to strings if one operand is not numeric.
console.log(0 == "0");
console.log(false == "false");
true
false
Explanation: The double equals ==
performs type coercion. In the first case, both values are coerced to number, hence 0 == 0
. In the second, false
is coerced to 0, but "false" remains a string.
===
and !==
over ==
to avoid implicit coercion bugs.
let input = "";
if (input) {
console.log("User provided input");
} else {
console.log("No input given");
}
No input given
Explanation: An empty string is falsy, so the else block executes.
Type conversion is a foundational part of JavaScript’s flexibility, but it can also lead to confusion if not understood properly. By mastering both implicit and explicit conversions, you'll write more predictable and robust code.
Always be mindful of what type your variables are, and don’t hesitate to be explicit when needed. It’s not just cleaner — it’s safer.
⬅ Previous Topic
JavaScript Data TypesNext Topic ⮕
JavaScript OperatorsYou can support this website with a contribution of your choice.
When making a contribution, mention your name, and programguru.org in the message. Your name shall be displayed in the sponsors list.