Emulate block level scope

Problem

You want to emulate block level scope in ES5 to prevent naming conflicts.

Ingredients

• Immediately-Invoked Function Expression (IIFE)

Directions

1. Given: some code that you want to put in a block.

   var aVariable = 2345;
   // Block should start here
   var aVariable = 4711;
   console.log(aVariable);      // should print 4711
   // Block should end here
   console.log(aVariable);      // should print 2345, but prints 411

2. Put the code into an anonymous function.

   var aVariable = 2345;
   function() {
     var aVariable = 4711;
     console.log(aVariable);
   }
   console.log(aVariable);

3. Put the function into a pair of rounded brackets.

   var aVariable = 2345;
   (function() {
     var aVariable = 4711;
     console.log(aVariable);
   });
   console.log(aVariable);

4. Append another pair of rounded brackets. This actually calls the defined function.

   var aVariable = 2345;
   (function () {
     var aVariable = 4711;      // prints 4711
     console.log(aVariable);
   })();
   console.log(aVariable);      // prints 2345

5. Voilá, there you got an emulated block scope.

Variants

• Variant 1: put brackets at the end (as shown in the recipe)

  (function() {
    var aVariable = 4711;
    console.log(aVariable);
  })();

• Variant 2: put brackets inside

  (function() {
    var aVariable = 4711;
    console.log(aVariable);
  }());

Alternative recipes

• Since ES2015: use the let keyword, which provides a native way of declaring block scoped variables.