JavaScript Variable Scope

Understanding variable scope is crucial for writing effective and bug-free JavaScript code. In this tutorial, we'll explore the different types of scopes available in JavaScript—global, local (function) scope, and block scope—and how they affect variable accessibility. We'll also delve into the concept of lexical environments.

Introduction

Variable scope determines where a variable is accessible within your code. Proper understanding of scope helps manage variable lifecycles and avoid unintended side effects. In this section, we'll cover three main types of scopes: global scope, local (function) scope, and block scope. We'll also explore how these scopes interact through lexical environments.

Core Content

Global Scope

Global scope refers to variables that are declared outside any function or block. These variables can be accessed from anywhere in your code.

1// Declare a global variable
2let globalVar = "I am global";
3 
4function showGlobal() {
5  console.log(globalVar); // Accessible inside the function
6}
7 
8showGlobal(); // Outputs: I am global
9 
10console.log(globalVar); // Accessible outside the function

I am global
I am global

Local (Function) Scope

Local scope, also known as function scope, refers to variables that are declared inside a function. These variables can only be accessed within the function where they are defined.

1function showLocal() {
2  let localVar = "I am local";
3  console.log(localVar); // Accessible inside the function
4}
5 
6showLocal(); // Outputs: I am local
7 
8// console.log(localVar); // Error: localVar is not defined

I am local

Block Scope

Block scope refers to variables that are declared inside a block of code (anything between curly braces {}). These variables can only be accessed within the block where they are defined.

1if (true) {
2  let blockVar = "I am block scoped";
3  console.log(blockVar); // Accessible inside the block
4}
5 
6// console.log(blockVar); // Error: blockVar is not defined

I am block scoped

Lexical Environment

A lexical environment in JavaScript is a data structure that holds identifier-variable mappings. It consists of two components: the environment record and an outer reference to another lexical environment.

• Environment Record: Stores variable bindings.
• Outer Reference: Points to the parent lexical environment.

Lexical environments are created during code execution, and they determine how variables are resolved based on where they are declared.

1let outerVar = "I am outer";
2 
3function showScope() {
4  let innerVar = "I am inner";
5  console.log(outerVar); // Accessible due to lexical environment
6  console.log(innerVar); // Accessible within the function
7}
8 
9showScope(); // Outputs: I am outer
10I am inner
11 
12// console.log(innerVar); // Error: innerVar is not defined

I am outer
I am inner

Practical Example

Let's create a practical example that demonstrates different scopes in action. We'll define a few variables in global, local, and block scopes, and then access them from various parts of the code.

1let globalVar = "Global Variable";
2 
3function outerFunction() {
4  let outerVar = "Outer Function Variable";
5  
6  if (true) {
7      let blockVar = "Block Scoped Variable";
8      console.log("Inside Block:", blockVar, outerVar, globalVar);
9  }
10  
11  function innerFunction() {
12      let innerVar = "Inner Function Variable";
13      console.log("Inside Inner Function:", innerVar, outerVar, globalVar);
14  }
15  
16  innerFunction();
17}
18 
19outerFunction();

Inside Block: Block Scoped Variable Outer Function Variable Global Variable
Inside Inner Function: Inner Function Variable Outer Function Variable Global Variable

Summary

What's Next?

In the next tutorial, we'll explore JavaScript hoisting, which explains how variable and function declarations are processed during code execution. Understanding hoisting will help you write more predictable and bug-free code.

Stay tuned!