We help IT Professionals succeed at work.

In Javascript, what does "if (x) x  =" mean?

James Froggatt
on
I'm writing an auto-complete script little by little (html/ plain javascript/ php/ ajax).

I've come across the following code:

var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");

Open in new window


... and would like to understand this particular bit of the above code

What does the following bit mean? I've never seen logic like this before.

if (x) x  =  


Is this a comparison / some kind of logical operator? I'm wondering if it's a way to detect whether x is NULL and so get information from the immediate parent element. Nevertheless, I'd like to understand what it means.

If so, in 'long English', what does it mean?

Thank you
Comment
Watch Question

Senior Developer
Commented:
An if in JS is followed by a code block excuted when the conditional is true. This code block can be a single instruction, in this case the parentheses can be omitted:

Instead of

if (condition) { singleLineInstruction; }

Open in new window

you can write it as

if (condition) singleLineInstruction;

Open in new window

And the test used by the if in your case (x) is an simply test, whether x is assigned a value. Thus that it is possible to call x.getElementsByTagName("div"); without running into an error.

Author

Commented:
Hello,

Ah ha!

So it's really saying;

"if the autocomplete-list currently defined as x exists, x is all the elements with tagname 'div'"

Is that correct?

If it is, you're a star, I've not come across a syntax option like the above before.

Thanks

Author

Commented:
I.e.

 if (x) // if x exists (is not a null value)
{
   x = x.getElementsByTagName("div");
}

Author

Commented:
Concise, to the point, clearly saw what I was having difficulty with. Spot on!

Thank you ste5an
Michel PlungjanIT Expert
Top Expert 2009

Commented:
The test is using the principle of "truthy" and "falsy" and will coerce them into true or false

The code you posted may be misleading later since it tests that x is set to something, anything instead of testing that the assignment returned a collection as expected

var x = document.getElementById(this.id + "autocomplete-list"); // returns an DOM node or undefined/null if nothing exists
if (x) x = x.getElementsByTagName("div"); // test that the previous returned something and then find the divs inside it

Open in new window


It luckily works, but if we convert it to jQuery for example, we are better off testing the length since $x will be a jQuery object regardless and you will get the error further down

var $x = $("#"+this.id + "autocomplete-list"); // returns an jQuery object regardless of existence of a list
if ($x.length >0) $x = $("div",$x); // better test

Open in new window


In JS the following are considered false in a conditional

* false (boolean)
* 0 (number)
* 0n (BigInt)
* NaN (Not a Number)
* Empty string
* undefined
* null

whereas true will be whatever is not falsy - even empty objects

A complete run down is found here

https://medium.com/coding-at-dawn/what-are-falsy-values-in-javascript-ca0faa34feb4

Author

Commented:
Michel,

Thank you for your further comments, I've learnt alot here!

Best wishes
James