CODEWITHSUNDEEP
javascriptjqueryoperators
Tushar
Tushar

Reputation: 87203

Why + + on strings gives strange result

I was working on appending the element dynamically using jQuery and found that when using + + it shows NaN and the next text is not added.

I can guess that somehow + + works here as Arithmetic plus operator and returns NaN.

This is not Increment operator as there is space between the two +.

My Question is

  1. What is actually happening here so it returns NaN
  2. Why + here does not work as concatenation operator when it is surrounded by strings.

$('#message').html('<span>' + + ' new message</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>

The same behaviour can be seen in Node.js

> 'a' + + 'b' // aNaN

Note: I know that I've added an extra + here and removing that will work for me.

Upvotes: 4

Views: 216

Answers (5)

Alex Char
Alex Char

Reputation: 33218

The javascript first try to convert string 'b' to number and returns NaNbecause 'b' can not convert to number. Then 'a' + 'NaN' concatenate to new string 'aNaN'. Same in your example:

$('#message').html('<span>' + + ' new message</span>');

Javascript tries to convert + ' new message</span>' to a number and returns NaN. Then '<span>' + 'NaN' creates a new span element and NaN as text.

Take a look:

Unary plus (+)

The unary plus operator precedes its operand and evaluates to its operand but attempts to converts it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values true, false, and null. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to NaN.

Upvotes: 5

Deepak Biswal
Deepak Biswal

Reputation: 4320

You can just try like this:

$('#message').html('<span>' + ' new message</span>');

or

 $('#message').html('<span>' + '' + ' new message</span>');

==========================================

$('#message').html('<span>' + ' new message</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

The + operator can be used to convert a variable to a number. So this...

"a" + + "b"

returns aNaN, but this...

"a" + + "5"

returns a5

Since b is not a number, + b returns NaN.

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

The reason is because by placing the + character before a string you're attempting to convert the 'b' string to a number, which results in NaN. The code in your question is equivalent to this:

'a' + Number('b')

Hence Number('b') returns NaN which is then coerced to a string and appended to a. This behaviour is intrinsic to JS, so the library being used (whether jQuery, node or any other) is irrelevant.

Upvotes: 12

Arun P Johny
Arun P Johny

Reputation: 388316

Because the second + is evaluated as a unary plus operator like

'<span>' + + ' new message</span>'
= '<span>' + (+' new message</span>')
= '<span>' + NaN
= <span>NaN

Upvotes: 8

Related Questions