Scopes

Available

5.1 Global Scope

Scopes define the accessibility of variables and functions in different parts of a program. In JavaScript, there are three main types of scopes: global, local, and block. Understanding these scopes is key for effective data management and avoiding bugs in your code.

Global scope includes all variables and functions declared outside of any functions or code blocks. These variables and functions are accessible from anywhere in the code.

Example 1: Declaring Global Variables

JavaScript
var globalVar = 'I am a global variable';

function showGlobalVar() {
  console.log(globalVar); // Access to global variable
}
showGlobalVar(); // Outputs: I am a global variable

console.log(globalVar); // Access to global variable

Example 2: Global Functions

In this example, the variable globalVar and the function globalFunction() are declared in the global scope and are accessible from anywhere in the code.

JavaScript
function globalFunction() {
  return 'I am a global function';
}

console.log(globalFunction()); // Outputs: I am a global function

5.2 Local Scope

Local scope includes variables and functions declared inside a function. These variables and functions are only accessible within that function and unavailable outside of it.

Example 3: Declaring Local Variables

In this example, the variable localVar is declared inside the function localScopeExample() and is unavailable outside this function:

JavaScript
function localScopeExample() {
  var localVar = 'I am a local variable';
  console.log(localVar); // Access to local variable
}

localScopeExample(); // Outputs: I am a local variable

console.log(localVar); // Error: localVar is not defined

Example 4: Local Functions

In this example, the function innerFunction() is declared inside the function outerFunction() and is unavailable outside of outerFunction():

JavaScript
function outerFunction() {
  function innerFunction() {
    return 'I am a local function';
  }
  console.log(innerFunction()); // Access to local function
}

outerFunction(); // Outputs: I am a local function

console.log(innerFunction()); // Error: innerFunction is not defined

5.3 Block Scope

Block scope includes variables declared using let and const within a code block, enclosed by curly brackets {}. These variables are accessible only within that block and not outside of it.

Example 5: Declaring Variables with let

In this example, the variable blockVar is declared inside an if block and is unavailable outside of it:

JavaScript
if (true) {
  let blockVar = 'I am a block-scoped variable';
  console.log(blockVar); // Access to block variable
}

console.log(blockVar); // Error: blockVar is not defined

Example 6: Declaring Variables with const

In this example, the variable i is declared inside a for block and is unavailable outside of it:

JavaScript
for (const i = 0; i < 3; i++) {
  console.log(i); // Access to block variable
}

console.log(i); // Error: i is not defined

Features of Block Scope

Example 7: Nested Blocks

In this example, the variable innerVar is only accessible within the inner block, while the variable outerVar is accessible in both the outer and inner blocks:

JavaScript
if (true) {
  let outerVar = 'I am in the outer block';

  if (true) {
    let innerVar = 'I am in the inner block';

    console.log(outerVar); // Access to outer block variable
    console.log(innerVar); // Access to inner block variable
  }

  console.log(outerVar); // Access to outer block variable
  console.log(innerVar); // Error: innerVar is not defined
}

5.4 Interaction of Different Scopes

Example 8: Interaction of Global and Local Scopes

In this example, the function scopeExample() has access to the global variable globalVar and its own local variable localVar:

JavaScript
var globalVar = 'I am a global variable';

function scopeExample() {
  var localVar = 'I am a local variable';

  console.log(globalVar); // Access to global variable
  console.log(localVar);  // Access to local variable
}

scopeExample(); // Outputs: I am a global variable
                //  I am a local variable

console.log(globalVar); // Access to global variable
console.log(localVar);  // Error: localVar is not defined

Example 9: Scopes with Arrow Function

In this example, the arrow function arrowFunction() has access to the global variable globalVar and its own local variable localVar:

JavaScript
let globalVar = 'I am a global variable';

const arrowFunction = () => {
  let localVar = 'I am a local variable in arrow function';

  console.log(globalVar); // Access to global variable
  console.log(localVar);  // Access to local variable
};

arrowFunction(); // Outputs: I am a global variable
                 // I am a local variable in arrow function

console.log(globalVar); // Access to global variable
console.log(localVar);  // Error: localVar is not defined
1
Task
Frontend SELF EN,  level 35lesson 4
Locked
Global Variable
Global Variable
1
Task
Frontend SELF EN,  level 35lesson 4
Locked
Block Scope
Block Scope
Comments
  • Popular
  • New
  • Old
You must be signed in to leave a comment
This page doesn't have any comments yet