Javascript Type Conversion And Coercion Complete Guide

Complete Examples, Step by Step for Beginners: JavaScript Type Conversion and Coercion

Table of Contents

1. Implicit Type Conversion (Type Coercion)
2. Explicit Type Conversion

1. Implicit Type Conversion (Type Coercion)

Implicit type conversion occurs when JavaScript automatically converts one data type to another to perform operations on different types of data.

Example 1: Complex Type Coercion with Strings and Numbers

// Adding a string and a number
let str = "Hello";
let num = 123;
let result = str + num;

console.log(result); // Output: Hello123
console.log(typeof result); // Output: string

Explanation:

• When adding a string to a number, JavaScript converts the number to a string first, then concatenates the two strings together.

Example 2: Boolean to Number

let bool = true;
let number = 5;

// Adding boolean to a number
let result = bool + number;

console.log(result); // Output: 6 (true is converted to 1)
console.log(typeof result); // Output: number

Explanation:

• The boolean true is coerced to the number 1 during the addition.

Example 3: Any Type to String

let myNumber = 42;
let myBoolean = false;

// Converting number and boolean to strings
console.log("" + myNumber); // Output: "42"
console.log("" + myBoolean); // Output: "false"

Explanation:

• When concatenating a string with any other data type, JavaScript converts that other data type into a string.

Example 4: Non-numeric Strings to Numbers

let str = "123";
let num = "456";

// Implicit conversion to perform arithmetic operations
console.log(str + num); // Output: "123456"
console.log(str - num); // Output: -333 (str and num are implicitly converted to numbers)

let truethyStr = "100";
let falsyStr = "NaN";
console.log(truethyStr - 0); // Output: 100
console.log(NaN - falsyStr); // Output: NaN (falsyStr is converted to NaN)

Explanation:

• In arithmetic operations, JavaScript attempts to convert strings to numbers. Strings that contain valid numbers are converted accordingly; however, non-numeric strings become NaN.

2. Explicit Type Conversion

Explicit type conversion, also known as type casting, involves manually converting data from one type to another using built-in JavaScript methods.

Example 1: Number to String

let number = 42;

// Convert number to string using String() function
let str1 = String(number);
console.log(str1); // Output: "42"

// Convert number to string using toString() method
let str2 = number.toString();
console.log(str2); // Output: "42"

// Convert number to string using template literals
let str3 = `${number}`;
console.log(str3); // Output: "42"

Explanation:

• Multiple methods can be used to convert a number to a string.

Example 2: String to Number

let str1 = "100.5";
let str2 = "42";
let str3 = "hello";

// Convert string to number using Number() function
let num1 = Number(str1);
console.log(num1); // Output: 100.5

// Convert string to number using parseInt() function (integer values)
let intNum = parseInt(str2);
console.log(intNum); // Output: 42

// Convert non-numeric string to number
let invalidNum = Number(str3);
console.log(invalidNum); // Output: NaN

// Convert string to number using the unary plus (+) operator
let num2 = +str2;
console.log(num2); // Output: 42

Explanation:

• The Number() function converts strings that represent valid numbers into their respective numeric forms.
• parseInt() only extracts the integer part of a string.
• Non-numeric strings are converted to NaN using the Number() function.

Example 3: Boolean to Number

let bool1 = true;
let bool2 = false;

// Convert boolean to number using Number() function
let num1 = Number(bool1);
let num2 = Number(bool2);

console.log(num1); // Output: 1
console.log(num2); // Output: 0

Explanation:

• The Number() function converts true to 1 and false to 0.

Example 4: String to Boolean

let str1 = "hello";
let str2 = "";
let str3 = "0";
let str4 = "false";

// Convert string to boolean using Boolean() function
let bool1 = Boolean(str1);
console.log(bool1); // Output: true

let bool2 = Boolean(str2);
console.log(bool2); // Output: false (empty string is falsy)

let bool3 = Boolean(str3);
console.log(bool3); // Output: true (non-empty string is truthy)

let bool4 = Boolean(str4);
console.log(bool4); // Output: true (non-empty string is truthy)

Explanation:

• The Boolean() function converts strings based on their truthy or falsy values.
• Non-empty strings, even those that contain "0" or "false", are considered truthy.

Example 5: Any Type to Boolean

let num1 = 0;
let num2 = 1;
let num3 = -100;
let str1 = "";
let str2 = "world";
let obj = {};
let undef = undefined;
let nul = null;

console.log(Boolean(num1)); // Output: false (0 is falsy)
console.log(Boolean(num2)); // Output: true (non-zero numbers are truthy)
console.log(Boolean(num3)); // Output: true (non-zero numbers are truthy)
console.log(Boolean(str1)); // Output: false (empty string is falsy)
console.log(Boolean(str2)); // Output: true (non-empty string is truthy)
console.log(Boolean(obj)); // Output: true (objects are truthy)
console.log(Boolean(undef)); // Output: false (undefined is falsy)
console.log(Boolean(nul)); // Output: false (null is falsy)

Explanation:

• Explicit conversion to boolean can be achieved using the Boolean() function.
• Different types of values are classified as either truthy or falsy in JavaScript.

Summary

• Implicit Type Conversion (Type Coercion): JavaScript automatically converts data types during operations.
  • Can lead to unexpected results if not understood properly.
• Explicit Type Conversion: Manually convert data types using built-in functions like String(), Number(), Boolean(), etc.
  • Provides more control over the type conversions in a program.