JavaScript Coding Patterns

There are some common patterns that we see in JavaScript code when we start working. I will walkthrough some of these common JavaScript coding patterns to show you how JavaScript can be used as a functional language and how we can use functions to create abstractions. Abstractions are useful because they typically provide some sort of encapsulation to make other code easier to write.

We will be discussing the following with illustrated examples:

  • Functions as abstractions.
  • Function to build Modules.
  • Function to avoid global variables.

Functions as abstractions

  • In JavaScript we have a variable pointing to a function.
  • We will create a variable called work and want that variable to immediately point to a function. The purpose of this function is to abstract away some sort of operation that needs to be performed. We need to do some work, we want to wrap all that work up inside this function, and assign it to a variable called task.

For example,



Figure 1: Task

Next, we will increase the level of abstraction and define a function that will execute some work. This is quite helpful in case you pass a function to do something on your behalf.

Let us create another variable called todo extending the previous function as in the following code snippet :



Figure 2: Todo

Function to build Modules

Functions are a useful abstraction in JavaScript, but sometimes we need more than just a function. Sometimes we need an object, and that object has data and it has methods attached to it, and that's the type of abstraction that we need. The following is the example to demonstrate the scenario. We will create a variable createtask point to two tasks.Here's the snippet:



Figure 3: CreateTask

Next we can call these functions whatever we want. Here's the snippet:



Figure 4: Snippet

Here we are defining the public API and saying here's an object that has two methods, job1 and job2, no one really needs to know what is inside.

**Now the one drawback to the code that we have seen so far, both this code and the previous code snippet is that we are creating global variables.

Next we will see how to avoid global variables.

Function to avoid global variables

  • If you've been doing software development for any time, you've probably heard that global variables are bad. They easily become a source of confusion and bugs.
  • To avoid this we will use Immediately Invoked Function Expression (IIFE).

Syntax

( function() { ………….} () );

All the code is wrapped inside one function called IIFE. A lot of libraries use IIFEs to control the scope of the variables to build modules to provide encapsulation, and most of all to avoid those global variables.

Up Next
    Ebook Download
    View all
    Learn
    View all