DEV Community

loading...

What's the value of x?

Bassem Ibrahim👨‍💻🇪🇬
Egyptian software engineer and blogger who loves to hike 🏕
・1 min read

Hey, devs from all over the world. 😊

let x = 0;

x++;
x = x++;
x = ++x;

console.log(x);
Enter fullscreen mode Exit fullscreen mode

What's the value of x? 🤔🤔

Discussion (5)

Collapse
xtrp profile image
Gabriel Romualdo • Edited

Placed before a variable, "++" adds one to the variable and the expression with "++" equals the new value of the variable + 1. This can be seen in line 4, where "x = ++x;" really means "x = (x + 1)".

Placed after a variable, however, "++" adds one to the variable and the expression with "++" equals the first value of the variable, without 1 added. This is why line 3, "x = x++;" has no effect — because the "x = x + 1" execution that the "++" gives is executed but then replaced by the the previous value of x.

In the end, you have:

let x = 0; // x = 0

x++; // x = x + 1 --> x = 1
x = x++; // x = x --> x = 1
x = ++x; // x = x + 1 --> x = 2

console.log(x); // 2

I hope my explanation made sense to you, was a bit hard to explain.

— Gabriel

Collapse
joeyhub profile image
Joey Hernández • Edited

++x -> (x += 1) -> (x = x + 1)

Most people use ++ after rather than before.

x++ is a bit weird, it doesn't map to an expression everyone would expect.

x++ -> (++x - 1) -> ((x += 1) - 1) -> ((x = x + 1) - 1).

It's not entirely intuitive, in reality it usually expands to using a temporary variable. A lot of people will assume it increments after the current statement.

Exactly what it expands to can vary. I'd not looked in too closely but you can easily make little tests to find out.

x++ === x - 1 for example. You have to be careful with precedence too.

People can be told that ++ will increment after but it's not necessarily true and can create confusion, instead it can increment first then return what the value was before. However then checking the value again after will show that it is increased.

let x = 0;

((x = x + 1) - 1);
x = ((x = x + 1) - 1);
x = (x = x + 1);

console.log(x);

You will notice a lot of operations are redundant. Not all languages optimise x++ which usually involves more operations than ++x. Some when it's broken into assembly it makes little difference. Technically speaking the whole statement can be optimised down to console.log(2);.

The only way to properly explain is to show what ++ actually maps to.

"x = ++x;" really means "x = (x + 1)".

This can cause confusion. It's half way between what it really is and an optimised (simplified version). If you skip the aversion to that assignments can return values then it becomes easier to explain. That's another alternative which is to break it up properly in the way compilation would expand it with all the temporary variables in play (which are usually hidden).

x = (x = x + 1) can be optimised to x = x + 1 then x += 1 and then to ++x. Though at what point it becomes truly optimised in respect to performance can vary. Some systems stop at the addition and some go further with a simpler INC instruction.

Collapse
thinkdigitalsoftware profile image
ThinkDigitalSoftware • Edited

3?
Dangit. I believe it would be 3 in dart

Collapse
bassemmohamed profile image
Bassem Ibrahim👨‍💻🇪🇬 Author

Well, I am not sure about dart. But we can try it out!!
In javascript its 2 for sure.

Collapse
theotakudev profile image
TOD TheOtakuDev

2, for a simple reason explained here:
docs.w3cub.com/javascript/operator...

Forem Open with the Forem app