DEV Community

loading...
Cover image for JavaScript Basic Type Conversions Cheat Sheet πŸ”₯

JavaScript Basic Type Conversions Cheat Sheet πŸ”₯

danielkrupnyy profile image Daniel Krupnyy ・2 min read

Table Of Contents

Type conversion can be explicit or implicit.

value = Number('23') // explicit
value = 5 + '25' // implicit
Enter fullscreen mode Exit fullscreen mode

Value type checking

console.log(typeof value);
Enter fullscreen mode Exit fullscreen mode

String conversion

Number to string:

value = String(10); /* => '10' */
value = String(10 + 40); /* => '50' */
value = (10 + 40).toString(); /* => '50' */
value = new String(10 + 20); /* => '30' */
Enter fullscreen mode Exit fullscreen mode

Boolean to string

value = String(true); /* => 'true' */
value = String(false); /* => 'false' */
Enter fullscreen mode Exit fullscreen mode

Array to string

value = String([1, 2, 3]); /* => '1,2,3' */
value = String([ ]); /* => '' */ 
Enter fullscreen mode Exit fullscreen mode

Object to string

value = String({name: "Daniel"}); /* => [object Object] */
Enter fullscreen mode Exit fullscreen mode

Conversion to string occurs when any data type is concatenated with a string (implicit conversion):

value = 30 + ' ' + 30; /* => 30 30 */ // Space is considered a symbol.
value = 30 + '' + undefined; /* => 30undefined */
Enter fullscreen mode Exit fullscreen mode

Mathematical operations convert Empty String to zero:

value = 30 - ''; /* => 30 */ 
value = 30 - 'text'; /* => NaN */ // If the string is not empty, then we will get NaN - calculation error.
value = 30 - '5'; /* => 25 */ // If we write a number in a string, we will get a number type
Enter fullscreen mode Exit fullscreen mode

Boolean type conversion

In mathematical operations, true is converted to one and false to zero:

value = true + 5; /* => 6 */
value = false + 5; /* => 5 */
Enter fullscreen mode Exit fullscreen mode

String to boolean

value = Boolean('hello'); /* => true */ // Any non-empty string will be considered true.
value = Boolean(' '); /* => true */ 
value = Boolean(''); /* => false */ // An empty string will be considered false.
Enter fullscreen mode Exit fullscreen mode

Number to boolean

value = Boolean(-123); /* => true */ // Any number, both positive and negative, will be considered true.
value = Boolean(123); /* => true */
value = Boolean(0); /* => false */ // Zero counts as false
Enter fullscreen mode Exit fullscreen mode

Undefined to boolean

value = Boolean(undefined); /* => false */
Enter fullscreen mode Exit fullscreen mode

Null to boolean

value = Boolean(null); /* => false */
Enter fullscreen mode Exit fullscreen mode

Object to boolean

value = Boolean({}); /* => true */ // An empty object is considered true.
Enter fullscreen mode Exit fullscreen mode

Array to boolean

value = Boolean([]); /* => true */ // An empty array is considered true.
Enter fullscreen mode Exit fullscreen mode

Number type conversion

String to number

value = Number('23'); /* => 23 */
value = Number('string...lalala'); /* => NaN */ 
value = parseInt(' 203px'); /* => 203 */ // The parseInt function reads a number from a string and removes all characters after it, but if there are characters before the number (except for a space), then it will output NaN. Serves for whole numbers.
value = parseFloat('203.212px'); /* => 203.212 */ // Works the same as parseInt, but for fractional numbers.
Enter fullscreen mode Exit fullscreen mode

Boolean to number

value = Number(true); /* => 1 */
value = Number(false); /* => 0 */
Enter fullscreen mode Exit fullscreen mode

Null to number

value = Number(null); /* => 0 */
Enter fullscreen mode Exit fullscreen mode

Array to number

value = Number([1, 2, 3]); /* => NaN */ // NaN refers to numbers.
Enter fullscreen mode Exit fullscreen mode

Null type conversion

Converts to zero for mathematical operations:

value = null + 5; /* => 5 */
Enter fullscreen mode Exit fullscreen mode

Undefined type conversion

Converts to NaN for mathematical operations:

value = false + undefined; /* => NaN */
Enter fullscreen mode Exit fullscreen mode

Thank's for reading! ❀️
You can also check out my redux basics cheat sheet

Discussion (6)

pic
Editor guide
Collapse
franckgoth profile image
Franck

Nice !

Collapse
danielkrupnyy profile image
Daniel Krupnyy Author

Glad you like it!

Collapse
geminii profile image
Jimmy

Excellent πŸ‘Œ

Collapse
danielkrupnyy profile image
Daniel Krupnyy Author

Thanks! Glad you liked it!

Collapse
aalphaindia profile image
Pawan Pawar

Good one!!

Collapse
danielkrupnyy profile image
Daniel Krupnyy Author

Thank you! πŸŽ‰