What is function hoisting in JavaScript?

Function Expression

var foo = function foo(){ 
 	return 12; 
}; 

In JavaScript, variable and functions are hoisted. Let’s take function hoisting first. Basically, the JavaScript interpreter looks ahead to find all variable declarations and then hoists them to the top of the function where they’re declared. For example:

foo(); // Here foo is still undefined 
var foo = function foo(){ 
 	return 12; 
}; 

Behind the scene of the code above looks like this:

var foo = undefined;
    foo(); // Here foo is undefined 
 	   foo = function foo(){
 	      / Some code stuff
      }
var foo = undefined;
 	 foo = function foo(){
 	     / Some code stuff
    }
    foo(); // Now foo is defined here
Asked on January 18, 2019 in Javascript.
Add Comment


  • 10 Answer(s)

    (1) JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.

    (2) Javascript’s declaration of variables in a function scope, meaning that variables declared in a function are available anywhere in that function, even before they are assigned a value.

    (3) Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.

    <script>
    var a = 1;          //global a = 1
    function b() {
        a = 10;         
        var a = 20;     //local a = 20
    }
    b();
    alert(a);           //global a  = 1
    </script>

     

    Answered on January 19, 2019.
    Add Comment

    Function Hoisting

    There are 2 ways of creating functions in JavaScript, through Function Declaration and through Function Expression. Let’s see what these are and how hoisting affects them.

    Function Declaration

    The function declaration defines a function with the specified parameters.
    Syntax:

    function name(param1, param2, ...) {
      [statements]
    }

    In JavaScript, function declarations hoist the function definitions.

    Therefore, these functions can be used before they are declared.
    Example:

    hoisted() // output: "Hoisted"
    function hoisted() {
      console.log('Hoisted')
    }

    Behind the scenes, this is how the JavaScript interpreter looks at the above code:

    // Hoisted code
    function hoisted() {
      console.log('Hoisted')
    }
    // Rest of the code
    hoisted() // output: "Hoisted"
    Answered on January 20, 2019.
    Add Comment

    Variable declarations are one of the most basic aspects of any programming language. However, JavaScript has a little quirk, known as hoisting, which can turn an innocent looking declaration into a subtle bug. This article explains what hoisting is, and how you can avoid being burned by it.

    JavaScript is an extremely flexible language, and will happily allow you to declare a variable almost anywhere. For example, the following immediately-invoked function expression (IIFE) declares three variables and then displays them using an alert dialog box. As a side note, you should never use alert boxes, but we’re trying to prove a point here.

    (function() {
      var foo = 1;
      var bar = 2;
      var baz = 3;
    
      alert(foo + " " + bar + " " + baz);
    })();
    Answered on January 20, 2019.
    Add Comment

    function definition hoisting only occurs for function declarations,

    Function Declaration

    The function declaration defines a function with the specified parameters.
    Syntax:

    function name(param1, param2, ...) {
      [statements]
    }

    In JavaScript, function declarations hoist the function definitions.

    Therefore, these functions can be used before they are declared.
    Example:

    hoisted() // output: "Hoisted"
    function hoisted() {
      console.log('Hoisted')
    }

    Behind the scenes, this is how the JavaScript interpreter looks at the above code:

    // Hoisted code
    function hoisted() {
      console.log('Hoisted')
    }
    // Rest of the code
    hoisted() // output: "Hoisted"

    This behaviour is true if you have function declarations in the Global Scope or Functional Scope (basically Local Scope in JavaScript).

    This can be helpful because you can use your higher-level logic at the beginning of the code making it more readable and understandable.

    Note: Never use function declarations inside if/else blocks.

    Answered on January 20, 2019.
    Add Comment

    Function Hoisting
    function declarations are also hoisted. However, functions that are assigned to variables are not hoisted. For example, the following code will work as expected due to function declaration hoisting.

    foo();

    function foo() {
    alert(“Hello!”);
    }
    However, the following example will fail spectacularly. The variable declaration for foo is hoisted before the function call. However, since the assignment to foo is not hoisted, an exception is thrown for trying to call a non-function variable.

    foo();

    var foo = function() {
    alert(“Hello!”);
    };

    Answered on January 26, 2019.
    Add Comment

    The variable declaration, var message whose scope is the function hoist(), is hoisted to the top of the function.

    To avoid this pitfall, we would make sure to declare and initialise the variable before we use it:

    function hoist() {
    var message=’Hoisting is all the rage!’
    return (message);
    }

    hoist(); // Ouput: Hoisting is all the rage!

    Answered on January 27, 2019.
    Add Comment

    In JavaScript, a variable can be declared after it has been used.
    In other words; a variable can be used before it has been declared.
    x = 7; // Assign 7 to x
    elem = document.getElementById(“demo”); // Find an element
    elem.innerHTML = x; // Display x in the element
    var x; // Declare x

     

    Answered on January 31, 2019.
    Add Comment

    To understand what’s going on here, you have to understand hoisting. Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope. However, only the actual declarations are hoisted. Any assignments are left where they are.

    Answered on February 3, 2019.
    Add Comment

    To understand what’s going on here, you have to understand hoisting. Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope. However, only the actual declarations are hoisted. Any assignments are left where they are.

    Answered on February 4, 2019.
    Add Comment

    I am learning javascript hoisting and came across a scenario for which I need a bit more explanation. Below is the program that I have test(); console.log(“The value of data is “+data); function … console as undefined so I presume that the data variable is hoisted. Is variable hoisting only inside the function? In the above program, if the data is hoisted does that imply that the data variable …

    Answered on February 5, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.