Type Conversion in JavaScript

Overview

1. Type Conversion (Explicit Conversion)

Common Type Conversion Methods

To String

String(): Converts a value to a string.

let num = 42;
let str = String(num); // "42"
console.log(typeof str); // "string"

javascript

toString(): A method available on most objects (except null and undefined).
```
let num = 42;
let str = num.toString(); // "42"
```
javascript

To Number

Number(): Converts a value to a number.

let str = "123";
let num = Number(str); // 123
console.log(typeof num); // "number"

// Non-numeric strings result in NaN
console.log(Number("hello")); // NaN

javascript

parseInt(): Parses a string and returns an integer.

let str = "123.45";
let int = parseInt(str); // 123
console.log(parseInt("123px"));  // 123

javascript

parseFloat(): Parses a string and returns a floating-point number.

let str = "123.45";
let float = parseFloat(str); // 123.45
console.log(parseFloat("12.34px")); // 12.34

javascript

To Boolean

Boolean(): Converts a value to a boolean.

console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true

javascript

2. Type Coercion (Implicit Conversion)

Common Coercion Scenarios

String Concatenation with +

When one operand is a string, the other is coerced to a string.

let num = 5;
let str = "The number is " + num; // "The number is 5"
console.log(typeof str); // "string"

javascript

Arithmetic Operations (Except +)

Operands (-, *, /, %) are coerced to numbers.

let str = "10";
let result = str - 5; // 5 (string "10" coerced to number 10)
console.log(typeof result); // "number"

javascript

Equality Operator (==)

The loose equality operator performs type coercion before comparison.

console.log(5 == "5"); // true (string "5" coerced to number 5)
console.log(false == 0); // true (false coerced to 0)
console.log(null == undefined); // true (special case)

javascript

Strict Equality Operator (===)

No coercion occurs; both type and value must match.

console.log(5 === "5"); // false (different types)
console.log(false === 0); // false

javascript

Boolean Coercion in Conditionals

Non-boolean values are coerced to true or false in logical contexts.

if ("hello") {
  console.log("Truthy"); // Executes (non-empty string is true)
}
if (0) {
  console.log("Falsy"); // Skipped (0 is false)
}

javascript

Truthy and Falsy Values

Coercion Rules and Precedence

JavaScript follows specific rules when coercing types:

String + Anything: Results in string concatenation.
Number and String in -, *, /, %: String is coerced to a number.
Objects: Converted to primitives via toString() or valueOf() methods.
```
let obj = { valueOf: () => 42 };
console.log(obj + 1); // 43
```
javascript

The Unary `+` and `-` Operators

+: Attempts to convert its operand to a number.
```
console.log(+"123"); // 123
console.log(+"abc"); // NaN
```
javascript
-: Converts to a number and negates it.
```
console.log(-"123"); // -123
```
javascript

Best Practices

Use Explicit Conversion When Possible: Avoid relying on coercion for critical logic to reduce bugs.
```
let str = "42";
let num = Number(str); // Explicit, predictable
```
javascript
Use === Over ==: Strict equality avoids unexpected coercion.
Understand Context: Know when coercion occurs (e.g., if statements, arithmetic).
Test Edge Cases: Values like null, undefined, and NaN can behave unexpectedly.

Examples and Pitfalls

Example 1: Unexpected Coercion

console.log("2" + 2); // "22" (string concatenation)
console.log("2" * 2); // 4 (string coerced to number)

javascript

Example 2: Array Coercion

console.log([] + []); // "" (empty arrays coerce to empty strings)
console.log([] + {}); // "[object Object]" (array to "", object to string)

javascript

Pitfall: `NaN` Detection

let result = Number("abc"); // NaN
console.log(result === NaN); // false (NaN is not equal to itself)
console.log(isNaN(result)); // true (use this instead)

javascript

Summary Table

Operation/Type	String	Number	Boolean
`String()`	Same	e.g., `"42"`	e.g., `"true"`
`Number()`	e.g., `123` or `NaN`	Same	`1` or `0`
`Boolean()`	`true` (if non-empty)	`true` (if not 0)	Same
`+` (with string)	Concatenation	Concatenation	Concatenation
`-`, `*`, `/`	Coerces to number	Number operation	Coerces to number