You are currently viewing JavaScript Cheat Sheet 10.46: JavaScript Scope

JavaScript Cheat Sheet 10.46: JavaScript Scope

Understanding Local and Global Scope

In JavaScript, scope refers to the accessibility and visibility of variables. Understanding scope is crucial as it determines where in your code variables can be accessed. JavaScript has two main types of scope: local scope and global scope. Variables defined within a function have local scope, while variables declared outside of any function have global scope.

Local Scope

Local scope refers to variables defined within a function. These variables are accessible only within that function. Once the function finishes executing, the variables are no longer accessible.

Let’s look at an example:

function myFunction() {
  var localVar = 10;
  console.log(localVar); // Output: 10
}

myFunction();
console.log(localVar); // Throws ReferenceError: localVar is not defined

Explanation:

  1. We define a function called myFunction.
  2. Inside myFunction, we declare a variable localVar and assign it the value 10.
  3. We log the value of localVar, which will output 10 when the function is called.
  4. We call myFunction.
  5. After calling the function, we try to log the value of localVar outside the function, which throws a ReferenceError since localVar is not defined in the global scope.

Global Scope

Variables declared outside of any function have global scope. These variables are accessible throughout the entire script, including inside functions.

Let’s look at an example:

var globalVar = 20;

function myFunction() {
  console.log(globalVar); // Output: 20
}

myFunction();
console.log(globalVar); // Output: 20

Explanation:

  1. We declare a variable globalVar outside of any function, giving it a value of 20.
  2. We define a function called myFunction.
  3. Inside myFunction, we log the value of globalVar, which outputs 20.
  4. We call myFunction.
  5. Outside of the function, we log the value of globalVar, which also outputs 20.

Variable Shadowing

Variable shadowing occurs when a local variable inside a function shares the same name as a variable in the global scope. In such cases, the local variable takes precedence over the global variable within the function’s scope.

Let’s look at an example:

var shadowVar = "global";

function myFunction() {
  var shadowVar = "local";
  console.log(shadowVar); // Output: local
}

myFunction();
console.log(shadowVar); // Output: global

Explanation:

  1. We declare a global variable shadowVar and assign it the value "global".
  2. We define a function called myFunction.
  3. Inside myFunction, we declare a local variable shadowVar with the value "local", which shadows the global variable with the same name within the function’s scope.
  4. We log the value of shadowVar inside myFunction, which outputs "local".
  5. We call myFunction.
  6. Outside of the function, we log the value of shadowVar, which outputs "global", accessing the global variable since the local one is not accessible outside the function.

Understanding scope in JavaScript is fundamental for writing clean and efficient code. Practice using local and global variables, and be mindful of variable shadowing to avoid unexpected behavior in your programs.

Leave a Reply