Yogesh Chauhan's Blog

What happens when we add Numbers and Strings in JavaScript?

in JavaScript on May 5, 2020

Adding Numbers and Strings in JavaScript

JavaScript uses the + operator for both addition and concatenation. Numbers are added. Strings are concatenated.

Add two numbers and the result will be a number:


var x = 100;
var y = 200;
console.log(x + y);  //300

Add two strings and the result will be a string concatenation:


var x = "100";
var y = "200";
console.log(x + y);  //100200

Add a number and a string and the result will be a string concatenation as well:


var x = 100;
var y = "200";
console.log(x + y);  //100200

Same result with a string and a number addition as well


var x = "100";
var y = 200;
console.log(x + y);  //100200

So, we can easily concatenate a simple addition to a string. right?

NOPE.

Look at this result:


var x = 100;
var y = 200;
var z = "The result is: " + x + y;
console.log(z); 

//The result is: 100200

Weird!

What about string concatenation of two numbers and a string then? One number and one string works perfectly fine. So this should work too. Right?

NOPE!

Look at this result:


var x = 100;
var y = 200;
var w = "300";
var z = x + y + w;
console.log(z);

//300300

But if you interchange the position, the result would be:


var x = 100;
var y = 200;
var w = "300";
var z = x + w + y;
console.log(z); 

//100300200

Explanation

The JavaScript interpreter works from left to right.

Simple numbers 100 + 200 is added because x and y are both numbers.

Then 300 + "300" is concatenated because w is a string.

Similarly, 100 + "300" is concatenated because w is a string and then again "100300" + 200 concatenated because the "100300" is a string.

Numeric Strings

JavaScript strings can have numeric content and it will try to convert strings to numbers in all numeric operations.

So, all of the following operations will give you normal result. 


var x = "20";
var y = "5";
var z = x / y;
console.log(z); 

//4

var x = "20";
var y = "5";
var z = x * y;
console.log(z); 

//100

var x = "20";
var y = "5";
var z = x - y;
console.log(z);

//15

But as we have already experienced, we can not do that with addition(+).


var x = "20";
var y = "5";
var z = x + y;
console.log(z); 

//205

It happens because JavaScript uses the + operator to concatenate the strings.

NaN

If we try to divide a number by different kinds of string, we get different results as well.

First let's try non-numeric string.


var x = 100 / "string";  

console.log(x);

//NaN

NaN is a JavaScript reserved word indicating that a number is not a legal number.

Let's try a numeric string now:


var x = 100 / "100";  

console.log(x);

//1

isNaN()

To avoid crashing in math functions we can always use isNaN() to check if the result is a number and we can add what to do if the result is not a number. That will save the day!

Just like this example:


var x = 100 / "string";  
if(isNaN(x)){
  console.log("It's NOT a number");
}
else{
  console.log("It's a number!");
}

//It's NOT a number

Why would we need to check?

Because sometimes the maths formulas are connected to each other and we need to use results of a particular function to another function or formula and if that variable is not a number, it might make everything else NaN as well.

Take a look at this example:


var x = NaN;
var y = 100;
var z = x + y;      

console.log(z);

//NaN

Even the concatenation will be NaN


var x = NaN;
var y = "100";
var z = x + y;      

console.log(z);

//NaN100

Do NOT just check for NaN using typeof because it will result in a number as NaN is a type of a number!


console.log(typeof NaN);

// number

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Create dynamic selectors using SCSS (Sass)SCSSLearn to Establish Connection using MySQLi (object-oriented), MySQLi (procedural) and PDO with Example CodePHPCREATE DATABASE in PostgreSQLPostgresHow to Write Complex Search Queries in SQL?SQL/MySQLWordPress: How to display fields from ACF Flexible Contents?WordPressfirst-of-type and last-of-type selectors in CSSCSS