Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Variable Scope

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Variable Scope

      JavaScript Variable Scope

      The variable scope in JavaScript determines to the accessibility and visibility of the variable in different part of the code. The scope is the current context of the code execution. This means the variable scope is determined by where it is executed not by where it is declared.
      In JavaScript, the objects and functions are also variables. So the JavaScript variable scope also determines the accessibility or visibility of objects and functions also in the program.
      It is essential to learn the variable scope in JavaScript to write clear code and avoid naming conflicts.
      There are following types of variable scope in JavaScript.
      • Block scope
      • Function scope
      • Local scope
      • Global scope
      Here, we will cover the block, function, and local scope. We will discuss Global scope in detain in JavaScript Global variable chapter.

      JavaScript Block Scope

      Before JavaScript ES6, there were only Global and Function scopes. ES6 introduced the let and const keywords. These keywords provide the Block Scope in JavaScript.
      The JavaScript variables defined using the 'let' and 'const' keyword inside a { } block can be accessible only inside the block in which they are defined.
      {
         let x = 10; // x is accessible here
      }
      //x is not accessible here
      A variable defined with var keyword is does not provide block scope.
      {
         var x = 10; // x is accessible here
      }
      //x is accessible here also

      Example

      In the example below, we defined the variable 'a' inside the 'if' block. In the output, you can see that variable 'a' is accessible only inside the 'if' block. If you try to access the variable 'a' outside the 'if' block, it will throw a reference error like 'variable a is not defined'.
      <html>
      <head>
         <title> JavaScript - Block scope </title>
      </head>
      <body>
         <p id = "output"> </p>
         <script>
            if (true) {
               let a = 10;
               document.getElementById("output").innerHTML = "a = " + a;
            }
            // a can't be accessed here
         </script>
      </body>
      </html>

      Output

      a = 10

      Example

      In the below code, we have defined the test() function. In the function, we have added a { } block using the curly braces, and inside the { } block, we have defined the variable 'x'. The variable 'x' can't be accessible outside the { } block as it has a block scope.
      <html>
      <head>
         <title> JavaScript - Block scope </title>
      </head>
      <body>
         <p id = "demo"> </p>
         <script>
            const output = document.getElementById("demo");
            function test() {
               {
                  let x = 30;
                  output.innerHTML = "x = " + x;
               }
               // variable x is not accessible here
            }
            test();
         </script>
      </body>
      </html>

      Output

      x = 30
      Whenever you define the variable using the 'let' or 'const' keyword inside the block, like loop block, if-else block, etc., it can't be accessible outside the block.

      JavaScript Function Scope

      In JavaScript, each function creates a scope. The variables defined inside a function have function scope. The variable defined in a function are accessible from within the same function only. These variable are not accessible from the outside of the function.
      Whenever you define the variable inside the function using the 'var' keyword, the variable can be accessible throughout the function, even if it is defined inside the particular block.
      For example,
      function func() {
         {
            var x; // function scope
            let y; // Block scope
            const z = 20; // Block scope
         }
         // x is accessible here, but not y & z
      }

      Example

      In the example below, we have defined the variable 'x', 'y', and 'z' using the var, let, and const keywords, respectively. The variable 'x' can be accessible inside the function anywhere as it has a function scope, but 'y' and 'z' can only be accessible inside the block in which it is defined.
      <html>
      <head>
         <title> JavaScript - Function scope </title>
      </head>
      <body>
         <p id = "demo"> </p>
         <script>
            const output = document.getElementById("demo");
            function func() {
               {
                  var x = 30;
                  let y = 20;
                  const z = 10;
                  output.innerHTML += "x -> Inside the block = " + x + "<br>";
                  output.innerHTML += "y -> Inside the block = " + y + "<br>";
                  output.innerHTML += "z -> Inside the block = " + z + "<br>";
               }
               output.innerHTML += "x -> Outside the block = " + x + "<br>";
               // y and z can't be accessible here
            }
      
            func();
         </script>
      </body>
      </html>

      Output

      x -> Inside the block = 30
      y -> Inside the block = 20
      z -> Inside the block = 10
      x -> Outside the block = 30

      JavaScript Local Scope

      The JavaScript local scope is a combination of the function and block scope. The JavaScript compiler creates a local variable when the function is invoked and deletes it when the function invocation completes.
      In short, variables defined inside the function or block are local to that particular scope. The function parameters are treated as local variables inside the function.

      Example

      In the below code, we have defined the variables inside the function using the var, let, and const keywords. All variables are local to the function. It can't be accessible outside the function.
      Similarly, we can define the looping variables in the local scope.
      <html>
      <head>
         <title> JavaScript - Local scope </title>
      </head>
      <body>
         <p id = "demo"> </p>
         <script>
            const output = document.getElementById("demo");
            function func() {
               let first = 34;
               var second = 45;
               const third = 60;
      
               output.innerHTML += "First -> " + first + "<br>";
               output.innerHTML += "Second -> " + second + "<br>";
               output.innerHTML += "Third -> " + third + "<br>";
            }
            func();
         </script>
      </body>
      </html>

      Output

      First -> 34
      Second -> 45
      Third -> 60
      We notice that the when a variable is defined inside a function, the variable become Local to the function. In this situation, the variable has function scope. When a variable is defined inside a particular block, it becomes local to that block and has block scope.