JavaScript - Fundamentals - Hoisting, resolving this and Arrow functions (Part-I)

Hello! I'm starting a new series on JavaScript, where we will be covering the JS essentials and also will look at some of the new ES6 features on offer.

In this article, we will be covering:

1. Hoisting
2. Functions, their types, resolving this
3. Normal function vs Arrow Function

1. Hoisting

• Its a process of moving all function, variables to the top of the current scope (function or entire JavaScript file). 
• JS only hoists declarations but not initializations.
• let and const are hoisted to the top of the current block but not initialized, meaning variable is available but value isn’t until its been declared.
• Using let before its declared throws reference error
• Using const before its declared throws syntax error
• JS Initializations are not hoisted
• 
  

      //Hoisting happens both for variables & functions

      //Hoisting does not happen inside function

      //Hoisting happens only for the declarations (var & function), not initialization

  
  

      function displayXY() {

      //declaration

      console.log("From function, X is ", x);

      console.log("From function, Y is ", y);

      var y = 5;

      console.log("From function, Y is ", y);

      console.log("From function, Z is ", z);

      var z;

      z = 10;

      }

      var x;

      x = 1;

      displayXY();

  
  

      /*

          From function, X is  1

          From function, Y is  undefined

          From function, Y is  5

          From function, Z is  undefined :  z is declared inside the function

          */

  
  

      /***************************************/

  
  

      function displayXY() {

      console.log("From function, X is ", x);

      console.log("From function, Y is ", y);

      }

      var x;

      x = 1;

      var y = 5;

      displayXY();

  
  

      /*

          From function, X is  1

          From function, Y is  5 : Y is not hoisted, but still initialized before function call

          */

  
  

      /***************************************/

  
  

      myFunc();

      var myFunc = function () {

      console.log("inside my func");

      };

  
  

      //Uncaught TypeError: myFunc is not a function :  because function

      //is not hoisted as its a initialization
  

      /***************************************/

  
  

      isItHoisted();

  
  

      function isItHoisted() {

      console.log("Yes!");

      }

  
  

      // Outputs: "Yes!", function is hoisted because its a declaration

  
  

      /***************************************/

  
  

      // ReferenceError: funcName is not defined

      funcName();

  
  

      /***************************************/

  
  

      // Uncaught TypeError: varName is not a function

      varName();

      var varName = function funcName() {

      console.log("Definition not hoisted!");

      };

  
  

2. JavaScript Functions

• Function Types

• Normal Function

• Function declaration

• 
  

      // Function declaration

      function displayName(name) {

      return `Hello, ${name}!`;

      }

  
  

• Function expression

• 
  

      // Function expression

      const displayName = function(name) {

      return `Hello, ${name}`;

      }

  
  

• Arrow Function

• 
  

      const displayName = (name) => {

      return `Hello, ${name}!`;

      };

  
  

• Function Invocation - resolving this

• Simple Invocation

• 
  

      function myFunction() {

      console.log(this);

      }

      // Simple invocation

      myFunction(); // this refers to window object

  
  

• Method Invocation

• 
  

      const obj= {

      method() {

          console.log(this);

      }

      };

      // Method invocation

      myObject.method(); // logs obj

  
  

• Indirect Invocation
• call(thisObj, arg1, arg2, ...argN) 
• apply(thisObj, [arg1, arg2, ...argN]) method

• 
  

      function myFunction() {

      console.log(this);

      }

      const myObj= { value: 'Hello World!' };

      myFunction.call(myObj);  // logs { value: 'Hello World!' }

      myFunction.apply(myObj); // logs { value: 'Hello World!' }

  
  

• Constructor Invocation
• this object refers to newly created instance

• 
  

      function MyFunction() {

      console.log(this);

      }

      new MyFunction(); // logs an instance of MyFunction

  
  
  

3. Normal function vs Arrow function

Difference	Normal Function	Arrow function
this keyword	this value (execution context) is dynamic, meaning how the function is invoked.	It doesn’t define its own execution context. It resolved value of this lexically, meaning this of arrow will equal to this of outer context. After the indirect invocation, this value would still be resolved lexically.
Constructors	Regular functions can be used to create objects using new keyword.	Cannot be used as a constructor as this keyword is resolved lexically.
Argument object	Inside body, arguments are a special array like object containing list of arguments with which function has been invoked.	No special keyword as arguments available.  Use REST parameter instead.
Implicit return	Implicitly returns undefined.	You can return normally as you would do. In case, curly parenthesis is removed for one line statement, then the expression is implicitly returned.
Methods	For supplying methods as callback (setTimeout), this object is referred as global object. We manually must bind this value while calling it.	Arrow functions can be used inside a class. this is bind to the lexical scoping, to class instance.

JavaScript - Fundamentals - Hoisting, resolving this and Arrow functions (Part-II)

Happy Learning :)