Are You Just Good or Perfect in JavaScript? Part 1

Knowing a specific programming language doesn't necessarily mean that you also know it well. For JavaScript, if you can write programs in it doesn't really imply that you can also write any program in it. It is highly possible that you don't know many of the tricky and vital concepts in the language, therefore continue reading this article to check out if you really know JavaScript or not!

If you've ever tried to assign different elements some given events under a loop, which utilised the loop's counter in the event handler functions, you may have have encountered some trouble in the process due to closures.

The following code is of a correct syntax, but still doesn't get our job done:

for (var i = 0; i < 5; i++) {
   ele[i].onclick = function() {
      alert(i);
   }
}

What we want to do over here is simply alert a number on each button's click, which is similar to its index (relative to its parent). For example, for the first button element we want to alert 0, for the second one we want to alert 1 and so on. However this code returns the same alert of 3 regardless of whichever button we click. Why?

So what's the solution then? Closures!

for (var i = 0; i < 5; i++) {
   ele[i].onclick = (function(index) {
      return function() {
         alert(index);
      }
   })(i);
}

In the code above, we return a function that remembers its argument and hence for every button we have a seperate function with a different value of index.

Now we won't be going into the details of closures and how they work over here - if you want to understand them you can check out our JavaScript Functions Introduction chapter to start on the topic.

IIFE's or Immediately Invoked Function Expressions are simply anonymous functions invoking immediately after their creation. Consider the following code with an IIFE.

(function(i) {
   alert(i);
})(10);

Remember two things about an IIFE:

1. It can only be invoked once
2. It needs enclosing parentheses ( ) around the function definition.

If you want to learn more about IIFE's check out our Creating Functions in JavaScript chapter where we discover IIFE's.

It is surprising to know that some, if not many, JavaScript developers, who know about JavaScript events, aren't very familiar with touch events. If you're building mobile-based web apps then knowing JS touch events would be extremely handy.

There are only three events in the touch category - touchstart, touchend and touchmove - and hence it won't be much difficult to understand them unlike the mouse category of events in JavaScript.

Objects are undoubtedly the supreme power of JavaScript, and you might have known this (well you did now at least....). But did you know that the supreme power of JavaScript objects is prototypes?

Unlike the regular class behavior in classic OOP languages, like C++, Java etc, prototypes work as inherting machines for objects. Instead of having a function for each of a constructor's instance, we can define it on the prototypes and likewise get it inherited down the tree.

function Book(name, genre, pages, id) {
   this.name = name;
   this.genre = genre;
   this.pages = pages;
   this.id = id;
}

// displayInfo() method on the prototype object
Book.prototype.displayInfo = function() { return "Name: " + this.name + " Genre: " + this.genre + " Pages: " + this.pages; }

var book1 = new Book("Web Designing Guide", "General Knowledge", 156, 3156); // has a displayInfo() method, but not its own

var book2 = new Book("JS Skills", "General Knowledge", 500, 1052); // has a displayInfo() method, but not its own

Now prototypes are one of the trickiest concepts of JavaScript and hence require a really good explanation to be understood to the core. And this is where our chapter JavaScript Object Prototypes comes to the rescue!

JavaScript is an easy-to-learn language but with a vast amount of spread in its learning region. There is so much to learn in JavaScript that getting all that done in a short time is literally impossible!. If you've gotta master JS, then consider spending a good amount of three to four months, or maybe even more, on working with different aspects of the language. If you're relatively new to JavaScript, you can go over our JavaScript Course.

Just remember one rule of thumb - practice makes perfect!.