Skip to content

Local scope in JavaScript

  • by

In JavaScript, local scope refers to the accessibility of variables, functions, and objects within a function or a block of code. Variables, functions, and objects declared within a local scope are only accessible within that scope and cannot be accessed outside of it.

In JavaScript, the local scope is created using the var, let, or const keywords to declare variables inside a function or a block of code.

function myFunction() {
  var x = 10; // x is a local variable
}

Similarly, the syntax for declaring a local variable using let or const keyword is as follows

function myFunction() {
  let y = 20; // y is a local variable declared using let keyword
  const z = 30; // z is a local variable declared using const keyword
}

Local scope in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<body>
    <script>
    function printMessage() {
    let message = "Hello, World!"; // local variable

    console.log(message);
    }

    printMessage();

    console.log(message); 

    </script>
</body>
</html>

Output:

Local scope in JavaScript

In the above example, the message variable is declared within the printMessage function, making it a local variable. This means that it can only be accessed within the printMessage function and not outside of it.

When we call the printMessage function, it will log the message variable to the console. However, when we try to access the message variable outside of the function, we get a ReferenceError because the variable is not defined in the global scope.

Differences between function scope and block scope

In JavaScript, variables and functions have different scopes that determine where they can be accessed within a program. The two main scopes in JavaScript are function scope and block scope. Here are the main differences between them:

FeatureFunction ScopeBlock Scope
Declaration Syntaxvar or letlet or const
Accessible inFunction and nested functionsBlock where it’s declared
Scope LengthExtends until the end of the functionExtends until the end of the block
VisibilityNot visible outside the functionNot visible outside the block
Declaration HoistingHoisted to the top of the functionHoisted to the top of the block
ExamplesVariables declared inside a functionVariables declared inside an if statement or for loop

Function scope:

function myFunction() {
  let x = 5; // local variable
  console.log(x); // output: 5
}

console.log(x); // output: Uncaught ReferenceError: x is not defined

Block scope:

if (true) {
  let y = 10; // block-scoped variable
  console.log(y); // output: 10
}

console.log(y); // output: Uncaught ReferenceError: y is not defined

Comment if you have any doubts or suggestions on this JS basic topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading