{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-06-24-emulate-blockscope/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"97f083c5-5509-58e9-bda4-2dc2a56a0541","html":"

Problem

\n

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

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

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

    \n
    var aVariable = 2345;\n// Block should start here\nvar aVariable = 4711;\nconsole.log(aVariable);      // should print 4711\n// Block should end here\nconsole.log(aVariable);      // should print 2345, but prints 411
    \n
    2. \n
\n\n
    \n
  1. \n

    Put the code into an anonymous function.

    \n
    var aVariable = 2345;\nfunction() {\n  var aVariable = 4711;\n  console.log(aVariable);\n}\nconsole.log(aVariable);
    \n
    2. \n
  2. \n

    Put the function into a pair of rounded brackets.

    \n
    var aVariable = 2345;\n(function() {\n  var aVariable = 4711;\n  console.log(aVariable);\n});\nconsole.log(aVariable);
    \n
    3. \n
  3. \n

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

    \n
    var aVariable = 2345;\n(function () {\n  var aVariable = 4711;      // prints 4711\n  console.log(aVariable);\n})();\nconsole.log(aVariable);      // prints 2345
    \n
    4. \n
  4. Voilá, there you got an emulated block scope.
    5. \n
\n

Variants

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-06-24-emulate-blockscope/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-06-24T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Emulate block level scope"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-06-24-emulate-blockscope/"}}}