Scope in JavaScript

#javascript #webdev #scope

Scope in JavaScript, and in programming as a whole, is a cornerstone fundamental to grasp in order to:

Avoid any potential errors and bugs regarding undefined variables and modifications
Produce cleaner code that inadvertently manages and limits memory usage

Scope can be defined as the visibility of values and expressions that can be used in the current context. Most developers when first starting out typically have variables and expressions defined globally so there won't be any issues when just learning the fundamentals. However, over time when your code becomes more and more dense with many layers of pathing, there will be moments where you don't necessarily intend to execute every line of code because of overlapping or interference when accessing and modifying values (in a non-threaded context)

In JavaScript, there are 3 primary areas of scope

Global Scope
Any definition that is not under any function or block (the {} that contains code) is defined to be in the global parameter of scope. Anything declared globally can be used and modified anywhere

const greeting = "Hello World"
function sayHello(){
   console.log(greeting)
}
console.log(greeting)
//The greeting will be logged twice as it was accessed twice; 
//once in the function and another in the global scope

Function Scope
Definitions that are stated inside the block of a function. Only in the context of said function, are the declarations significant. Any variable created in the function scope can only be referenced in that scope. However, any modifications made to a variable above the level of this scope can be considered since the above rule applies for that scope's context.

let greeting = "Hello World"
function sayHello(){
   let newGreeting = "Hello Human"
   console.log(newGreeting)
}
console.log(newGreeting)
//This will result in an error despite a declaration of
//newGreeting, as the function was never called in a global
//scope

let greeting = "Hello World"
function sayHello(){
   newGreeting = "Hello Human"
   console.log(newGreeting)
}
sayHello()
console.log(greeting)
//Now there will be two logs to the function

Block Scope
Block Scope can be treated similarly to function scope, except variable declarations in a block scope can be referenced in children beneath the block. This scope is typically found in conditional statements such as if and switch cases.

function sayHello(name){
   console.log(`Hello ${name}`)
let gender = 'boy'

if (baby === 'boy'){
   let name = 'Mark'
   sayHello(name)
}
else if(baby === 'girl'){
   let name = 'Alice'
   sayHello(name)
}

//This example showcases the 'name' variable being passed down
//through the block scope to the function scope of sayHello

Overall, scopes should be learned through a hierarchical system, where the global scope is above the function scope, which parents the block scope. Variables defined through any scope should be predefined with the let or const tag, as the var tag can allow variables to be referenced in the scope's parents.