Home » JavaScript » 5 nifty JavaScript tricks that you may not know

About Veera Sundar

Veera Sundar

5 nifty JavaScript tricks that you may not know

Over the years, I have seen several JavaScript techniques that are particularly clever. Here’s a short list of 5 such techniques that I have been using again and again. I hope it inspires you too to rethink how you write certain piece of code.

And, please note that some people may think clever coding impacts readability and they might be right. So, grasp the concept and apply it in your code wherever you think it helps.
 
 
 
 

1. A compact string comparision

Let’s say you want to check if a string value is present in a set of strings. You obviously go for a if statement as below.

if(fruit === 'apple' || fruit === 'banana' || fruit === 'chikoo'){
    doMagic();
}

Here’s a compact version of above code:

if({apple:1,banana:1,chikoo:1}[fruit]){
    doMagic();
}

This trick works well only if you have a small set of strings to compare.

2. !!

Here’s a shortest way to convert any JavaScript value to its truthy / falsy representation – just use !!val. Very useful if you want to check if a value is a present or not.

For example,

if(!!document.addEventListener){
    doMagic();
}

But !! might confuse people with ! operator which has a different meaning. So make a good judgement before you use !! everywhere.

3. Conditional function call

If a value is true, you want to call a function foo() otherwise you want to call bar(). You go for if, right?

if(param){
    foo();
}else{
    bar();
}

Here’s an alternative, short approach:

param ? foo() : bar();

yay!

4. Chaining of function calls

You have three functions one(), two() and three(). You want to call these functions one after other, but only when a previous function returns a truthy value. For example, if all three functions returns a truthy value, then all will be called. But if the function two() returns false/null then function three() won’t be called.

So, you go for if, obviously.

if(one()){
    if(two()){
        three();
    }
}

But let’s rewrite with this one:

one() && two() && three();

5. IIFE

IIFE is short for Immediately Invoked Function Expression. It means, you define a function and then you call it immediately. IIFE helped me in some usecases where I don’t want to create a new function but I needed the logic to be inside a function block.

For example, lets say you are initializing variables and for one variable, the initial value needs to be calculated using some complex logic. If you don’t want to separate this calculation logic to a seperate function, but you still want to wrap it in it’s own block, you can IIFE. Like below:

function doMagic(){
    var foo = 1,
        bar = 2,
        zoo = (function(){
            // some complex stuff
            // some more complex stuff
            return stuff;
        }()),
        baz = 3;
}

So, what do you think about these tricks? Do you think these are usefull or affect the code readability? Feel free to comment your thoughts.

Reference: 5 nifty JavaScript tricks that you may not know from our WCG partner Veera Sundar at the Veera Sundar blog.
(0 rating, 0 votes)
You need to be a registered member to rate this.
12 Comments Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

12
Leave a Reply

avatar
12 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
John SuddsSourav BasakJeremy CGiảm Mỡ Bụng Tại NhàFon E. Noel Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Gleb
Guest

Even more JavaScript and AngularJS tricks at my blog post http://bahmutov.calepin.co/angularjs-and-javascript-nuggets.html

I-Lin Kuo
Guest

The example for !!

if(!!document.addEventListener){
doMagic();
}

isn’t very good. It does the same thing as

if(document.addEventListener){
doMagic();
}

!! is for type casting to a boolean, which matters if you’re trying to assign the reulting cast value to a variable.

Jani Hartikainen
Guest

Although the tips are all quite clever, I would be careful with #3 and #4. Especially #4 and similar tricks to it, such as conditional function calls using the or operator ||, can lead to code that’s hard to follow.

It would be better formatted as if(one() && two()) { three(); } which achieves the same result without looking so out of place.

Tien Gow
Guest
Tien Gow

#4 relies on a side-effect, which is never a good idea. Compiler optimization may cause code to be executed in an order not intended.

Cy Brown
Guest
Cy Brown

Third one is wrong: (param ? foo : bar)(); is better.

Jeremy C
Guest
Jeremy C

I’ve not seen #1 before. The method that I use for checking membership of a list is
[ ‘apple’, ‘banana’, ‘chikoo’ ].indexOf(fruit) >= 0

New Trick to convert a arguments object to an Array
arguments.constructor = Array;
This is much simpler to write and to understand than the commonly seen
Array.prototype.slice(arguments, 0);

Fon E. Noel
Guest
Fon E. Noel

I think there are great some of them make JS look more like PHP like- param ? foo() : bar();

Giảm Mỡ Bụng Tại Nhà
Guest

Yeah, I don’t know this trick before ;)

I really love the first example. Could you explain more about this example? (#1)

Thank you very much:)

Jeremy C
Guest
Jeremy C

@Giảm Mỡ Bụng Tại Nhà Trick #1 works as follows: {…} is an object – we’ll discuss what is in it in a few seconds {…}[name] extracts the object property value associated with the named object property in exactly the same way as using an index to get an element from an array. In fact, an array (in JavaScript) is an object with properties named 0, 1, 2, etc and whose property values are the elements in the array; and you can add named properties to the array as well as to any other object. For this trick, the object… Read more »

Jeremy C
Guest
Jeremy C

Typo in my reply
“So, doing {…}[name] finds the value 1 for the property with the given name and returns ‘undefined’ if the named property is in the object. ”

Should read
“So, doing {…}[name] finds the value 1 for the property with the given name and returns ‘undefined’ if the named property is NOT in the object. ”

Sorry!

Sourav Basak
Guest

Good and very useful article for developing and managing web application in a technical ways. This information can help the developers to modify any tricks without any hesitation.
Also for building a short type of plugin this can also help to rebuild the construction of a page.
Thanks a lot.


Regards,
Sourav Basak [Blogger, Entrepreneur, Thinker]
http://www.namasteui.com

John Sudds
Guest
John Sudds

Syntax error in #5.

zoo = (function(){
            return stuff;
        }()),

Should be:

zoo = (function(){
            return stuff;
        })(),

The first set of parens enclose the anonymous function definition, the second trailing set of parens invoke the function. BTW: you can also pass values to the anonymous function in the trailing parens, which are not required in this example because the anonymous function doesn’t take any.