Cast undefined to 0
Asked Answered
A

4

6

Is there a succinct operation in JavaScript (ES2015) that does this:

x => x === undefined ? 0 : x

I keep running into situations where I want to increment x, but it's initially undefined, so the code becomes:

foo.bar = (foo.bar === undefined ? 0 : foo.bar) + 1;

or

foo.bar = (foo.bar ? foo.bar : 0) + 1;

Is there a less repetitive way of doing this cast?

Anelace answered 4/1, 2017 at 2:57 Comment(1)
Did you try (foo.bar || 0)?Honghonied
E
7

ES2020 and the nullish coalescing operator allows to simplify it:

foo.bar = (foo.bar ?? 0) + 1;
Expletive answered 10/7, 2020 at 15:19 Comment(5)
Though this isn't necessarily any simpler than just a simple OR, as aboveCannery
If foo.bar = NaN, the expression with an OR can provoke undesired results. The output of the nullish colaescing operator expression would be NaN as well. However, with a simple OR, you would get 1 as a result. @CanneryGherkin
Yeah I guess that's desired or undesired based on context, but presumably if you're trying to cast foo.bar to a number, it's because you want to avoid NaN in most cases.Cannery
let _a = a(); let _b = b(); Imagine that a() and b() both return 0. Now you do: foo.bar = _a/_b. You didn’t desired a NaN. You got it based on a division of two functions where you didn’t know the result beforehand.Gherkin
Ah interesting, very good example. In the end, ?? and || aren't doing the same thing here, so there are going to be different use cases. The third answer is also interesting, but also has a big gap.Cannery
B
17
foo.bar = (foo.bar || 0) + 1;

should work.

Bunting answered 4/1, 2017 at 3:4 Comment(0)
E
7

ES2020 and the nullish coalescing operator allows to simplify it:

foo.bar = (foo.bar ?? 0) + 1;
Expletive answered 10/7, 2020 at 15:19 Comment(5)
Though this isn't necessarily any simpler than just a simple OR, as aboveCannery
If foo.bar = NaN, the expression with an OR can provoke undesired results. The output of the nullish colaescing operator expression would be NaN as well. However, with a simple OR, you would get 1 as a result. @CanneryGherkin
Yeah I guess that's desired or undesired based on context, but presumably if you're trying to cast foo.bar to a number, it's because you want to avoid NaN in most cases.Cannery
let _a = a(); let _b = b(); Imagine that a() and b() both return 0. Now you do: foo.bar = _a/_b. You didn’t desired a NaN. You got it based on a division of two functions where you didn’t know the result beforehand.Gherkin
Ah interesting, very good example. In the end, ?? and || aren't doing the same thing here, so there are going to be different use cases. The third answer is also interesting, but also has a big gap.Cannery
M
3

Since undefined + 1 is NaN, which is falsy, and undefined is falsy, you have a few options.

Assuming your numbers will never be negative (specifically, -1)

foo.bar = foo.bar + 1 || 1

Or this works for any values of foo.bar, though David's answer is probably a better idea.

foo.bar ? foo.bar++ : foo.bar = 1
Miniature answered 4/1, 2017 at 3:18 Comment(0)
E
1

You could use this succinct alternative using the double tilde (~~) as the bitwise NOT operator.

foo.bar = ~~foo.bar + 1;

As @CherryDT helpfully points out:

this will cause undesired results outside of the signed 32-bit integer range (~~30000000000 is -64771072 for example)

Ell answered 24/9, 2024 at 17:52 Comment(2)
I wanted to cite where I discovered that approach: https://mcmap.net/q/1399581/-javascript-replace-undefined-with-0 Not a good answer for that question but helpful for this scenario.Ell
Note, however, that this will cause undesired results outside of the signed 32-bit integer range (~~30000000000 is -64771072 for example).Lipcombe

© 2022 - 2025 — McMap. All rights reserved.