Change data types in Javascript

Tram Ho

Typically, operators and functions will automatically convert the type of value to true.

For example, alert will automatically convert any data type to string to display them, mathematical operators will automatically convert to type number to perform calculations.

However, in many cases we want to convert the type of data type we want. In this article we will learn about ways to change data types.

String Conversion

1. String ()

When we need to convert the type of a value to a string we can use String() :

2. toString ()

In addition to using String() , we seem to be more familiar with toString() , which will also cast string values:

3. Use the plus operator “+”

When using operators, we must pay special attention to the + operator when operands are of type string . When we use the + operator, one of the operands is of type string , Javascript will try to cast the other type to the string . Let’s look at an example below:

Numeric Conversion

1. Number ()

When we want to convert from a different value to a value of type number , we can use Number() :

2. parseInt () / parseFloat ()

  • parseInt () converts the type of a string to number but in the interger form (integer)

    parseInt () will return the first number in the string value, if that string cannot be converted into a number , it will return NaN. Consider the following example:

  • parseFloat () will convert the type of a string to type number but in the form of float (real number)

    parseFloat () is almost the same as parseInt (). Consider the following example:

3. Using the “+” operator

Why just then on we mentioned the use + to switch the type of string that below we use it to switch the type of number . Let’s see the example below:

When we add + and before the value, it converts to the number type unlike when we use + in an operation.

And it also returns the same results as using Number() in specific cases:

In addition, when we calculate using the -, *, /, %, ** operators, Javascript will also try to convert the type of number terms to number .

Boolean Conversion

Often when writing Javascript code we rarely cast values ​​to Boolean type but often let JavaScript implicitly cast the style, for example as follows:

In the above code, we can see that Javascript has automatically implicitly cast the type of x in the if to Boolean to run the if .

However, in many cases when we want to get its Boolean value to be strict equal or need the function to return true or false , we will use Boolean() :

The values ​​when cast to Boolean return false : 0, '', false, null, undefined, NaN . These values ​​are also called falsy values in Javascript.

In addition to the values ​​above, the remaining values ​​return true .

Object Conversion

As we learned above, when switching styles from object to other types such as:

  • string : [object Object]
  • number : NaN
  • boolean : true

So how do we convert type from object to primitive data types in the way we most want.

When we cast an object to string or number , Javascript will try to find and call 3 object methods as follows:

  1. Call obj[Symbol.toPrimitive](hint) – with symbolic key is Symbol.toPrimitive , if this method exists.
  2. Based on the hint , if it’s a string , it will try to call the method obj.toString() first and obj.valueOf() later if obj.toString() doesn’t exist.
  3. If hint is number , it will try to call obj.valueOf() first and obj.toString() later.

Symbol.toPrimitive

Let’s look at an example:

Symbol.toPrimitive will allow us to specify the return value via hint .

toString / valueOf

Methods toString and valueOf 2 old methods, otherwise find Symbol.toPrimitive the JavaScript will try to call them in order:

  • toString then valueOf if hint is string
  • valueOf then go toString if hint is different from string

By default, for a simple object:

  • toString method returns a string: "[object Object]" .
  • valueOf method returns the object itself.

So we want the return value to be our desired value like using Symbol.toPrimitive , we will need to use the combination of toString and valueOf as follows:

 

Epilogue

So we have learned how to change data types in Javascript. Because knowledge is endless, in this article, it is inevitable that there are mistakes and errors, hope everyone will understand that if you give the suggestions below so you can give more quality articles.

Thank you everyone for reading the article.

References

https://javascript.info/type-conversions

https://javascript.info/operators

https://javascript.info/object-toprimitive

Share the news now

Source : Viblo