Scoping is one of the fundamental parts of how Javascript works. Scoping is defined as the context of where variables can be accessed or referenced.
Javascript has two scoping types called Global Scope and Local Scope. Before we get into these scopes, let's first talk about variable declarations because they may impact the scope types.
Variable Declarations
In Javascript, a variable is a name that serves as a container for a value.
Prior to ES2015 (Javascript Version), there was only one way of declaring or naming a variable.
This declaration is called 'var' and could be either Function scoped or Global scoped. the 'var' variable can be redeclared and the value of 'var' can be reassigned if necessary.
// declaring the variable: bucket
var container = 'bucket'
console.log(container) // bucket
// reassigning the value from a 'string' to a 'number'
container = 1
console.log(container) // 1
// redeclaring var container
var container
console.log(container) // 1
After ES2015, there are two more variable declarations and they are defined as block-scoped.
They are both are available to be accessed in the block statement of code in which they are declared.
// Declation: Let - Can be reassigned but not redeclared
let count = 1111
console.log(count) // 1111
count = 1234
console.log(count) // 1234
let count
console.log(count) // SyntaxError: Identifier 'count' has already been declared
// Declaration: Const - Can't be reassigned or redeclared
const speed = 'fast'
console.log(speed) // fast
speed = 'very fast'
console.log(speed) // TypeError: Assignment to constant variable
const speed
console.log(speed) // SyntaxError: Identifier 'speed' has already been declared
Now onto the two Variable Scope types: Global & Local Scope
Global Scope
Global variable scope is a variable declared outside a block statement of code.
// This can be accessed globally in our code
let captain = "Captain Plank"
console.log(captain) // Captain Plank
function greet() {
// lexical scoping:
console.log(`Top of the mornin' to ya ${captain}!`)
}
greet() // Top of the mornin' to ya Captain Plank!
Local Scope
Global variable scope is a variable declared inside a block statement of code.
// Let's try declaring a variable at the local scope
let captain = "Captain Plank"
console.log(captain) // Captain Plank
function greet() {
let timeOfDay = "evenin"
console.log(`Top of the ${timeOfDay}' to ya ${captain}!`)
}
greet() // Top of the evenin' to ya Captain Plank!
console.log(timeOfDay) // ReferenceError: timeOfDay is not declared
// Here is the power in block-scoping
const captain = "Captain Plank" // global declaration
console.log(captain) // Captain Plank
function greet() {
const captain = "Captain Flag"
const timeOfDay = "evenin"
console.log(`Top of the ${timeOfDay}' to ya ${captain}!`)
}
greet() // Top of the evenin' to ya Captain Flag!
// The global declaration of captain is still in tact
console.log(captain) // Captain Plank
Lexical Scoping
A lexical scoping in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true; the variables defined inside a function will not be accessible outside that function. - Stack Overflow
// Lexical scoping example
function publicFunction() {
// scope of publicFunction: lexical scope for privateFunction
const privateVariable = 'Secret'
return function privateFunction() {
console.log(privateVariable)
}
}
// returns the privateFunction() and assigns it to the identifier 'Result’
const result = publicFunction();
result() // Secret
Let's chat about Scoping
I hope these examples helped simplify Scoping in Javascript for you. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with Scoping in Javascript.
Happy Coding,
Terry Threatt
Top comments (1)
👌
But lexical scope is still local scope to be correct. The outer function will share the properties to inner function. Since functions are objects, each object will run the constructor to set up prototypes and shared properties. (And more)
tc39.es/ecma262/#sec-variable-stat...