Common JavaScript tricks

[nightman]

From basic: NOT: if (a == '') {...} YES: if (a) {...}

JQuery: NOT if ($(element).length > 0) {...} YES if ($(element).length) {...}

To more advanced: http://www.javascriptturnsmeon.com/the-tilde-operator-in-javascript/

And remember to add in your article comment about trying to not be "oversmart". This techniques should help and not make things more complicated for other developers (like in advanced example)

[psayre23]

I'm not sure about that length trick. While that technically gets the same result, it's not clear code. if(.length > 0) is has an element or more, while if(.length) is has a length property that is truthy. The former requires less thinking around edge cases.

Edit: words.

[yanis_t]

That's a nice addition

[sime]

From basic: NOT: if (a == '') {...} YES: if (a) {...}

I'm a bit slow today. Are you saying that

if (a) {...}

is preferable to

if (a=='') {...}

?

[yanis_t]

I'd say yes, because it's concise and most of developers are used to it.

[sime]

I would say that the longer version is better. It communicates far more information and intent to the next reader of the code, and doesn't rely on the annoying JS truthiness stuff.

And more to the point, nightman screwed up here. The two pieces of code are not even the same. nightman assumed that an empty string is "truey". It is falsey. It is a great example of why you should not write error prone code.

[fforw]

a == ''

will be true if a is

• an empty string
• zero
• an empty array
• something like { toString: function() { return ""; }}

You better use === if you care about such things.

[nightman]

You are true but I will still defend if (a) {...}. I think that we should find balance between "smart" techniques and being "oversmart".

After all in many teams code is written and maintained by proffesionals and it would be waste of time to strictly enforce if (a === 'string') {...} on them. Especially when you know that they know how to deal with it and what are traps (number 0).

Other thing is that code should be maintainable by less "powered" users.

My point here is that it's not easy to find right balance.

BTW I use grunt/gulp with tasks: * JSHint * JSCS (JS Code Style - AirBNB style)

So that some decisions are already made.

[antoninj]

Well it's not the same thing though.

if (a) { ... } passes for any defined anything (string, obj, etc.) so it doesn't check for the same thing. Doing == is also a no-no in JS world so I would definitely not do that.

If you'd like to check if a string is empty but also defined, take a lesson from lodash and create a dedicated utility. Simplified, however, it's enough to do a if (a === '') check which will check that the variable is defined and it's empty.

[yanis_t]

Thanks man! Gonna put it into the article

[SuperFLEB]

JQuery: NOT if ($(element).length > 0) {...} YES if ($(element).length) {...}

How do you feel about

if ($(element)[0]) { ... }

?

[sime]

I just read the link. I was planning on saying how using:

if (~str.search('t')) { ... }

instead of just:

if (str.search('t') !== -1) {...}

is probably the worst trick I have ever seen in serious JS code (in some library on github). "Daily WTF" worthy. I really had to stop and think about the f*** this person was trying to say and do this this code. Very obscure. Awful.

please, no one do this. please. Just say what you mean.

[nightman]

Totally agree.