nickb nickb - 5 months ago 8x
Javascript Question

Encapsulation in ​JavaScript

A long time ago, I saw someone encapsulate their entire JavaScript block with code something like the code below:

(function() {
// ...


  1. Is the code above correct?

  2. What benefit is there to encapsulating the entire JavaScript block like denoted above?


Yes, that's correct. It's called a self invoking anonymous function expression.

JavaScript variables have either function scope, or global scope. There is no block scope. Enclosing your code in a self invoking function like the one in your example creates a temporary local scope for single-use, immediately-run code, without polluting the global namespace.

Consider the following:

   (function() { 
      var x = '';

      function myFunction () {
         alert('Hello: ' + x);

      x = 'Bob';

      alert(typeof x);            // string
      alert(typeof myFunction);   // function

   alert(typeof x);               // undefined
   alert(typeof myFunction);      // undefined
<script src="other-javascript.js"></script>

Whatever you declare in that self invoking function is held in a separate scope. The variable x and the function myFunction() cannot be accessed from anywhere else. The code in other-javascript.js won't see them, for example, and it would be free to declare another function myFunction() without conflicts.