JavaScript convert NULL to 0

Question

I'm using jQuery to get the height of an element. But if the element doesn't exist, the following code will return NULL:

$height = $('#menu li.active ul').height(); // returns integer or null

Is it a cross-browser safe way for getting an integer value under every circumstance with the following code:

$height = $('#menu li.active ul').height() + 0;

Why not check if the element exists first? --- Also `+ 0` will coerce a `null` to a `0`. — evolutionxbox, Sep 02 '16 at 09:16
try with length first if length is > 0 then calculate the height — Sandeep J Patel, Sep 02 '16 at 09:17
It really sounds like bad idea to use a height of 0 for non existing element. See [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). And if it was a not so bad idea, jQuery would already do it — A. Wolff, Sep 02 '16 at 09:26

score 19 · Accepted Answer · answered Sep 02 '16 at 09:19

19

There are many ways to deal with this. The one you describe, adding an integer value to coerce the type is fine. You could also convert to a number explicitly:

$height = Number($('#menu li.active ul').height());
// or:
$height = +$('#menu li.active ul').height();

Or you could use a logical operator as null coerces to false:

$height = $('#menu li.active ul').height() || 0;

answered Sep 02 '16 at 09:19

Rory McCrossan

331,213
40
305
339

1

Logical operator seems to me the most correct solution here. – VisioN Sep 02 '16 at 09:21
1

That's my usual preference too – Rory McCrossan Sep 02 '16 at 09:21
1

The second version is exactly what I was looking for. Thanks. – pbaldauf Sep 02 '16 at 09:26

score 4 · Answer 2 · answered Sep 02 '16 at 09:17

4

It is safe, yes.

A shorter alternative:

$height = +$('#menu li.active ul').height();

(notice the + before the $)

answered Sep 02 '16 at 09:17

Christoph

1,631
8
19

1

If item with selector '#menu li.active ul' does not exists, using '+' will return NaN. – Levent Yumerov Sep 02 '16 at 09:18
2

No, it returns `0`. Tested in Chrome 52 – Christoph Sep 02 '16 at 09:19
For some reason under Kubuntu Chrome 52 returns NaN. – Levent Yumerov Sep 02 '16 at 09:27
1

Sure? I'm using Kubuntu. I used this in the console to test it: `+$(".non-existing-class").height()` – Christoph Sep 02 '16 at 09:27
Edit: I have tested with version 3.1.0. – Levent Yumerov Sep 02 '16 at 09:30
Nice version too. Therefore I will upvote the answer. Not sure if cross-browser compatible and/or dependent on the jQuery version for different result in Kubuntu. – pbaldauf Sep 02 '16 at 09:32

score 3 · Answer 3 · answered Sep 02 '16 at 09:28

3

Simplest way to do that..

$height = $('#menu li.active ul').height() || 0;

Here false value will be..

false
null
undefined
" "
0
NaN

answered Sep 02 '16 at 09:28

Ramdeo angh

179
9

score 2 · Answer 4 · answered Sep 02 '16 at 09:18

2

This is a better approach infact...

if($('#menu li.active ul').length > 0){
   $height = $('#menu li.active ul').height();
}else{
    ......
}

answered Sep 02 '16 at 09:18

Sandeep J Patel

910
9
24

Levent Yumerov · Answer 5 · 2016-09-02T09:31:30.003

2

My short solution is: $height = $('#menu li.active ul').height() || 0.

If you want more descriptive solution, you can check other users' answers.

Edit: It depends on jQuery version too.

edited Sep 02 '16 at 09:31

answered Sep 02 '16 at 09:20

Levent Yumerov

526
1
6
15

score 0 · Answer 6 · answered Sep 02 '16 at 09:18

0

Just check if the element exist:

var $height = 0;
if($('#menu li.active ul').length > 0){
  $height = $('#menu li.active ul').height();
}

answered Sep 02 '16 at 09:18

Willi Pasternak

456
2
12

score 0 · Answer 7 · answered Sep 02 '16 at 09:19

0

You could check if $("#menu li.active ul") is not null:

$height = $('#menu li.active ul') != null ? $('#menu li.active ul').height() : 0;

answered Sep 02 '16 at 09:19

Alessio Cantarella

5,077
3
27
34

score 0 · Answer 8 · answered Mar 15 '19 at 09:58

I used the above-accepted answer and other exercises, which give me a nice result.

We can use with parseFloat or parseInt, which give 0 or the actual value. See demo specially last result :

function myFunction() {
  var a = parseFloat("10") + "<br>";
  var b = parseFloat("10.00") + "<br>";
  var c = parseFloat("10.33") + "<br>";
  var d = parseFloat("34 45 66") + "<br>";
  var e = parseFloat("   60   ") + "<br>";
  var f = parseFloat("40 years") + "<br>";
  var g = (parseFloat("1.1234") ||0) + "<br>";

  var n = a + b + c + d + e + f + g;
  document.getElementById("demo").innerHTML = n;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click the button to parse different strings.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

JavaScript convert NULL to 0

8 Answers8

Linked