09_Converting primitive datatypes in JavaScript

-

  • Although due to type coercion, JavaScript will automatically convert many values, it is often best practice to manually convert values between types in order to achieve expected results.
  • This article  will guide you through converting JavaScript’s primitive data types, including numbers, strings, and Booleans.

Implicit Conversion

As a programming language, JavaScript is very tolerant of unexpected values. Because of this, JavaScript will attempt to convert unexpected values rather than reject them outright. This implicit conversion is known as type coercion.
  • Some methods will automatically convert values in order to make use of them. The alert() method takes a string as its parameter, but it will automatically convert other types into strings. So, we can pass a number value to the method:
alert(8.5);
If we run the line above, the browser will return a pop-up alert dialog box that displays the 8.5 value except it will have been converted to a string in order to do so.
  • When using strings that can be evaluated to numbers with mathematical operators, you’ll find that JavaScript is able to handle the values by implicitly converting the strings to numbers, as shown in the examples below.


// Subtraction



"15" - "10";





Output










5



// Modulo



"15" % "10";





Output










5
However, not every operator will work as expected. 
  • The + operator is notably problematic as it can signify either addition or string concatenation.


// When working with strings, + stands for concatenation



"2" + "3";





Output










"23"
  • Since the + operator is multi-purpose, the string values of 2 and 3, despite being numerical strings, are concatenated to the string value of 23 rather than added together to be the number 5.
  •  it is often best to explicitly convert data types in your code as much as possible. This will help with managing input from users and handling errors.

Converting Values to Strings

Values can be explicitly converted to strings by calling either String() or n.toString().
With the String() function, let’s convert a Boolean value to a string by passing the value true into the parameters for String().
String(true);
When we do this, the string literal "true" will be returned.



Output










"true"
Alternatively, we can pass a number into the function.
String(49);
A string literal of that number will be returned.



Output










"49"
Let’s use the String() function with a variable. We’ll assign a number value to the variable odyssey and then use the typeof operator to check for type.

let odyssey = 2001;



console.log(typeof odyssey);





Output










number
At this point, the variable odyssey is assigned the numerical value of 2001, which we have confirmed to be a number.
Now, let’s reassign odyssey to its string equivalent and then use typeof to confirm that we have successfully converted the variable’s value from a number to a string.

odyssey = String(odyssey);  // "2001"



console.log(typeof odyssey);





Output










string
In the example above, we have confirmed that odyssey was reassigned to be equivalent to a string value following the data type conversion.
We can use n.toString() in a similar way. We can replace n with a variable:

let blows = 400;



blows.toString();
The variable blows will be returned as a string.



Output










"400"
Alternatively, we can put a value within parentheses rather than a variable with n.toString():

(1776).toString();          // returns "1776"



(false).toString();         // returns "false"



(100 + 200).toString();     // returns "300"
By using String() or n.toString() we are able to explicitly convert values of Boolean or number data types to string values in order to ensure that our code behaves as we anticipate.

Converting Values to Numbers

  • When converting values to a number data type, we’ll use the Number()method. Primarily, we’ll be converting strings of numerical text to numbers, but we can also convert Boolean values.
We can pass a string of a number to the Number() method:
Number("1984");
The string will be converted to a number and no longer be enclosed within quotation marks.



Output










1984
We can also assign a string to a variable and then convert it.

let dalmatians = "101";



Number(dalmatians);





Output










101
The string literal "101" was converted to the number 101 via its variable.
Strings of white spaces or empty strings will convert to 0.

Number(" ");    // returns 0



Number("");     // returns 0
Be aware that strings of non-numbers will convert to NaN which stands for Not a Number. This includes numbers separated by spaces.

Number("twelve");   // returns NaN



Number("20,000");   // returns NaN



Number("2 3");      // returns NaN



Number("11-11-11"); // returns NaN
For Boolean data types, false will evaluate to 0 and true will evaluate to 1.

Number(false);      // returns 0



Number(true);       // returns 1
The Number() method converts non-number data types to numbers.

Converting Values to Booleans

  • To convert numbers or strings to Boolean values, the Boolean() method is used. This can be useful for determining whether a user entered data into a text field or not, for example.
Any value that is interpreted as empty, like the number 0, an empty string, or values that are undefined or NaN or null are converted to false.

Boolean(0);         // returns false



Boolean("");        // returns false



Boolean(undefined); // returns false



Boolean(NaN);       // returns false



Boolean(null);      // returns false
Other values will be converted to true, including string literals composed of white space.

Boolean(2000);      // returns true



Boolean(" ");       // returns true



Boolean("Maniacs"); // returns true
Note that "0" as a string literal will convert to true since it is a non-empty string value:
Boolean("0");   // returns true
Converting numbers and strings to Boolean values can allow us to evaluate data within binary terms and can be leveraged for control flow in our programs.

Conclusion


This tutorial covered how JavaScript handles conversion of its primitive data types. Though due to type coercion, data types will implicitly convert in many cases, it is a good habit to explicitly convert data types in order to ensure that programs are functioning as expected.


 Undefined :  

  • Default value of uninitialized variables.
  • You shouldn’t assign undefined as value manually.
 Number:
  •     Never assumed by default 
  •    You can assign this is a value if you want to“reset” / “clear” a variable


  
NAN:
  •   Technically, it’s of type number and can therefore be used in calculations     
  •    It yields a new NaN  and it’s the result of invalid calculations  (e.g. 3 * ‘hi’) // NAN 


Comments

Post a Comment

Popular posts from this blog

JavaScript — Double Equals vs. Triple Equals - weird things on JavaScript

-
The Problem JavaScript has two  visually  similar, yet  very different , ways to test equality. You can test equality with  ==  or  === . Here are the differences: Triple Equals When using triple equals  ===  in JavaScript, we are testing for  strict  equality. This means both the  type  and the  value  we are comparing have to be the same. Lets look at a couple examples of strict equality. In this first example we’re comparing the  number  5 with the  number  5. As expected,  true  is returned. Both are  numbers , and both share the same  value  of 5. 5 === 5 // true With this in mind, we can look at two more examples that will return  true : 'hello world' === 'hello world' // true (Both Strings , equal values ) true === true // true (Both Booleans , equal values ) Awesome. Now lets take a look at some examples that will return  false : In this example we’ll comp...
Read more

06_Understanding Execution Context and Execution Stack in Javascript

-
Image
Let look inside js engine the things that execute our code and in the end ,it is all about our memory management and execution steps. For this we have two important concept: The heap memory is our long term memory , it is all about memory allocation , stores data in your system and manages access to it. " i mean browser does that , browser manages heap things, browser taps into our system memory and of course   OS , it allocates memory to the browser app. There the data gets stored which we work in our program and most importantly long term data. There is then Stack thing , is end important for execution of code. Stack is kind of short term memory means Stack control over which function is currently executing.                 "  Heap memory  is used by all the parts of the application whereas  stack memory  is used only by one thread of execution. Whenever an object is created, it's always stored  in...
Read more

Creating and inserting element- part-2

-
createElement() : creating a new array and appending to end of node  <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Arrays & Iterables </ title > < script src = "app.js" defer></ script > </ head > < body > < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 4 </ li > < li > Item 3 </ li > </ ul > < script > const list = document . querySelector ( 'ul' ) const newLi = document . createElement ( 'li' ) // it just create a <Li> element // but still not attache...
Read more