5 Essential Concepts of Javascript Every Beginner should know

Hello everyone ✋, welcome back to the Javascript series. In our previous post we’ve discussed about basics of javascript. In this post we’ll discuss about 5 essential concepts of javascript.

Most of the beginners fortuitously skip these concepts with lack of understanding. By reading this post you won’t skip these important concepts of javascript. so let’s get started.

1. Scope

If you’d like to code in javascript understanding the scope of the variable is must. Scope in javascript is nothing but the availability of the variables at current context.

There are two types of scope in javascript.

1.Global Scope
2.Local Scope

Global Scope :

Variables which are declared outside of the function are called global variables. Global variables are accessible throughout the program and can be modified by any function. Let us look at the example.

<script>
    var globalVar = 'Hello';
    function get_globalVar(){
           alert(globalVar);  //Hello
    }
    function modify_globalVar(){
           globalVar = 'Hello world!';
           alert(globalVar);  // Hello world!
    }
    get_globalVar();
    modify_globalVar();
<script>

In the above code snippet the variable globalVar is a global variable, because it is declared outside the function(Global space). The function get_globalVar() will alert the content of the globalVar on to the screen before modifying it, As I told you before any function can modify the global variables. In the above example the function modify_globalVar() will modify the variable globalVar and alerts the updated value of globalVar on to the screen.

Local Scope :

Variables which are declared inside the function with “var” keyword are called local variables. Local variables are not accessible and cannot be modified outside the function declaration.

<script>
  function createLocalVar(){
      var localVar = 'Hello world!';
      alert(localVar); // Hello world
  }
  alert(localVar);  //error: localVar is not defined
<script>

In the above example line 6 will throws an error because local variables are not accessible outside the function(global space).Local variables are accessible only within the function.so the function createLocalVar() will create the local variable and alerts the value of the local variable localVar on to the screen.

2. Hoisting

Hoisting is a javascript mechanism where variable and function declarations are moved to the top of the scope before code execution. The advantage of this mechanism is no matter where the variables and functions are declared they will move to the top of the scope before the execution, regardless of the type of scope.Let us look at the example.

<script>
     name = 'hello world!';
     alert(name)  // hello world!
     var name;
<script>

In the above example the variable “name” will move to the top of the scope which was declared at the bottom and initializes to the value “hello world!”. Let us look at the other code snippet for better understanding.

<script>
     alert(name)  // undefined
     var name = 'hello world!;
<script>

In this code snippet the variable “name” will move to the top of the scope but it is not initialized. so it is undefined. Same mechanism is applicable for functions and it is called function hoisting.

3. Call stack

Call stack is a mechanism for an interpreter to keep track of it’s place in a script that calls multiple functions. Call stack is useful to understand which part of the code is under execution at the current context. Let us look at the example.

<script>
    console.log('hello world!') // statement X
    function B(){
     console.log('In function B')
    }
    function C(){
    console.log('In function C');
    }
    function A(){
      B();
      C();
    }
    A();
    console.log('This is the end!!') // statement y
<script>

Let us try to understand the call stack used in the above code snippet.

1. At the beginning of the script main() is pushed into the stack for execution.

2. After that “statement x” is pushed into the stack, after it’s execution it is popped from the stack.

3. Function A() is pushed into the stack.

4. Function B() is pushed into the stack,later it is popped from the stack after it’s execution.

5. Now C() will be pushed and after completion of it’s execution it is popped.

6. So after step 5 function A() completes its execution and it is popped.

7.At the end of the code “statement y” is pushed into the stack and popped after it’s execution.

8.Finally main() is popped out of the stack, because it’s execution was completed and stack becomes empty.

4. IIFE

IIFE( Immediately invoked function expression) is a javascript function which invokes as soon as it is defined. It is also known as “self executing anonymous function”.

Ok now the question raises, what is the use of IIFE ? Let’s see.

IIFE is very useful because it provides a way to isolate variable declarations. In some cases unfortunately you may reinitialize the variables, which may leads to the wrong result.To avoid this IIFE is useful, IIFE doesn’t pollute the global variables.

The primary reason to use an IIFE is to obtain data privacy. Any variable which is declared within the IIFE cannot be accessed by the outside world. Let us look at the example.

<script>
   (function (){
    var name = 'Hello world!';
    console.log(name); // Hello world!
   })();
   console.log(name) // Reference error:name is not defined
<script>

You can also name the function explicitly and invoke it, Like below.

<script>
   function IIFE(){
     var name = 'Hello world';
     console.log(name); // Hello world!
   }
   IIFE();
   console.log(name); // Reference error : name is not defined
<script>

But there are some drawbacks in above code snippet.First one is “it is unnecessarily takes up a name in the global space which increases the possibility of collision”.second one is “unfortunately we may call the function more than once”, but IIFE is called only once.

5. Closures

The simplest definition of closure is “A function which has access to the outer scope variables”.

<script>
  var name = 'javascript';
  function getName(){
    console.log(name) //javascript
  }
  getName();
<script>

In the above code snippet the function getName() has access to the outer scope variable name. so the function getName() is a closure. Let us look at the most formal definition of closure.

Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.

Let us look at the another example, for better understanding.

<script>
    function OuterFunction() {
       var outerVariable = 1000;
       function InnerFunction() {
           alert(outerVariable);
       }
    return InnerFunction;
    }
    var innerFunc = OuterFunction();

    innerFunc(); //1000
<script>

In the above example, return InnerFunction returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

Conclusion

In this post, we’ve discussed about 5-essential concepts of javascript, Let’s dive deep into javascript in the upcoming posts. see you shortly 😊.

Hello World!