Enhancing one's comprehension of precompiling JavaScript

Question

Enhancing one's comprehension of precompiling JavaScript

var foo=1;
function bar(){
  foo=10;
  return;
  function foo(){}
}
bar();
alert(foo);

As I delve deeper into the inner workings of JavaScript running on the machine, I stumbled upon this code snippet. Despite my best efforts, I am perplexed as to why the final alert displays 1 instead of 10. If anyone could shed some light on how the JavaScript virtual machine processes these lines of code, I would greatly appreciate it. Thank you!

javascript precompile

Answer 1

Answer №1

The reason for this behavior is function declaration hoisting:

var x = 1;
function y(){
  function x(){} // The engine moves this function declaration up
  x = 10; 
  return;
}
y();
alert(x); // Since the local variable x was reassigned, not the global one, it remains 1

Answer 2

The reason for this behavior is function declaration hoisting:

var x = 1;
function y(){
  function x(){} // The engine moves this function declaration up
  x = 10; 
  return;
}
y();
alert(x); // Since the local variable x was reassigned, not the global one, it remains 1

Answer 3

Answer №2

I am puzzled as to why the final alert shows a value of 1 instead of 10.

This discrepancy occurs due to the foo variable within the function bar:

foo = 10;

...being associated with the function declaration later in that same function:

function foo(){}

...rather than the foo variable outside of that function. Specifically, this is referencing:

var foo=1;
function bar(){
  foo=10;           
  return;
  function foo(){}    
}
bar();
alert(foo);

The reason for this behavior can be attributed to two factors:

Function declarations are immediately processed upon entering the containing scope (in this case, the call to bar), before any step-by-step execution of code within the function. This phenomenon, sometimes referred to as "hoisting," ensures that all declarations are handled beforehand regardless of their placement in the code.
Function declarations effectively create variables with identical names as the functions themselves. Therefore, the foo referenced in the function declaration acts as a variable with that name - thereby allowing assignment of new values to these "variable-like things."

When the provided code runs, here's the sequence of actions performed by the JavaScript engine:

Creates a variable named foo with an initial value of undefined.
Defines the bar function, registering it as an in-scope symbol within the current context and associating it with the function definition.
Begins executing the code step-by-step within this scope.
Sets the value of foo to 1.
Invokes the bar function.
Establishes the foo function relevant to the bar call, creating it as an in-scope symbol during the function invocation.
Initiates the step-by-step processing within this nested scope.
Assigns the value 10 to the local foo, which previously referenced the function itself.
Exits from the function.
Executes the alert function using the foo within this specific scope, still holding the original value of 1.

Further insights into this intricate process can be found in Section 10.4.3 of the ECMAScript specification along with its related sections.

* "variable-like thing": In JavaScript, every execution context (comprising the global context and all contexts resulting from function calls) maintains a binding object to manage various identifiers and their corresponding values within that specific context. The binding object incorporates properties for each variable, function declaration, and other essential elements like the arguments pseudo-array and the function name referring back to itself. Consequently, changing the value of foo within bar overrides the reference to the foo function declared inside bar rather than modifying the outer-scoped variable. Essentially, foo behaves akin to a local variable within bar due to the function declaration.

Answer 4

I am puzzled as to why the final alert shows a value of 1 instead of 10.

This discrepancy occurs due to the foo variable within the function bar:

foo = 10;

...being associated with the function declaration later in that same function:

function foo(){}

...rather than the foo variable outside of that function. Specifically, this is referencing:

var foo=1;
function bar(){
  foo=10;           
  return;
  function foo(){}    
}
bar();
alert(foo);

The reason for this behavior can be attributed to two factors:

Function declarations are immediately processed upon entering the containing scope (in this case, the call to bar), before any step-by-step execution of code within the function. This phenomenon, sometimes referred to as "hoisting," ensures that all declarations are handled beforehand regardless of their placement in the code.
Function declarations effectively create variables with identical names as the functions themselves. Therefore, the foo referenced in the function declaration acts as a variable with that name - thereby allowing assignment of new values to these "variable-like things."

When the provided code runs, here's the sequence of actions performed by the JavaScript engine:

Creates a variable named foo with an initial value of undefined.
Defines the bar function, registering it as an in-scope symbol within the current context and associating it with the function definition.
Begins executing the code step-by-step within this scope.
Sets the value of foo to 1.
Invokes the bar function.
Establishes the foo function relevant to the bar call, creating it as an in-scope symbol during the function invocation.
Initiates the step-by-step processing within this nested scope.
Assigns the value 10 to the local foo, which previously referenced the function itself.
Exits from the function.
Executes the alert function using the foo within this specific scope, still holding the original value of 1.

Further insights into this intricate process can be found in Section 10.4.3 of the ECMAScript specification along with its related sections.

* "variable-like thing": In JavaScript, every execution context (comprising the global context and all contexts resulting from function calls) maintains a binding object to manage various identifiers and their corresponding values within that specific context. The binding object incorporates properties for each variable, function declaration, and other essential elements like the arguments pseudo-array and the function name referring back to itself. Consequently, changing the value of foo within bar overrides the reference to the foo function declared inside bar rather than modifying the outer-scoped variable. Essentially, foo behaves akin to a local variable within bar due to the function declaration.

Answer 5

Answer №3

This topic relates to a programming concept known as hoisting. When you define a function using function foo, it is basically just another way of writing var foo = function ... So, within the bar function, the name foo actually refers to a local variable that shadows the outer foo variable. Initially, this foo is a function, but it later gets redefined as the number 10.

With hoisting, the name foo is "reserved" and scoped during the parsing phase before the code is executed. In essence, it operates as follows:

function bar(){
  var foo = function () {};
  foo = 10;
  return;
}

Therefore, it doesn't overwrite the outer variable at all.

Answer 6

This topic relates to a programming concept known as hoisting. When you define a function using function foo, it is basically just another way of writing var foo = function ... So, within the bar function, the name foo actually refers to a local variable that shadows the outer foo variable. Initially, this foo is a function, but it later gets redefined as the number 10.

With hoisting, the name foo is "reserved" and scoped during the parsing phase before the code is executed. In essence, it operates as follows:

function bar(){
  var foo = function () {};
  foo = 10;
  return;
}

Therefore, it doesn't overwrite the outer variable at all.

Enhancing one's comprehension of precompiling JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Resizing svg to accommodate a circle shape

Generate arrays with custom names by parsing JSON data

Is your $http request causing an XML parsing issue?

What is the best way to send the selected option from a dropdown to a button click function within the controller?

"Despite the null date in Node.js, the validation for expiration dates less than Date.now() is still being enforced

Looking to fill every space? Try using React with MUI Grid!

Is there a way to allow only the block code to shift while keeping the other span tags stationary?

Modify the information and return it to me

Creating a reusable anonymous self-invoking function

What is the best way to incorporate CSS into JavaScript code?

Getting Rid of Angular Material Suggestions: A Step-by-Step Guide

Discover the method to calculate the combined file size of multiple uploads with jquery

Encasing newly inserted child components within my designated slot

Validating a string using regular expressions in JavaScript

Issues with Javascript functionality on aspdotnetstorefront site

Incorporating graphics into a React component

Using VueJs's createElement() to dynamically insert HTML content

Having trouble making the child process die in NodeJS fork

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

What is the best way to update and add data with just one click using jQuery?