DEV Community

Cover image for Context, Scope, & Variables in JavaScript
Sushrut Mishra
Sushrut Mishra

Posted on

Context, Scope, & Variables in JavaScript

In JavaScript, the availability of variables is referred to as scope. Scope is determined by where a variable is declared.
Context is the state of the current execution of code. It is accessed through the 'this' pointer.

Variable Scope

Variables in JavaScript are declared using the var, let, or const keywords.

The difference between these three comes down to two factors:

  1. Assignment Mutability
  2. Supporting nonfunction block scope.

Assignment Mutability

An assignment is an act of pointing that variable in memory, as all the variables act as pointers.
Mutability is whether or not a variable can be reassigned once it has initially been assigned something.

Scope

The block of code where a variable or argument is declared determines its scope.
When using let or const, an argument’s or a variable’s scope is always the actual block in which it is declared.

Example -
Image
What would be the output of the last console.log?

What do you think would be output if I replace 'var' with 'let'.
It gives an error. Why?
Because calling var in an 'if' or 'loop' will assign the variable to the scope of the nearest enclosing function.
Image2
While for let, scope is always the actual block in which it is declared.

Context and 'this' keyword

When a function is invoked, there is always an object container around that function.
This object container is its context and 'this' keyword points to that context.
Context is not set when a function is declared, but rather where it is invoked.

Bonus: JavaScript Engine

An engine that interprets JavaScript code is called JavaScript Runtime. It can be part of a browser or other runtime environment like a server.
JavaScript engines are powerful in terms of optimizing the execution & following the ECMAScript standard.

What is the ECMA standard?

The full form of ECMA- European Computer Manufacturer's Association. It is a Standard for scripting languages such as JavaScript.
Call it a blueprint of scripting languages and JavaScript as the implementation of it.

Feature of JS runtime engine

The defining feature is: It is Single-Threaded. Suppose a Stack. The work currently in progress in the stack owns the thread.
The rest of the works are lined up in a Queue waiting for their chance. Why? Because Single Threaded.
When the stack gets empty, an event loop takes work from the Queue and places it in the Stack.

It is, of course, in layman terms but shows the basic model of Javascript Runtime Engine.
Just to tell you how the engine works.

Ever-Changing ECMA

As stated, since Javascript is built using the ECMAScript standard, it keeps changing.
Every year an update is released with new features. Syntactical or Semantical.
Changes to obtain clearer syntax are often referred to as - Syntactic Sugar.

I keep posting such informative threads on Twitter too. Make sure to follow me - twitter.com/sushrutkm

Discussion (0)