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
      Global Variables

      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.

      Global Variables

      JavaScript Global Variables

      The global variables in JavaScript are the variables that are defined outside of the function or any particular block. They are accessible from anywhere in JavaScript code. All scripts and functions can access the global variables.
      You can define the global variables using the var, let, or const keyword. The variables defined without using any of the var, let or const keywords automatically becomes global variables.

      JavaScript Global Scope

      The global variables have global scope. So a variable declared outside of a function or block has global scope. The global scope is visible or accessible in all other scope. In client side JavaScript the global scope is the web page in which all the code is being executed. A global variable declared with var keyword belongs to window object.
      var x = 10; // Global Scope
      let y = 20; // Global Scope	
      const z = 30; // Global Scope
      Here the variables, x, y and z are declared outside of any function and block, so they have global scope and are called global variable.

      Global Variable Examples

      Let's learn more about global variables using the example below.

      Example

      We have defined the x, y, and z global variables in the code below. You can observe that variables can be accessed anywhere inside the code.
      <html>
      <head>
         <title> JavaScript - Global variables </title>
      </head>
      <body>
         <p id = "output"> </p>
         <script>
            var x = 10;
            let y = 20;
            const z = 30;
            document.getElementById("output").innerHTML = 
      	  "x = " + x + "<br>" +
      	  "y = " + y + "<br>" +
            "z = " + z;
         </script>
      </body>
      </html>

      Output

      x = 10
      y = 20
      z = 30

      Example

      In the example below, we have defined the variables a and b using the var and let keywords. You can see that a and b variables can be accessible inside the function or outside the function as they are global variables.
      <html>
      <head>
         <title> JavaScript - Global variables </title>
      </head>
      <body>
         <p id = "demo"> </p>
         <script>
            const output = document.getElementById("demo");
            var a = 10;
            let b = 20;
            function test() {
               output.innerHTML += "a -> Inside the function = " + a + "<br>";
               output.innerHTML += "b -> Inside the function = " + b + "<br>";
            }
            test();
            output.innerHTML += "a -> Outside the function = " + a + "<br>";
            output.innerHTML += "b -> Outside the function = " + b + "<br>";
         </script>
      </body>
      </html>

      Output

      a -> Inside the function = 10
      b -> Inside the function = 20
      a -> Outside the function = 10
      b -> Outside the function = 20

      Automatic Global Variables

      When you define the variables anywhere inside the code without using the var, let, or const keywords, the variable automatically becomes the global variable and can be accessible anywhere inside the code.

      Example

      In the below code, we have defined the variable 'a' without using any keyword inside the function. Even if we have defined the variable in the function, it becomes global as we haven't used any keyword to define the function.
      The output shows that variable 'a' can be accessible inside or outside the function.
      <html>
      <head>
         <title> JavaScript - Global variables </title>
      </head>
      <body>
         <p id = "demo"> </p>
         <script>
            const output = document.getElementById("demo");
            function test() {
            a = 90;
                  output.innerHTML += "a -> Inside the function = " + a + "<br>";
              }
              test();
              output.innerHTML += "a -> Outside the function = " + a + "<br>";
          </script>
      </body>
      </html>

      Output

      a -> Inside the function = 90
      a -> Outside the function = 90
      
      Defining the global variables inside the function or particular block is not a good practice, as naming conflict can occur in the code.