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

Using Vue to make a REST API call in a JavaScript file

How to dynamically apply the orderBy filter in AngularJS

An error message 'module.js:557 throw err' appeared while executing npm command in the terminal

Leveraging jQuery.ajax() for retrieving c# WebMethod data triggers the error message of 'Unidentified Web Method'

Can someone help me understand why this AJAX script is returning a status code of 404?

Glitchy/Crazy CSS3 Animations

When utilizing "Koa-Rewrite," an AssertionError occurs stating that app.use(rewrite) necessitates a generator function

Prevent selection of specific weekdays in Kendo grid calendar

The jQuery plugin embedded in the Joomla 3.2 module fails to load or function properly

I am having trouble retrieving any data when using jQuery to post JSON data

Choose the initial selection from a dropdown menu using AngularJS

Storing and Retrieving Cookies for User Authentication in a Flutter Application

Guide on creating a similar encryption function in Node JS that is equivalent to the one written in Java

Send an ArrayList to jQuery Flot

Using TypeScript, pass an image as a prop in a Styled Component

Transferring JavaScript to PHP

JavaScript for beginners: show a specified amount of search results and insert a loading indicator at the end

javascript if condition not executing properly

What is the best way to insert a chart into a div using *ngIf in Angular?

Using JavaScript to create an image slider