What impact does function declaration have on hoisting?

Question

What impact does function declaration have on hoisting?

The following two code snippets produce different outputs, even though the inner function is not being called.

var a = 1;
function foo(){
  a= 2;
}
foo();
console.log(a);   // 2

However, when I add a function with the same name, the output changes. Even though I am not calling the a()

var a = 1;
function foo(){
  a= 2;
  function a(){
    a = 3;
  }
}
foo();
console.log(a);   // 1

Shouldn't it be 2? Why does it log 1?

javascript hoisting

Answer 1

Answer №1

When a variable named a is declared inside the function foo, any assignments to variables also named a within the foo function will refer to that local identifier, not any potential outer variables with the same name. This concept can be illustrated as follows:

var a = 1;
function foo(){
  // an identifier named `a` is initialized in this scope
  var a;
  // function declarations are hoisted
  a = function a(){
    a = 3;
  }
  // assignment to the local identifier `a`
  a= 2;
}
foo();
console.log(a);   // 1

Answer 2

When a variable named a is declared inside the function foo, any assignments to variables also named a within the foo function will refer to that local identifier, not any potential outer variables with the same name. This concept can be illustrated as follows:

var a = 1;
function foo(){
  // an identifier named `a` is initialized in this scope
  var a;
  // function declarations are hoisted
  a = function a(){
    a = 3;
  }
  // assignment to the local identifier `a`
  a= 2;
}
foo();
console.log(a);   // 1

What impact does function declaration have on hoisting?

Answer №1

Similar questions

Google Maps GeoCoding consistently relies on the language settings of the browser in use

"Transmitting a message with socket.io upon establishing connection

Node.js HTTP requests abruptly ceasing after a few seconds

Update search results when performing a new search on a web application (without using jQuery)

The find function within $(this) is malfunctioning

I am facing difficulties in installing the necessary node modules for my Angular project

Enhancing audio control features using HTML and JavaScript

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

Incorporating dynamic data binding using AngularJS in a span tag

What is the best way to obtain the output produced by a function when a button is clicked

Simultaneously scroll through various div elements

What steps can be taken to resolve the error message "Path must be a string. Received undefined" that is occurring in webpack4 with the copy-webpack-plugin?

Integrating specific data entries into a Sencha Touch store

Using Next.js with Firebase emulators

Ways to implement a filter pipe on a property within an array of objects with an unspecified value

Unpacking a mongoose record

Interacting with my Rails API through JavaScript requests

Is it possible to submit two forms simultaneously using jQuery or AJAX?

The fetch() function is inundating my API with an overwhelming amount of requests

Exploring the functionalities of MongoDB through Populate, Aggregate, and Un