2

I'm learning JavaScript.

I tried putting double quotes around different digits in an JavaScript expression and I got surprised with the third result from below code statements.

Consider below code statements and their output present in a comment ahead of each code line.

var x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x; //Output is : **523**

var x = 5 + "2" + 3;
document.getElementById("demo").innerHTML = x; //Output is : **523**

var x = 5 + 2 + "3";
document.getElementById("demo").innerHTML = x; //Output is : **73**

Can someone please explain why and how the '+' operator behaves abnormally in JavaScript?

Why the output of last statement is not 523 since one of the digits is a string?

Please explain me in a simple and lucid language.

Thanks.

Improve this question
2
  • Javascript works in left to right way while doing operations so when it gets 2 numbers it sum ups and the binds with the string Commented Aug 11, 2016 at 7:00
  • Does this previous discussion help? stackoverflow.com/questions/15340207/… Commented Aug 11, 2016 at 7:00

5 Answers 5

Reset to default
3

Javascript executes the expressions left-to-right. So in the last example it will do this:

5 + 2 => 7
7 + "3" => "73"

Hope that helps

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

5 + "2" and "5" + 2 both evaluate to `"52". It's not just because of the evaluation order, it's because of the coercion rules.
That is correct of course, but we have 3 summands here, that is why we do not see "523".
2

'+' is not behaving abnormally.

You are not getting the concept right. + operator act as as concatenation operator when used with strings and act as an addition operator when used with digits.

Improve this answer

Comments

2

The + operator does two things in javascript. For strings it concatenates (joins them). For numbers, it adds them. If you use + on a combination of a number and a string, javascript coerces them into something it can act on.

In your case, a string + a number coerces into two strings. Then it concatenates.

var x = "5" + 2 + 3;
// coerced by runtime into var x = "5" + "2" + "3";
// x = "523";

In your later case, you have two numbers before the string. In this case, the evaluation order kicks in. The runtime first evaluates the arithmetic before coercing it to a string to concatenate

var x = 5 + 2 + "3";
//arithmetic performed var x = 7 + "3";
//coerced to var x = "7" + "3";
//x = "73";
Improve this answer

Comments

0

parse the statements from left to right

var x = "5" + 2 + 3;
=> ("5" + 2) + 3;   //the + works as string concatenation since one operand is a string
=>  "52" + 3 
=>  "523" 

    var x = 5 + "2" + 3;
    //same for this one as above

var x = 5 + 2 + "3";
    => (5 + 2) + "3";   //the + works as an add operator because both oerands are numbers
    =>  7 + "3"         //the + works as string concatenation since one operand is a string 
    =>  "73"
Improve this answer

Comments

0

in var x= 5 + "2" + 3, first operation is appending beacause one of the operand is String.

in var x = 5 + 2 + "3", first two operands are integers, so it will be added and then append with String value 3, that is why you are getting 73.

After all the answer is simple, JS expressions are executing here from left side since all operators here are same( +, equal priority)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.