DEV Community

Cover image for JavaScript Basic Type Conversions Cheat Sheet πŸ”₯
Daniel Krupnyi
Daniel Krupnyi

Posted on β€’ Edited on

48 9

JavaScript Basic Type Conversions Cheat Sheet πŸ”₯

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

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (6)

Collapse
 
franckgoth profile image
Franck β€’

Nice !

Collapse
 
danielkrupnyi profile image
Daniel Krupnyi β€’

Glad you like it!

Collapse
 
geminii profile image
Jimmy β€’

Excellent πŸ‘Œ

Collapse
 
danielkrupnyi profile image
Daniel Krupnyi β€’

Thanks! Glad you liked it!

Collapse
 
aalphaindia profile image
Pawan Pawar β€’

Good one!!

Collapse
 
danielkrupnyi profile image
Daniel Krupnyi β€’

Thank you! πŸŽ‰

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay