JavaScript Tutorial — Lexical Environment

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

Lexical Environment in JavaScript is created every time you create a scope using the curly brackets {}. It can be nested: {{…}}

Watch this video I that explains the idea behind Lexical Environments.

JavaScript Tutorial 1 — Lexical Environment

A Lexical Environment is created behind the scenes. It’s just a logistical concept. There is no way to actually access it from your JavaScript code.

You may have been creating Lexical Environments all along. You just didn’t know it. In this diagram each LE is color-coded. It’s a very subtle but important feature.

Using scope brackets, you can determine the structure of your computer program. Together with data types, functions and variable definitions you can craft an entire application structure that determines its data conduit:

The scope (same as lexical context) determines the way your data will travel throughout your application via statements and expressions.

The scope (same as lexical context) determines the way your data will travel throughout your application via statements and expressions.

If you don’t understand Lexical Environments it will be difficult to understand the difference between let and var keywords.

Variables defined with var are hoisted, but the let keyword conceals variables to the scope in which it was defined.

The let keyword conceals that variable to its own scope. It provides data privacy because sometimes you want to limit the use of a variable to a scope.

The var keyword “hoists” (or lifts up) the variable definition (its name) up all the way to the global scope. Regardless what block-scope your variable is defined in using var, it always becomes available at the uppermost scope.

For these reasons the let keyword is considered to be a “safer” alternative to the var keyword, even though in a few cases they produce exactly the same behavior. The difference is that let always conceals to the scope its defined in.

There are exceptions. Variables defined inside function-scope are concealed to it — regardless of whether you used var or let. This is also true of callback functions (which are essentially are function-scope.)

Sponsored by Learning Curve — independent book publishing company that provided these amazing illustrations for free. Thank you!

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store