Need help understanding the + operator in Javascript - javascript

Why is 1 + + + 1 = 2 in Javascript?
What is this behavior called? Is it documented somewhere?
Thanks.

It's because of the spacing. The unary operator + can be applied as many times as necessary, and so your expression becomes:
1 + (+(+1))
That is,
1 + 1
. Normally, it appears you can't do this, i.e. 1 + ++ 1 will fail, but that's because two +s are parsed as a prefix increment which is invalid when not used on a variable. In the same way, 1 +++ 1 fails because it's parsed as 1++ + 1, and you can't increment 1.

It's parsed as...
1 + (+ (+ 1))
...which obviously evaluates to two.

Related

Why it only add the number with += and not +

I am learning to code and trying out some JavaScript programming and came across this which I don't understand. Please help!
I don't understand why it wouldn't add the number with '+' but does with '+='.
let number = 10;
number + 10; //Return 10
number += 10; //Return 20
console.log(number);
There is an important distinction to make between and expression and an instruction. An expression evaluates to a value, but doesn't necessarily have an effect. An instruction doesn't necessarily evaluate to a value, but has some effect.
In your example, number + 10 is an expression that evaluates to 20. But it has no effect by itself.
By contrast, number += 10 is an instruction that modifies the value of variable number.
Note that number += 10 is essentially equivalent to number = number + 10.
The last line in your code, console.log(number), is also an instruction: it prints the value of number.
Have you tried the instruction console.log(number + 10)?
'+=' operator come from C language
and it's a shortcut for
number = number + 10
so in your code all works,
but number + 10 is just operation without assignment;
The line number + 10 will calculate the value but you need to assign this value to the variable (to store it in the variable).
Indeed, you need to write number = number + 10.
About the syntax += : It only makes the code easier to read, the two following make exactly the same thing :
number = number + 10
number += 10
For more informations Addition assignment

Quoted value being treated as a integer [duplicate]

This question already has answers here:
The + + operator in javascript
(2 answers)
Closed 5 years ago.
Why does this statement 1+ +"2"+3 returning 6 in javascript?
console.log(1+ +"2"+3) // 6.
Between the two plus (+) operands there is a single space. Even though we have a quoted string it's treating the string as a number, which is confusing to me.
Can someone please explain this?
Because the + in +"2" coerces "2" to 2, thus you get 1 + 2 + 3, thus 6. The unary¹ + has higher precedence than the binary² + (e.g., it happens first). MDN has a reasonably good precedence chart here.
E.g., starting with 1 + +"2" + 3, then:
The +"2" part is done first, resulting in 2 because that unary + converts the string to number (the same way Number("2") would). So now we have 1 + 2 + 3.
1 + 2 is done next because the binary + operator (whether addition or concatenation) is left-to-right associative. So that gives us 3 and we have 3 + 3 left.
3 + 3 is done, giving us 6.
E.g.:
1 + +"2" + 3
1 + 2 + 3
3 + 3
6
¹ A "unary" operator is an operator accepting only one operand, e.g. the + in +"2" (where "2" is the operand)
² A "binary" operator is an operator accepting two operands, e.g. the + in 1 + 2 (where 1 and 2 are the operands)
(There are also "ternary" operators which accept three operands; JavaScript's only current ternary operator is the conditional operator: test ? result1 : result2)

Why does this expression return 2 in javaScript?

I would think you might get 0, maybe because the strings are turned to 1's and the - operator causes a subtraction operation to take place?
"1" - - "1";
Thanks in advance!
It's how math works
1 - (-1) = 1 + 1
The - casts the string to a number and also acts as a minus sign.
1 - (-1) = 1 + 1 = 2
1 - (-1) = 2.
I dont see the issue? JavaScript will parse those as integers because of the minus sign, expecting math.
It also happens if you multiply a numerical string by 1, aka the poor man's parseInt().

Adding strings to numbers and numbers to strings

I tried something in my console that I don't quite comprehend.
If you add 2 + 3 + "hello" it concatenates to "5hello"
However, if you reserve this and add 'hello' + 2 + 3 it concatenates to 'hello23'
Why? My guess is because JavaScript looks at the first data type and tries to convert it to that type? Can someone elaborate on this?
Addition (and other associative operators) are processed in order, left-to-right. So
2 + 3 + "hello"
is like writing
(2 + 3) + "hello"
or
5 + "hello"
first the addition, then the conversion/concatenation. On the other hand,
"hello" + 2 + 3
is like:
("hello" + 2) + 3
which works out to
"hello2" + 3
or
"hello23"
Simple order of operations really:
2 + 2 + "hello" //2 + 2 is evaluated first, resulting in 4. 4 + "hello" results in "4hello";
"hello" + 2 + 3 //"hello" + 2 is evaluated first, turning the result to a string, and then "hello2" + 3 is done.
As I understand it, 2 + 2 + "hello" is evaluated this way:
Find any operators and push them on the operator stack: stack: +, +
Find any symbols and push them on the operand stack: stack: 2, 2, "hello"
Take the first operator from the operator stack and
the first 2 operands from the operands stack, do: 2 + 2 = 4
Take the first operator and the first 2 operands, do: 4 + "hello"
= "4hello"
Mind you, JS automatic type conversion works this way with the + operator (which is both addition and concatenation), it may (and does) work differently in other places. 4 - "hello" will make no sense and "0" == true will evaluate to false whereas 0 == '' stands. This is one of the reasons Javascript is one of the most beloved languages of today.
This occurs due to the coercion. Type coercion means that when the operands of an operator are different types, one of them will be converted to an "equivalent" value of the other operand type. The operand to take into account depends on the hierarchy of "data-type" (though JavaScript is typeless) and the operations are executed from left-to-right. For instance:
//from left to right
2 + 3 + "hello"
//performs the addition, then does coercion to "string" and concatenates the text
(2 + 3) + "hello"
this results in "5hello"
In counterpart
//from left to right
'hello' + 2 + 3
//string concatenation is the first, all subsequent values will do coercion to string
"hello23"
Unless you use parentheses, which takes higher precedence
'hello' + (2 + 3)
It returns "hello5"

concatenation in javascript?

i want to concatenate two string in javascript i.e.
$('#bio').css('font-color', result.titlecolor);
but i want to put the character # before the result.titlecolor i.e.
$('#bio').css('font-color','#' result.titlecolor);
is this right or wrong? thanks
$('#bio').css('color','#' + result.titlecolor);
(Edited to reflect #BoltClock's comment about 'color' versus 'font-color'.)
This:
'#' result.titlecolor
needs to be:
'#'+ result.titlecolor
In javascript the + operator concatenates to strings together (but remember strings are immutable, so you are creating a new string when you use it). It will also allow you to contatenate a string and a non-string together into a string, such as a number and a string. So this "The answer is : " + 42 becomes "The answer is : 42" The tricky part comes in because if you try and concatenate to numbers together such as 14 + 08, you don't get "1408" it adds the two numbers together to become 22. Logically this makes sense on a simple example, but it can become troublesome when are concatenating variables together which are loosely typed.
$('#bio').css('font-color', '#' + result.titlecolor);
$('#bio').css('font-color','#' + result.titlecolor);
The + operator serves as both the addition operator and string concatenation operator in JavaScript. So:
1 + 1 // is 2
'The answer is: ' + 42 // is 'The answer is: 42'
'1' + '1' // is '11' (!!!)
'1' + 1
1 + '1' // are also '11' (!!!!!)
As for your code, the CSS specification defines color but not font-color, so this is what you want:
$('#bio').css('color', '#' + result.titlecolor);
As a side note, if you ever run into the '1' + '1' or 1 + '1' problem (e.g. you are taking a numeric value from a text box), you have to convert the operands to numbers using the unary plus operator or the parseFloat function:
+'1' + +'1' // is 2

Categories