JavaScript Tricks I Like

#development #javascript #tricks

JavaScript is perhaps one of my favorite languages. And after working with JavaScript for about 3 to 4 years as of my initial writing of this post (I'll probably add more as I learn more stuff), I've picked up a few tricks that I use quite a bit.

1. Ternary Operators

If you ever find yourself writing conditionals like this:

   if(glassEmpty) {
        action = 'fill-with-beer';
    }
    else {
        action = 'drink-beer';
    }

You can write it like this:

   action = glassEmpty ? 'fill-with-beer' : 'drink-beer';

Some things to remember:

  • The value after the question mark is returned when the condition is true, the value after the colon is returned when the condition is false.

  • These values are returned. You should not use this as an if statement to run code that is not trying to return a value.

2. Triple Equals

Usually, when you are writing a conditional statement, you probably use "==" or "!=" to check the value of variables. Unfortunately, sometimes this may bite you in the ass if the types don't match and you want them to. Also, using "===" has a possible speed benefit because your values do not need to go through the process of type conversion.

When possible, you should be using "===" in place of "==" and "!==" in place of "!=". Triple equals not only check for value equality, but also type equality. The code below will log to the console: "Equal!" because when using the "==" operator, JavaScript attempt to convert the values so that they match and compare the values.

   if(100 == '100') {
        console.log('Equal!');
    }
    else {
        console.log('Not Equal!');
    }

However, this below will log to the console: "Not Equal!" because the types do not match despite them both saying 100.

   if(100 === '100') {
        console.log('Equal!');
    }
    else {
        console.log('Not Equal!');
    }

All in all, if type equality is definitely important, you probably already use these. If you're not sure if type equality is important, you should probably use these to make sure your data stays consistent!

3. Boolean value shorthand

Instead of writing:

   var glassEmpty = true,
        isDrunk = false;

The following would be equivalent:

   var glassEmpty = !0,
        isDrunk = !1;

4. Null/Undefined Checking Shorthand

Sometimes you probably write an if statement to check the value of a variable, and verify if the variable is null or undefined like so:

   if(cashAmount !== undefined && cashAmount !== null && cashAmount > 0) {
        moneyForBeer = cashAmount;
    }
    else {
        moneyForBeer = 0;
    }

But instead, this nice easy short hand makes your life easier, and your JS file smaller:

   moneyForBeer = cashAmount || 0;

5. jQuery Document Ready shorthand

If you're a JS developer, you know what jQuery is. And so I am sure you know this, but instead of writing:

   $(document).ready(function(){
        //Your code here
    });

You should be writing:

   $(function(){
        //Your code here
    });

Also, keep in mind here that waiting for the $(document).ready(); to execute your code may not always be the best thing to do. There are times when your code doesn't need to wait for the document to be ready (hint: look at jQuery's on() function).

Thanks for reading and feel free to follow my Twitter for random tweets and updates on my blog and my Github for some of my projects. Comment below and tell me about your favorite JS tricks and shorthands!