DEV Community

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

Posted on β€’ Edited on

49 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

Image of Quadratic

AI, code, and data connections in a familiar spreadsheet UI

Simplify data analysis by connecting directly to your database or API, writing code, and using the latest LLMs.

Try Quadratic free

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! πŸŽ‰

Neon image

Set up a Neon project in seconds and connect from a Next.js application

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

Get started β†’

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay