Scope in Javascript

#javascript #codenewbie #womenintech #beginners

Originally, I started writing a blog post about variable hoisting in Javascript, but, pretty quickly, I realized that I first needed to explain scope within Javascript first. It is essential to understanding scope in order to fully understand the topic of hoisting. So, here I am, writing a blog post about scope in Javascript. Let’s get started!

Before ES6, there were only two types of scope in Javascript:

Local/Function Scope
Global Scope

ES6 introduced a new type of scope to Javascript, which is

Block Scope

Before we dive in to the differences of each type of scope, let’s discuss what scope is at it’s most basic level. Scope essentially determines when and where variables can and cannot be accessed. In other terms, “scope determines the accessibility” of variables.

Let’s dive into the complexity of each type of scope, one at a time.

Global Scope

A variable that is declared outside of a function is a global variable and exists within the global scope. This means that “all scripts and functions on a web page can access it.” In even simpler terms, you can use this variable anywhere in your program.

var shape = “circle”;
console.log(shape); // “circle”

function changeShape() {
  shape = “triangle”;
}
changeShape();
console.log(shape); // “triangle”

Local/Function Scope

When a function is defined, all variables within the global scope are available to it. A function also has access to the variables declared inside of it, which is local/function scope. So, a variable declared within a function is referred to us a local variable and exists only within the local/function scope.

function exampleFunction() {
  var color = “red”;
  console.log(color); // “red”
}

exampleFunction();
console.log(color); // ReferenceError: color is not defined

Block Scope

Block scope was introduced by ES6 and uses let and const to declare variables. Block specifically refers to anything inside curly brackets, {}. Examples of a block would be an if-statement or a function. So now, functions aren’t the only thing that are able to create their own scope.

When it comes to functions, let and const work similarly to var.

function myFunc() {
  let animal = “dog”;
  console.log(animal); // “dog”
}

myFunc();
console.log(animal); // ReferenceError: animal is not defined

Where Block Scope Gets Confusing

Block scope gets confusing in regards to the same variable name being used twice. When one uses var to declare two variables (which isn’t block scope) the first declaration is overridden.

var food = “pizza”;

if (true) {
  var food = “ramen”;
  console.log(food); // “ramen”
}

console.log(food); // “ramen”

When utilizing block scope by making use of let, the first declaration remains the same and the second declaration is not available outside of the block.

let food = “pizza”;

if (true) {
  let food = “ramen”; // “ramen”
}

console.log(food); // “pizza”

While using the same name for two variables isn’t advised, if you ever do it, please make sure to use let to declare your variables or else you’ll end up with some very confusing code and outcomes.

I hope this blog post is helpful for those of you new to Javascript scope! Happy coding.