Variable Scopes

Variable Scopes Demystified: The Ultimate Beginner’s Guide to JavaScript 2024

by

In JavaScript, variables have different scopes depending on where and how they are declared. Understanding these scopes is crucial for avoiding bugs and ensuring predictable behavior in your code. There are primarily three types of variable scopes in JavaScript:

  1. Global Scope
  2. Function (Local) Scope
  3. Block Scope

Additionally, variables declared using var, let, and const behave differently in terms of scoping.

1. Global Scope

A variable has global scope if it is declared outside any function or block. Global variables can be accessed from anywhere in the code.

Example:

let globalVar = 'I am global';

function printGlobalVar() {
  console.log(globalVar);  // Accessing global variable inside a function
}

printGlobalVar();  // Output: I am global
console.log(globalVar);  // Output: I am global
  • In this case, globalVar is accessible both inside and outside the function.

Global variables are added to the window object in browsers. If you declare a variable with var at the global scope, it will automatically be added to window, whereas let and const do not.

var varGlobal = 'I am global var';
console.log(window.varGlobal);  // Output: I am global var

let letGlobal = 'I am global let';
console.log(window.letGlobal);  // Output: undefined

2. Function (Local) Scope

Variables declared within a function using var, let, or const are local to that function and cannot be accessed outside of it. This is called function scope.

Example:

function localScope() {
  let localVar = 'I am local';
  console.log(localVar);  // Output: I am local
}

localScope();
console.log(localVar);  // ReferenceError: localVar is not defined
  • The variable localVar is only accessible within the localScope function. Outside the function, it does not exist.

3. Block Scope

Variables declared using let and const within a block (i.e., code inside curly braces {}) are block-scoped. This means they are only accessible within that specific block. Blocks include loops, conditionals, or even just standalone blocks.

Example:

if (true) {
  let blockScopedVar = 'I am block-scoped';
  console.log(blockScopedVar);  // Output: I am block-scoped
}

console.log(blockScopedVar);  // ReferenceError: blockScopedVar is not defined
  • blockScopedVar is only available inside the if block. It is not accessible outside that block.

var does not respect block scope, but let and const do. Therefore, var gets function-scoped instead of block-scoped, which can lead to unexpected behavior.

Example with var:

if (true) {
  var functionScopedVar = 'I am function-scoped';
}

console.log(functionScopedVar);  // Output: I am function-scoped
  • Even though var is declared inside the block, it behaves as though it is declared outside and becomes accessible in the outer scope.

4. Lexical Scope (Scope Chain)

JavaScript follows a lexical scoping model, meaning that the scope of a variable is determined by its position in the source code. Nested functions can access variables in their outer functions due to the scope chain.

Example:

function outerFunction() {
  let outerVar = 'I am from outer';

  function innerFunction() {
    let innerVar = 'I am from inner';
    console.log(outerVar);  // Output: I am from outer
  }

  innerFunction();
}

outerFunction();
  • In this case, innerFunction has access to outerVar because it is within the lexical scope of outerFunction.

Variable Declarations (var, let, const)

Now that we’ve covered scopes, let’s briefly summarize how var, let, and const behave:

  • var: Function-scoped, not block-scoped, can be re-declared, and hoisted (initialized with undefined during hoisting).
  • let: Block-scoped, cannot be re-declared in the same scope, hoisted but not initialized.
  • const: Block-scoped, must be initialized when declared, cannot be re-assigned.

Hoisting Example:

console.log(varVariable);  // Output: undefined
var varVariable = 'Hello with var';

console.log(letVariable);  // ReferenceError: letVariable is not defined
let letVariable = 'Hello with let';
  • var is hoisted to the top and initialized with undefined, but let is hoisted without initialization, leading to a ReferenceError.

5. Best Practices

  • Avoid using var: Use let and const to avoid issues with var being function-scoped and hoisted.
  • Use const for constants: Variables that should not be re-assigned should be declared with const.
  • Use let for variables that will change: If the value of the variable will change, use let, but keep the scope as narrow as possible.

Additional Essential JavaScript Interview Questions on Various Topics

React Js Interview questions:

Top Javascript Books to Read

Summary:

  • Global scope: Variables accessible throughout the program.
  • Function scope: Variables declared within a function, accessible only within that function.
  • Block scope: Variables declared inside blocks (with let and const), accessible only within the block.
  • Lexical scope: Functions can access variables from their outer scope (scope chain).
  • var, let, and const behave differently in terms of scope, hoisting, and re-assignment.

Understanding these scoping rules is crucial for writing clean, bug-free JavaScript code.

Contents hide
1. Global Scope
Example:
2. Function (Local) Scope
Example:
3. Block Scope
Example:
Example with var:
4. Lexical Scope (Scope Chain)
Example:
Variable Declarations (var, let, const)
Hoisting Example:
5. Best Practices
Additional Essential JavaScript Interview Questions on Various Topics
React Js Interview questions:
Top Javascript Books to Read
Summary:

Leave a Comment