Define a global variable in a JavaScript function

Question

Is it possible to define a global variable in a JavaScript function  I want use the trailimage variable  declared in the makeObj function  in other functions   lt html xmlns  quot http   www w3 org 1999 xhtml quot  gt       lt head id  quot Head1 quot  runat  quot server quot  gt           lt title gt  lt  title gt           lt script type  quot text javascript quot  gt              var offsetfrommouse    10  -20               var displayduration   0              var obj selected   0              function makeObj address                      var trailimage    address  50  50                     document write   lt img id  quot trailimageid quot  src  quot     trailimage 0      quot  border  quot 0 quot   style  quot  position  absolute  visibility visible  left  0px  top  0px  width      trailimage 1     px  height      trailimage 2     px quot  gt                     obj selected   1                             function truebody                     return   window opera  amp  amp  document compatMode  amp  amp  document compatMode     quot BackCompat quot     document documentElement   document body                            function hidetrail                     var x   document getElementById  quot trailimageid quot   style                  x visibility    quot hidden quot                   document onmousemove    quot  quot                             function followmouse e                    var xcoord   offsetfrommouse 0                   var ycoord   offsetfrommouse 1                   var x   document getElementById  quot trailimageid quot   style                  if  typeof e     quot undefined quot                         xcoord    e pageX                      ycoord    e pageY                                    else if  typeof window event     quot undefined quot                         xcoord    truebody   scrollLeft   event clientX                      ycoord    truebody   scrollTop   event clientY                                    var docwidth   1395                  var docheight   676                  if  xcoord   trailimage 1    3  gt  docwidth    ycoord   trailimage 2   gt  docheight                        x display    quot none quot                       alert  quot inja quot                                      else                     x display    quot  quot                   x left   xcoord    quot px quot                   x top   ycoord    quot px quot                              if  obj selected   1                    alert  quot obj selected   true quot                    document onmousemove   followmouse                  if  displayduration  gt  0                      setTimeout  quot hidetrail   quot   displayduration   1000                          lt  script gt       lt  head gt       lt body gt           lt form id  quot form1 quot  runat  quot server quot  gt           lt img alt  quot  quot  id  quot house quot  src  quot Pictures sides right gif quot  style  quot z-index  1  left  372px              top  219px  position  absolute  height  138px  width  120px quot  onclick  quot javascript makeObj  Pictures sides sides-not-clicked gif    quot    gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

Just declare var trialImage   outside  Then function makeObj address        trialImage    address  50  50

User · Answer

To use the window object is not a good idea  As I see in comments   use strict    function showMessage         window say hello    hello       console log say hello    This will throw an error to use the say hello variable we need to first call the showMessage function

User · Answer

If you are making a startup function  you can define global functions and variables this way  function globalScope           Define something     globalScope something                 alert  quot It works quot             window   Because the function is invoked globally with this argument  this is global scope here  So  the something should be a global thing

User · Answer

As the others have said  you can use var at global scope  outside of all functions and modules  to declare a global variable   lt script gt  var yourGlobalVariable  function foo                   lt  script gt    Note that that s only true at global scope  If that code were in a module       lt script type  quot module quot  gt     lt  script gt       it wouldn t be at global scope  so that wouldn t create a global   Alternatively  In modern environments  you can assign to a property on the object that globalThis refers to  globalThis was added in ES2020    lt script gt  function foo         globalThis yourGlobalVariable           lt  script gt   On browsers  you can do the same thing with the global called window   lt script gt  function foo         window yourGlobalVariable           lt  script gt      because in browsers  all global variables global variables declared with var are properties of the window object   In the latest specification  ECMAScript 2015  the new let  const  and class statements at global scope create globals that aren t properties of the global object  a new concept in ES2015    There s also the horror of implicit globals  but don t do it on purpose and do your best to avoid doing it by accident  perhaps by using ES5 s  quot use strict quot    All that said  I d avoid global variables if you possibly can  and you almost certainly can   As I mentioned  they end up being properties of window  and window is already plenty crowded enough what with all elements with an id  and many with just a name  being dumped in it  and regardless that upcoming specification  IE dumps just about anything with a name on there   Instead  in modern environments  use modules   lt script type  quot module quot  gt  let yourVariable   42          lt  script gt   The top level code in a module is at module scope  not global scope  so that creates a variable that all of the code in that module can see  but that isn t global  In obsolete environments without module support  wrap your code in a scoping function and use variables local to that scoping function  and make your other functions closures within it   lt script gt   function        Begin scoping function     var yourGlobalVariable     Global to your code  invisible outside the scoping function     function foo                                           End scoping function  lt  script gt

User · Answer

There are three types of scope in JavaScript   Global Scoop  where the variable is available through the code  Block Scoop  where the variable is available inside a certain area like a function  Local Scoop  where the variable is available in more certain areas  like an if-statement  If you add Var before the variable name  then its scoop is determined where its location is  Example  var num1   18     Global scope function fun       var num2   20     Local  Function  Scope   if  true        var num3   22     Block Scope  within an if-statement          num1   18     Global scope function fun       num2   20     Global Scope   if  true        num3   22     Global Scope

User · Answer

It is very simple  Define the trailimage variable outside the function and set its value in the makeObj function  Now you can access its value from anywhere  var offsetfrommouse    10  -20   var displayduration   0  var obj selected   0  var trailimage   function makeObj address        trailimage    address  50  50

User · Answer

var Global    Global        function LocalToGlobalVariable                 This creates a local variable           var Local    5               Doing this makes the variable available for one session             a page refresh - it s the session not local           sessionStorage LocalToGlobalVar   Local              It can be named anything as long as the sessionStorage            references the local variable             Otherwise it won t work             This refreshes the page to make the variable take            effect instead of the last variable set           location reload false                  This calls the variable outside of the function for whatever use you want       sessionStorage LocalToGlobalVar   I realize there is probably a lot of syntax errors in this but its the general idea    Thanks so much LayZee for pointing this out    You can find what a local and session Storage is at http   www w3schools com html html5 webstorage asp  I have needed the same thing for my code and this was a really good idea

User · Answer

Just declare it outside the functions  and assign values inside the functions  Something like   lt script type  quot text javascript quot  gt      var offsetfrommouse    10  -20       var displayduration   0      var obj selected   0      var trailimage   null       Global variable     function makeObj address            trailimage    address  50  50       Assign value  Or simply removing  quot var quot  from your variable name inside function also makes it global  but it is better to declare it outside once for cleaner code  This will also work  var offsetfrommouse    10  -20   var displayduration   0  var obj selected   0   function makeObj address        trailimage    address  50  50       Global variable  assign value  I hope this example explains more  http   jsfiddle net qCrGE  var globalOne   3  testOne     function testOne         globalOne    2      alert  quot globalOne is   quot    globalOne        globalOne    1     alert  quot outside globalOne is   quot    globalOne    testTwo     function testTwo         globalTwo   20      alert  quot globalTwo is  quot    globalTwo       globalTwo    5     alert  quot outside globalTwo is  quot    globalTwo

User · Answer

Here is another easy method to make the variable available in other functions without having to use global variables    x000D   x000D  function makeObj     x000D       var trailimage    test   x000D    makeObj trailimage    test   x000D    x000D  function someOtherFunction     x000D    document write makeObj trailimage   x000D    x000D   x000D  makeObj    x000D  someOtherFunction    x000D   x000D   x000D

User · Answer

No  you can t  Just declare the variable outside the function  You don t have to declare it at the same time as you assign the value   var trailimage   function makeObj address      trailimage    address  50  50

User · Answer

If you read the comments there s a nice discussion around this particular naming convention  It seems that since my answer has been posted the naming convention has gotten more formal  People who teach  write books  etc  speak about var declaration  and function declaration  Here is the additional Wikipedia post that supports my point  Declarations and definitions    and to answer the main question  Declare variable before your function  This will work and it will comply to the good practice of declaring your variables at the top of the scope

User · Answer

Here is sample code that might can be helpful  var Human   function         name    quot Shohanur Rahaman quot       Global variable     this name    quot Tuly quot      Constructor variable      var age   21      var shohan   new Human     document write shohan name    quot  lt br gt  quot    document write name   document write age      Undefined because it s a local variable   Here I found a nice answer  How can one declare a global variable in JavaScript

User · Answer

If you want the variable inside the function available outside of the function  return the results of the variable inside the function  var x   function returnX   var x   0  return x    is the idea         lt html xmlns  quot http   www w3 org 1999 xhtml quot  gt       lt head id  quot Head1 quot  runat  quot server quot  gt       lt title gt  lt  title gt       lt script type  quot text javascript quot  gt           var offsetfrommouse    10  -20           var displayduration   0          var obj selected   0           function makeObj address                var trailimage    address  50  50               document write   lt img id  quot trailimageid quot  src  quot     trailimage 0      quot  border  quot 0 quot   style  quot  position  absolute  visibility visible  left  0px  top  0px  width      trailimage 1     px  height      trailimage 2     px quot  gt                 obj selected   1              return trailimage                     function truebody                 return   window opera  amp  amp  document compatMode  amp  amp  document compatMode     quot BackCompat quot     document documentElement   document body                     function hidetrail                 var x   document getElementById  quot trailimageid quot   style              x visibility    quot hidden quot               document onmousemove    quot  quot                      function followmouse e                var xcoord   offsetfrommouse 0               var ycoord   offsetfrommouse 1               var x   document getElementById  quot trailimageid quot   style              if  typeof e     quot undefined quot                     xcoord    e pageX                  ycoord    e pageY                             else if  typeof window event     quot undefined quot                     xcoord    truebody   scrollLeft   event clientX                  ycoord    truebody   scrollTop   event clientY                            var docwidth   1395              var docheight   676              if  xcoord   trailimage 1    3  gt  docwidth    ycoord   trailimage 2   gt  docheight                    x display    quot none quot                   alert  quot inja quot                              else                 x display    quot  quot               x left   xcoord    quot px quot               x top   ycoord    quot px quot                      if  obj selected   1                alert  quot obj selected   true quot                document onmousemove   followmouse              if  displayduration  gt  0                  setTimeout  quot hidetrail   quot   displayduration   1000                   lt  script gt   lt  head gt   lt body gt       lt form id  quot form1 quot  runat  quot server quot  gt       lt img alt  quot  quot  id  quot house quot  src  quot Pictures sides right gif quot  style  quot z-index  1  left  372px  top  219px  position  absolute  height  138px  width  120px quot  onclick  quot javascript makeObj  Pictures sides sides-not-clicked gif    quot    gt       lt  form gt   lt  body gt   lt  html gt   I haven t tested this  but if your code worked prior to that small change  then it should work

User · Answer

Classic example  window foo    bar    A modern  safe example following best practice by using an IIFE    function  root         use strict       root foo    bar     this     Nowadays  there s also the option of using the WebStorage API  localStorage foo   42   or sessionStorage bar   21   Performance-wise  I m not sure whether it is noticeably slower than storing values in variables  Widespread browser support as stated on Can I use

[javascript] Define a global variable in a JavaScript function

Examples related to javascript

Examples related to function

Examples related to variables

Examples related to scope

Examples related to declaration