TypeScript for FrontEnd developers

var allow to define and initialize a variable in JavaScript. We say that var is function-scoped, or globally-scoped if not used inside a function.

It means the following function foo creates a new function scope. Variables declared with var inside this function are scoped to the function, meaning they are not accessible outside of it.

SWITCH LAYOUT

block

var a = 10; declares a variable a and initializes it to 10.
Even though a is declared inside a block, it is accessible outside the block because var does not respect block scope.

function

var a = 1; declares a variable a inside the function foo and initializes it to 1.
foo() when we invoke the function foo, it creates the variable within its scope. However, after the function execution completes, a is not accessible outside the function scope.

Avoid using var. Use let instead. Read the next paragraphs to understand the reason of this statement

# let

The code block { ... } creates a block scope. Variables declared with let (and const) are scoped to the block they are declared in.

This means that unlike var, when we use let, a variable defined inside a block will not be visible outside

SWITCH LAYOUT

block

let a = 10; declares a variable a and initializes it to 10 within the block scope.
The variable a is only accessible within the block it is declared in. It is not accessible outside this block.

function

Of course a is not available outside the function, just as happened with var

# "var" vs "let" and "for" Loop

Now let's see the differences of using var and let in a for loop:

SWITCH LAYOUT

var

When var is used in a for loop, the variable i is hoisted to the function scope (or global scope if not in a function), making it accessible outside the loop.
In the example, var i is accessible outside the for loop, so console.log(i) prints 3 after the loop completes.

let

let is block-scoped.
When let is used in a for loop, the variable i is scoped to the block of the loop itself.
In the example, let i is not accessible outside the for loop, so console.log(i) results in a ReferenceError, indicating i is not defined outside the loop. This is the right behavior we expect

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Variable Scopes

The differences between "var" vs "let" vs "const"

12 snippets

28 mins

v.5.5

Fabio Biondi

Google Developer Expert
Microsoft MVP

# var

var allow to define and initialize a variable in JavaScript. We say that var is function-scoped, or globally-scoped if not used inside a function.

It means the following function foo creates a new function scope. Variables declared with var inside this function are scoped to the function, meaning they are not accessible outside of it.

SWITCH LAYOUT

block

var a = 10; declares a variable a and initializes it to 10.
Even though a is declared inside a block, it is accessible outside the block because var does not respect block scope.

function

var a = 1; declares a variable a inside the function foo and initializes it to 1.
foo() when we invoke the function foo, it creates the variable within its scope. However, after the function execution completes, a is not accessible outside the function scope.

Avoid using var. Use let instead. Read the next paragraphs to understand the reason of this statement

# let

The code block { ... } creates a block scope. Variables declared with let (and const) are scoped to the block they are declared in.

This means that unlike var, when we use let, a variable defined inside a block will not be visible outside

SWITCH LAYOUT

block

let a = 10; declares a variable a and initializes it to 10 within the block scope.
The variable a is only accessible within the block it is declared in. It is not accessible outside this block.

function

Of course a is not available outside the function, just as happened with var

# "var" vs "let" and "for" Loop

Now let's see the differences of using var and let in a for loop:

SWITCH LAYOUT

var

When var is used in a for loop, the variable i is hoisted to the function scope (or global scope if not in a function), making it accessible outside the loop.
In the example, var i is accessible outside the for loop, so console.log(i) prints 3 after the loop completes.

let

let is block-scoped.
When let is used in a for loop, the variable i is scoped to the block of the loop itself.
In the example, let i is not accessible outside the for loop, so console.log(i) results in a ReferenceError, indicating i is not defined outside the loop. This is the right behavior we expect

# const

Unblock the content

It's completely free!

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

# Hoisting

Variables in JavaScript are hoisted, which means they are accessible in their enclosing scope even before they are declared.

Basically, a variable can be used before it has been declared I know, it's weird and you should avoid it... but it works!

But there is a big difference between var and let:

variables defined with var are hoisted with a default value: undefined
let and const are hoisted without a default initialization instead.

SWITCH LAYOUT

This example uses var and, as you can see, the first console.log will display undefined

var

This example uses let and when you try to get its value before its initialization you'll generate an error

let

Temporal Dead Zone

The period of time in which properties are hoisted but not yet accessible, is known as Temporal Dead Zone: