DEV Community

Victoria Crawford
Victoria Crawford

Posted on


Scope in Javascript

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;
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”

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”

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.


ES6: var, let, and const - The battle between function scope and block scope

Understand Hoisting in Javascript

Javascript Scope

The Difference Between Function and Block Scope in Javascript

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.