Simplifying Scoping in Javascript

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

Comments

[Larson]

👌

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...