JavaScript loves to play with data types. Sometimes it automatically converts them (like a magician pulling a rabbit out of a hat), and other times, you have to do it manually. Welcome to the world of Type Conversion!
1. Implicit Type Conversion (Type Coercion)
JavaScript tries to be helpful by automatically converting types when needed. But sometimes, it’s too helpful.
console.log("5" - 3); // 2 (String "5" is converted to a number!)
console.log("5" + 3); // "53" (Number 3 is converted to a string!)
console.log(true + 2); // 3 (true is converted to 1)
console.log(false + 10); // 10 (false is converted to 0)
console.log("10" / "2"); // 5 (Both strings are converted to numbers)
console.log("10px" - 2); // NaN (String contains non-numeric characters)
Unexpected JavaScript Magic:
console.log("5" * "2"); // 10 (Both strings converted to numbers)
console.log("5" - true); // 4 (true is converted to 1)
console.log("5" + false); // "5false" (false becomes a string)
console.log(null + 10); // 10 (null is converted to 0)
console.log(undefined + 5); // NaN (undefined cannot be converted)
Be careful—JavaScript might surprise you!
2. Explicit Type Conversion (Manual Conversion)
If you want predictable results, convert values manually using built-in functions.
a) Converting to a Number
Use Number(), parseInt(), or parseFloat().
console.log(Number("42")); // 42
console.log(parseInt("42px")); // 42 (ignores non-numeric characters)
console.log(parseFloat("3.14")); // 3.14
console.log(Number("Hello")); // NaN (Not a Number)
console.log(Number(" 10 ")); // 10 (Whitespace is ignored)
console.log(Number("10.99")); // 10.99
b) Converting to a String
Use String() or .toString().
console.log(String(100)); // "100"
console.log((42).toString()); // "42"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
c) Converting to a Boolean
Falsy values (false, 0, "", null, undefined, NaN) become false. Everything else becomes true.
console.log(Boolean(0)); // false
console.log(Boolean("Hello")); // true
console.log(Boolean([])); // true (an empty array is truthy!)
console.log(Boolean({})); // true (an empty object is truthy!)
console.log(Boolean("")); // false (Empty string is falsy)
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
3. Fun (and Weird) JavaScript Conversions
Some JavaScript conversions are just bizarre. Consider:
console.log([] + []); // "" (Empty string)
console.log([] + {}); // "[object Object]"
console.log({} + []); // 0 (Wait, what?!)
console.log([] - 1); // -1 (Empty array converted to 0)
console.log([1,2,3] + [4,5,6]); // "1,2,34,5,6" (Arrays are converted to strings and concatenated)
console.log(!!"false"); // true (Non-empty string is truthy)
console.log(!!"0"); // true (String "0" is truthy!)
Conclusion
JavaScript’s type conversion is powerful but unpredictable. Always convert manually when necessary to avoid unexpected results. And remember, just because JavaScript allows it doesn’t mean it’s a good idea!
0 Comments