Identifier resolution in JavaScript

Identifier resolution in JavaScript
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

While Syndicode is looking for JavaScript developer, we continue to collect different useful materials about JS. This time let’s talk about how to move function variables to the top. In general, our topic is identifier resolution in JavaScript.

In Hoisting in JavaScript by Yash Agraval “hoisting” means lifting Variables and Function declarations to the top of a function or a global scope.

JS is an interpreted language which means that unlike compiled languages JS code runs line by line. Starting from the very top, when the code is executed in Javascript, an execution context is set up. There are two major types of execution contexts in JS:

  • Global execution context and
  • Function execution context

Since Javascript is based on a single threaded execution model, only one piece of code can be executed at a time.

Picture is taken from the original article “Hoisting in JavaScript”

Lexical environment basically is an internal implementation of the JavaScript scoping mechanism. Generally, the lexical environment is associated with a specific structure of the JavaScript code, for example, a function or a block of code like a for a loop. Whenever a function is created, a reference to the lexical environment in which it was created is passed in an internal property named Environment.

In the article of Yash Agraval we mentioned above, you will find samples of how to resolve an identifier within a lexical environment (and what lexical environment is) and the way JS code execution happens.

The execution of JS code happens in two phases:

  1. The first phase registers all the variables and function declarations within the current lexical environment.
    The current code is scanned for function declarations, function expressions and arrow functions are skipped. For every function that is discovered a new function is created and bound to the environment with the function’s name.
    Then the current environment is scanned for variables. Variables defined with var and placed outside other functions are found and an identifier is registered with its value initialized to undefined. If an identifier exists, the value is left untouched.
  2. In the second phase, Javascript execution begins.

The hoisting() function is attached to an identifier after setting up the global context. Then in the next step, the variable notyetdeclared is registered and its value is initialized to undefined. The hoisting() function is already registered to an identifier in phase 1 and when the JS code starts executing in the global context in phase 2, it looks up the lexical environment for hoisting and finds the function even before its definition. Notyetdeclared is registered to an identifier and initialized to undefined in phase 1 and hence no error is thrown.

Finally, we are in the hoisting environment.

Additional reading to find more information: JavaScript Closures, Identifier Resolution and Closures in the JavaScript Scope Chain

Also subscribe to our weekly newsletter not to miss anything interesting!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111