Scribd
Upload
9 views10 pages

Scoping - Hoisting in Javascript

The document explains the concept of scoping in programming, detailing the three types of scope: global, function, and block scope, as well as the scope chain and its rules. It emphasizes that variables are accessed based on their lexical scoping and that the scope chain allows outer scopes to access their variables, but not vice versa. Additionally, it covers variable environments, hoisting, and the Temporal Dead Zone (TDZ) for let and const variables, highlighting the importance of these concepts in error prevention and code organization.

Uploaded by

Casius Cioata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views10 pages

Scoping - Hoisting in Javascript

The document explains the concept of scoping in programming, detailing the three types of scope: global, function, and block scope, as well as the scope chain and its rules. It emphasizes that variables are accessed based on their lexical scoping and that the scope chain allows outer scopes to access their variables, but not vice versa. Additionally, it covers variable environments, hoisting, and the Temporal Dead Zone (TDZ) for let and const variables, highlighting the importance of these concepts in error prevention and code organization.

Uploaded by

Casius Cioata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Scope and the scope chain

 Scoping  How our program`s variables are organized and accessed.


“Where do variables live?” or “Where can we access a certain, and
where not?”
 Lexical scoping  Scoping is controlled by placement of functions and
blocks in the code; (for ex: A function that is written inside another
function has access to the variables of the parent function). - Variable
scoping is influenced by where exactly we write our functions and code
blocks.
 Scope  Space or environment in which a certain variable is declared
(variable environment in case of functions). There is global scope,
function scope and block scope;
 Scope of a variable  Region of our code where a certain variable can
be accessed.

The 3 types of scope

Global scope: It is for Top level code

 Variables declared outside of any function or block


 Variables declared in global scope are accessible everywhere
Function scope: Each and every function creates a scope:

 Variables declared inside that function scope are only accessible inside
that function, NOT outside.
 Also called: Local scope
Block scope (ES6): Everything that is between {} (such as the block of an if
statement, or a for loop..).
 Variables declared inside the block are only accessible inside that block
and not outside of it.
 Only applied to variables declared with LET or CONST  This is why we
say that let and const variables are block scoped.
 If we declare a variable using “var”  that variable will be accessible
outside the block and would be scoped to the current function or to the
global scope  so we say that var is function scoped.
 Functions are also block scoped (only in strict mode).

THE SCOPE CHAIN


First function is also in global scope, but just to keep it simple we will take as
example the variable.
 These variables are not copied from one scope to another, instead
scopes simply look up in the scope chain until they find the variable that
they need and then they use it.
 This does not work the other way around  A certain scope will not
have access at the variables of the inner scope. (In our example, the first
scope will not have access to the <job> variable that is stored in the
second scope). ONE SCOPE CAN ONLY LOOK UP IN THE SCOPE CHAIN.
 ES6: The const variable is block scoped and var (millennial) variable is
part of the first function scope.  for a variable declared with VAR,
BLOCK SCOPES DON’T APPLY AT ALL they are FUNCTION SCOPED NOT
BLOCK SCOPED  LET and CONST are BLOCK SCOPED
 Our (purple) block scope does not have access to any variables from the
second (yellow) function scope -> the same the other way around.
 Because of lexical scoping -> The way that we can access variables
depends on where the scope is placed (where it is written in the
code).
 None of these 2 copes is written inside of one another they are
both child scopes of first function -> we could even say they are
sibling scopes. -> by the rules of lexical scoping, they cannot have
access to each other variables, simply because one is not written
inside the other one. We can also say scope chain only works
upwards and not sideways.

SCOPE CHAIN VS CALL STACK


 The first scope has access to all the variables from it’s parent scope –
thanks to the scope chain.
 The scope chain is all about the order in which functions are written in
the code
 THE SCOPE CHAIN HAS NOTHING TO DO WITH THE ORDER IN
WHICH FUNCTIONS ARE CALLED;
 THE SCOPE CHAIN HAS NOTHING TO DO WITH THE ORDER OF
THE EXECUTION CONTEXT IN THE CALL STACK
 THE SCOPE CHAIN DOES GET THE VARIABLE ENVIRONMENTS
FROM THE EXECUTION CONTEXT AS SHOWN BY RED ARROWS.
 THE ORDER OF FUNCTION CALLS IS NOT RELEVANT TO THE
SCOPE CHAIN AT ALL

The second function (the 2nd scope)


 It`s scope is = to it’s variable environment
 It`s lexically written within the 1st function  it will have access to all it’s
parent scopes.  the scope chain in a certain scope is = to adding together
all the Variable Environments of all the parent scope.
In the 2nd function we try to call the 3rd function  This works because the 3rd
function is in the scope chain of the 2nd function scope (3rd function is global- so
is available everywhere).
In the 3rd function we try to access the variables d / c / b / a
 d can be accessed  it`s in the function scope  c is not in the local scope,
JS needs to do a variable lookup  looks up in the variable chain, looking for
variable C but it’s not there because c is defined in the 2nd function and there is
no way that 3rd function can access variables in the 2nd function.  same for b
variable.

SUMMARY
 Scoping asks the question: Where do variables live? or Where can we access a
certain variable, and where not?
 3 types of scopes in JS: Global scope, Scopes defined by functions, and scopes
defined by blocks starting in ES6;
 Only let and const variables are block-scoped. Variables declared with var end up
in the closest function scope;
 In JS we have lexical scoping, so the rules of where we can access variables are
based on exactly where in the code functions and blocks are written;
 Every scope always has access to all the variables from all its outer scopes. This is
the scope chain!
 When a variable is not in the current scope, the engine looks up in the scope chain
until it finds the variable it`s looking for. This is called variable lookup;
 The scope chain is a one-way street: a scope will never, ever have access to the
variables of an inner scope;
 The scope chain in a certain scope is equal to adding together all the variable
environments of the all-parent scopes;
 The scope chain has nothing to do with the order in which functions were called. It
does not affect the scope chain at all!

VARIABLE ENVIRONMENT: HOISTING AND THE TDZ

Variable environment:
 Hoisting: Makes some types of variables accessible/usable in the code
before they are actually declared: “Variables lifted to the top of their
scope”.
 In fact: Before execution, code is scanned for variable declarations,
and for each variable, a new property is created in the variable
environment object.

 Function declarations: We can use function declarations before they are


actually declared in the code
 Var variables: When we try to access a var variable before it`s declared
in the code we don’t get the declared value, but we get undefined.
 Let and const variables: Not hoisted. Value is uninitialized. These
variables are placed in a so called: Temporal Dead Zone (TDZ)  We
cant access the variables between beginning of the scope and the place
where the variables are declared.
If we attempt to use a let or const variable before it`s declared, we get an
error. Let and const are block scoped.
 Function expression and arrows: Depends if were created using var /
let / const.
TEMPORAL DEAD ZONE:

Each let and const variables get their own TDZ that starts at the beginning of the scope
until the line where it is defined and the variable is safe to use after the TDZ.

WHY TDZ?
With this behaviour is easier to catch errors.
Accessing variables before declaration is bad practice and should be avoided and we
should get an error when we try to do so  this is what TDZ does.
To make const variable work the way they are supposed to.  We can’t reassign const
variables.  It would not be possible to set them to undefined first and then assign their
real value later. CONST SHOULD NEVER BE REASSIGNED and it`s only assigned when
execution reaches the declaration.
WHY HOISTING?
Using functions before actual declaration;
Var hoisting is just a byproduct.

You might also like