Data Type Conversion

Data type conversion, often referred to as typecasting, is a fundamental aspect of programming in JavaScript. Given that JavaScript is a loosely typed language, understanding how to convert data from one type to another is essential. This section will delve into the various ways of converting data types, such as converting strings to numbers, numbers to strings, and other important conversions. We'll explore both implicit and explicit conversions and how JavaScript behaves in different scenarios.

Desired Outcomes:

  • Learn the difference between implicit and explicit conversion in JavaScript.
  • Master methods like parseInt(), parseFloat(), and the unary plus (+) operator for converting strings to numbers.
  • Learn how to convert numbers to strings using methods like toString() and string concatenation.
  • Understand the rules for converting various data types to booleans.

Since JavaScript is a dynamic or untyped programming language, data type conversion is performed automatically without the need for declaring a data type. For example, the operation: "12"+"34" results in "1234" because it is a string, while the operation 12+34 results in 46 because it is an integer value.

In the case of a combination of a number and a string, JavaScript converts the number into a string. For example, 15+"Some text" results in "15Some text".

var variable1 = "12" + "34"; // "1234"
var variable2 = 12 + 34 // 46
var variable3 = 15 + "Some text" // "15Some text"

Implicit vs. Explicit Conversion

Type conversion in JavaScript can be implicit or explicit. Implicit conversion (coercion) happens automatically when operators are used with values of different types. Explicit conversion (casting) occurs when you deliberately convert values from one type to another.

  • Implicit Conversion: Occurs when JavaScript automatically converts types behind the scenes. For example, adding a number to a string will convert the number to a string.
  • Explicit Conversion: Involves using functions to convert types. For instance, using Number() to convert a string to a number.
// Implicit Conversion
let result = '3' + 2; // '3' + '2' => '32'

// Explicit Conversion
let number = Number('3');
let sum = number + 2; // 3 + 2 => 5

Converting Strings to Numbers

Converting strings to numbers is a common task in JavaScript, especially when dealing with user input, which is typically received as a string.

Methods:

  • parseInt(): Converts string to an integer.
  • parseFloat(): Converts string to a floating-point number.
  • Unary Plus Operator (+): A quick way to convert strings to numbers.
let integer = parseInt("123");
let float = parseFloat("123.45");
let quickConversion = +"456"; // equivalent to Number("456")

console.log(integer); // Output: 123
console.log(float); // Output: 123.45
console.log(quickConversion); // Output: 456

Converting Numbers to Strings

Converting numbers to strings is often needed in JavaScript, for instance, when you need to display a number in a user interface.

Methods:

  • toString(): Converts a number to a string.
  • String Concatenation: Using the + operator with an empty string.
let num = 123;
let stringFromNum = num.toString();
let stringConcat = num + "";

console.log(stringFromNum); // Output: "123"
console.log(stringConcat); // Output: "123"

Working with Boolean Conversions

In JavaScript, truthy and falsy values are often used in conditional statements. Understanding how values convert to booleans is crucial.

Truthy and Falsy:

  • Falsy values: false, 0, -0, 0n, "", null, undefined, NaN.
  • Truthy values: All values not on the falsy list.
let truthyCheck = !!1; // true
let falsyCheck = !!0; // false

console.log(truthyCheck); // Output: true
console.log(falsyCheck); // Output: false

Handling Undefined and Null

The undefined and null are special values in JavaScript. Understanding their behavior in type conversions is important for debugging and writing reliable code.

Key Points:

  • undefined: Indicates an uninitialized variable, or a missing value or parameter.
  • null: Used to represent an intentional absence of any object value.
  • Converting to String: Both convert to "undefined" or "null" respectively.
  • Converting to Number: undefined converts to NaN, while null converts to 0.
let undefinedValue;
let nullValue = null;

console.log(String(undefinedValue)); // Output: "undefined"
console.log(String(nullValue)); // Output: "null"

console.log(Number(undefinedValue)); // Output: NaN
console.log(Number(nullValue)); // Output: 0
var person; // The value is undefined, the data type is undefined

It is possible to empty any variable by assigning the undefined value to that variable.

person = undefined; // The value is undefined, the data type is undefined

Updated on:

Part of our complete: JavaScript Fundamentals guide

Want exercises and real projects for this lesson? Get the full course.