• Dan Chamorro

My Weekly Full-Stack Developer Journey — Week 3: JavaScript Part2


This week I continued my dive into JavaScript. Here is what I learned and how I understand it.



Execution Context & Lexical Environment

Execution context is a concept in the language spec that — in layman’s terms — roughly equates to the ‘environment’ a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object. — Stack Overflow
A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code. A Lexical Environment consists of an Environment Record and a possibly null reference to an outer Lexical Environment. — Stack Overflow

How I understand it. The Execution Context is the environment a function executes in. Lexical Environment is the environment your code is written in. The way to think about it is that each function or code you write is its own planet or world and each world has its own environment / lexical environment and those worlds also create their own execution context.



Hoisting

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function). — w3schools

How I understand it. Hosting is when variables, specifically with the keyword var and function declarations are moved to the top of their scope before any code is executed. So this means that you can invoke a function even before you have declared it. Underneath the hood, the JavaScript engine is looking for anything that starts with var or function so that it can allocate memory for it. The engine is saying, I know you're going to use this and I'm not sure what for, but I'll save it and for now, and I'll give it the value of undefined( undefined means, yes we have this variable but it is not assigned to anything).


Variables with keyword var are only partially hoisted. Meaning the variable gets hoisted but not the value of the variable, thus getting undefined. Also, let and const don’t get hoisted. Side note, hoisting happens on every execution context.



Scope Chain

Within each execution context is a special object called a scope chain which is used to resolve variables. A scope chain is essentially a stack of currently accessible scopes, from the most immediate context to the global context. — Toptal

How I understand it. When I think of scope chain I relate it to a chain of command. Let’s say there is a business of three people. There is a CEO, a Manager, and one Employee. In code, this would be a function with a variable that returns another function with a variable that returns one more function with a variable.


If you are the CEO, you could request a meeting with anyone at the company. But if you're the employee, you can only request a meeting with the manager, you can't go straight to the CEO. Scope chain is the same. The main function can access the nested function's variables but the nested functions can only access the variables of the function above it


Conclusion


This week was another awesome week of learning. This blog was no way intended to be an expert point of view. It’s just how I understood these concepts. I welcome all readers to leave any comments that you might think will better help me understand these concepts, or if there are any concepts that you think I’m not really understanding. Thanks for reading see you next week.

 
  • Facebook
  • Twitter
  • LinkedIn

©2019 by Dan Chamorro.