DEV Community

Kemi Owoyele
Kemi Owoyele

Posted on • Updated on

JavaScript data type conversion

Data type conversion is a process in JavaScript where values are converted from one type to another. This can be done automatically, where JavaScript handles the conversion by itself or manually, where the programmer converts the data types using operators and functions.
It is crucial that programmers understand data types and how they can be converted. This will help them to avoid unforeseen errors, and ensure that codes are easier to maintain and are more reliable.

Data types in JavaScript

There are two major data types in JavaScript. They are;

  1. Primitive data types and;
    I. Number
    II. String
    III. Boolean
    IV. Undefined
    V. Null
    VI. Symbol
    VII. bigInt

  2. Non-primitive or object types
    I. Objects
    II. Arrays
    III. Functions

What is data type conversion?

Data type conversion means changing the data type of a JavaScript value. There are two ways of changing data types in JavaScript; one way is when the programmer manually converts the data type of a value. This is also known as type casting or explicit data conversion. The second approach to data type conversion is performed automatically by the compiler, usually done when operations or comparisons involves more than one data type. This is known as type coercion or implicit data conversion.

Explicit data conversion:

Sometimes, to avoid unexpected result or to ensure that the outcome of a program is outputted in the correct data type, programmers can manually convert data from one type to another in JavaScript.

Converting values to number:

To convert a data type to number,
Use Number() method.
Eg.

Let example1 = “456”;
Number(example1); // 456

Enter fullscreen mode Exit fullscreen mode

The Number() method converts numeric strings to the number in the string.

let example2 = "i am a number";
Number(example2) // NaN 

Enter fullscreen mode Exit fullscreen mode

The Number() method converts text strings to NaN (not a number).

let example3 = true; 
Number(example3)  //1

let example4 = false; 
Number(example4)  //0

let example5 = null;
Number(example5);  // 0
let example6;
typeof example6 //   'undefined'
Number(example6) // NaN

Enter fullscreen mode Exit fullscreen mode

The Number() method converts Booleans to 1 and 0. 1 for true, and 0 for false. It also converts null to 0 and undefined to NaN.
Other methods for number type conversions include
parseInt(); returns an integer.
parseFloat(); returns a floating number.

Converting values to string:

To convert data types to string, use the String() or toString() methods.
Examples:

Let example1 = 1234;
String(example1) // ‘1234’
Let example2 = true;
example2.toString() // ‘true’
let example3;
String(example3)  // “undefined”
let example = 3+4;
String(example)
'7'
example
7

Enter fullscreen mode Exit fullscreen mode

Parsing the values into the String() function converts the outcome into a string.

Converting values to Boolean:

Boolean represent true or false values. In converting other data types to Boolean, these are some of the rules.
Numbers other than 0 converts to true;

Boolean(-10) // true
Boolean(10) //true

Enter fullscreen mode Exit fullscreen mode

Number 0 converts to false;

Boolean(0)  // false
Enter fullscreen mode Exit fullscreen mode

Undefined values convert to false;

Let x;
Boolean(x); // false

Enter fullscreen mode Exit fullscreen mode

Null converts to false;

Boolean(null)  // false
Enter fullscreen mode Exit fullscreen mode

Empty strings converts to false;

Boolean("") // false
Enter fullscreen mode Exit fullscreen mode

Strings with numbers or text inside converts to true.

Boolean("0")  // true
Boolean("text")  // true


Enter fullscreen mode Exit fullscreen mode

Implicit Data Conversion.

JavaScript is a dynamically typed language. This means that the language does not require programmers to specify data types as variables are declared. Instead, JavaScript automatically determines the data types of the values. A proper understanding of how JavaScript does this is important to programmers for writing maintainable and reliable code. Some of the applicable rules in JavaScript type coercion include;
• Plus sign operator (+) combined with a string is treated as a concatenation sign.

10 + "10"  //   “1010”

10 + "example"   //  '10example'

true + " example"  //    'true example'

Enter fullscreen mode Exit fullscreen mode

• Combining numbers with operators (-, *, /, %) will convert the outcome to number.

10 - "10"    // 0
10 – true   // 9

10 * false // 0

10/undefined   // NaN

10-null       // 10

10 % "10"  // 0

10 % "sample text"  // NaN

10 - "sample text" // NaN


Enter fullscreen mode Exit fullscreen mode

• Logical operations (&&, ||, !), converts values to Boolean based on their truthy or falsy equivalence.

In logical operations (&&, ||, !), the conversion follows a truthy and falsy hierarchy:
a) Numbers apart from 0, non-empty strings, and objects are considered truthy.
b) Zero, empty strings, null, undefined, NaN, and false are considered falsy.
c) Values are implicitly converted based on this hierarchy (e.g., "" || true evaluates to true).

conclusion

Programmers should take note of how JavaScript converts data implicitly so as to avoid surprises should the outcomes present itself in your code. Explicit conversion methods should be used to ascertain what data types the outcomes will be.
Programmers should also note that when comparing values, strict equality operator ( === ) should be their preference. === checks for both equality of the value and the data types. Whereas with == operator, only values are checked. Hence, “10” == 10 will evaluate as true but if the data types were checked, they are not equal as one is a string and the other is a number.

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

You've missed BigInt in your list of primitive data types.

Collapse
 
kemiowoyele1 profile image
Kemi Owoyele

thank you.