JS Data Types Confusion

var x = 32 + 4 + "Ivanka";

Result will be 36Ivanka

var x = "Ivanka" + 32 + 4;

what will be the result in this case?

Ivanka36 or based on some references Ivanka 324

Isn’t that strange?

There is any logic or we have to accept the way it is?

I don’t really know js, but it seems logical to me based knowledge of programming in general.
In the second example, the first value is a string, so is not computable as a number, therefore the first part of the equation cannot be done mathematically, nor can it continue in that way, so everything gets treated as a string from there on, because you began with a string.
That’s how I reason it. I’m sure a js expert can clarify further.

I’m not sure where you would use this. But there is usually a way in programming to do most things. Probably structuring your equation differently, separating strings from numbers, maybe bracketing the numbers will do it, just a guess based on limited js knowledge.

4 Likes

Yes it is strange, but there is a logic to it, where strings that have numbers added to them remain as strings.

If you want the numbers to be added together before adding them to a string, place them in parenthesis.

var x = "Ivanka" + (32 + 4);
4 Likes

No, not really. :winky:

In the the first example…

var x = 32 + 4 + "Ivanka";

The number 4 is added to the number 32, result the number 36.
The number 36 is then added to the string “Ivanka”, result the string “36Ivanka”.

In the the second example…

var x = "Ivanka" + 32 + 4;

The number 32 is added to the string “Ivanka”, result the string “Ivanka32”.
The number 4 is then added to the string "Ivanka32, result the string “Ivanka324”.

I trust that this helps. :biggrin:

coothead

4 Likes

oops typo :slight_smile:

2 Likes

Thanks to your 20/20 vision, I was able to sneak back and edit my post. :winky:

I am certain that no one will notice my faux pas. :shifty:

coothead

2 Likes

Ah, I got it. It’s like first come, first, serve.

when a first encounter is a number (and then string) then maths is applied, but If the first encounter is a string(and then a number) then all are treated as a string.

The problem is that the + operator does both arithmetic addition and string concatenation, which is indeed rather unfortunate. But the good news is that with ES6 there’s a safer way to handle strings:

var x = `Ivanka${32 + 4}` // Ivanka36
var y = `Ivanka${32}${4}` // Ivanka324

So if you have a piece of code where this ambiguous behaviour might be problematic, I think the best approach would be to avoid using + for string concatenation altogether and only use template literals instead. Similarly, you can explicitly coerce the types like so:

var x = `${42}` // x is now a string
var y = +'42'   // y is now a number

This is useful when dealing for example with values of input elements, which are always strings – even for type="number".

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.