Define a global variable in a JavaScript function
Solution 1
As the others have said, you can use var
at global scope (outside of all functions and modules) to declare a global variable:
<script>
var yourGlobalVariable;
function foo() {
// ...
}
</script>
(Note that that's only true at global scope. If that code were in a module — <script type="module">...</script>
— 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):
<script>
function foo() {
globalThis.yourGlobalVariable = ...;
}
</script>
On browsers, you can do the same thing with the global called window
:
<script>
function foo() {
window.yourGlobalVariable = ...;
}
</script>
...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 "use strict"
.)
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:
<script type="module">
let yourVariable = 42;
// ...
</script>
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:
<script>
(function() { // Begin scoping function
var yourGlobalVariable; // Global to your code, invisible outside the scoping function
function foo() {
// ...
}
})(); // End scoping function
</script>
Solution 2
Just declare
var trialImage;
outside. Then
function makeObj(address) {
trialImage = [address, 50, 50];
...
...
}
Solution 3
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 :)
Solution 4
Just declare it outside the functions, and assign values inside the functions. Something like:
<script type="text/javascript">
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 "var" 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("globalOne is :" + globalOne );
globalOne += 1;
}
alert("outside globalOne is: " + globalOne);
testTwo();
function testTwo()
{
globalTwo = 20;
alert("globalTwo is " + globalTwo);
globalTwo += 5;
}
alert("outside globalTwo is:" + globalTwo);
Solution 5
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];
hamze
Updated on July 16, 2022Comments
-
hamze almost 2 years
Is it possible to define a global variable in a JavaScript function?
I want use the
trailimage
variable (declared in themakeObj
function) in other functions.<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript"> var offsetfrommouse = [10, -20]; var displayduration = 0; var obj_selected = 0; function makeObj(address) { **var trailimage = [address, 50, 50];** document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0" style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">'); obj_selected = 1; } function truebody() { return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body; } function hidetrail() { var x = document.getElementById("trailimageid").style; x.visibility = "hidden"; document.onmousemove = ""; } function followmouse(e) { var xcoord = offsetfrommouse[0]; var ycoord = offsetfrommouse[1]; var x = document.getElementById("trailimageid").style; if (typeof e != "undefined") { xcoord += e.pageX; ycoord += e.pageY; } else if (typeof window.event != "undefined") { xcoord += truebody().scrollLeft + event.clientX; ycoord += truebody().scrollTop + event.clientY; } var docwidth = 1395; var docheight = 676; if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) { x.display = "none"; alert("inja"); } else x.display = ""; x.left = xcoord + "px"; x.top = ycoord + "px"; } if (obj_selected = 1) { alert("obj_selected = true"); document.onmousemove = followmouse; if (displayduration > 0) setTimeout("hidetrail()", displayduration * 1000); } </script> </head> <body> <form id="form1" runat="server"> <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px; top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" /> </form> </body> </html>
-
op1ekun over 11 yearsIf You want to define your variables elsewhere be sure to understand what hoisting is. Here is a very nice article about it adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting. Good luck!
-
mustafa.0x over 10 yearsSorry! "Is it possible to define a global variable in a JavaScript function?" -- "No, you can't" isn't correct, as the first answer shows!
-
Guffa over 10 years@mustafa.0x: You are mistaken. You can't define a global variable inside a function. You can implicitly create a global variable, or create a window property inside a function, but you can't define a global variable inside a function.
-
mustafa.0x over 10 yearsWith regards to JavaScript in a browser environment, a global variable and a property of
window
are synonymous. Either way, the semantic distinction you're making is clear, so I don't mind un-downvoting. Edit: unable to change my vote, sorry! -
Domi about 10 yearsNote that using
window
won't work in Node. The easiest trick here is to set:GLOBAL.window = GLOBAL;
-- as explained in this related question. Of course, it's not pretty conceptually. I prefer to do things the other way around, so I can useGLOBAL
instead ofwindow
. -
EML almost 10 yearsThis isn't what
definition
anddeclaration
mean in C. Your first line could be either a declaration or a definition (depending on where it is); the second is just an assignment. A declaration just specifies the interpretation of the identifier (ie.myVar
is anint
); if the declaration also reserves storage, it is adefinition
. This is unrelated to typing; it's part of how compilation units understand references to other compilation units. -
Bergi over 9 yearsEven in JS,
var myVar
is called declaration (it doesn't need to be typed) andmyVar = 10
an assignment. I've heard the term "defintion" for the compound (var myVar = 10;
). -
op1ekun over 9 yearsJust one more comment to add to the discussion :) code.tutsplus.com/tutorials/…
-
op1ekun over 9 yearsFollowing airbnb's javascript guidelines: github.com/airbnb/javascript#variables they call it a variable declaration.
-
Rohit Gupta almost 9 yearsWhilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
-
HereToLearn_ over 8 yearslocalStorage and sessionStorage only works for string values.
-
Lars Gyrup Brink Nielsen over 8 yearsThat is right, @HereToLearn_, but then you can use
localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });
andvar foo = JSON.decode(localStorage.foo);
. -
Michał Perłakowski over 8 years
this
isundefined
in strict mode outside a function and should not be used to refer to the global object. -
Michał Perłakowski over 8 yearsWhat
localStorage
has to do with global variables? -
Lars Gyrup Brink Nielsen over 8 yearsOP is looking for at solution to this problem: "I want use the trailimage variable (declared in the makeObj function) in other functions." Who says that the solution has to involve global variables? Global variables are seldom a good solution to anything.
-
Gherman about 8 years@CasparKleijne, I don't understand it. Why would you assign it on window when you literally have no evidence that the window object actually exists. You know nothing about how your code will be used in the future. It might be even used in the MongoDB environment or rino instead of your node. And the window object is also not visible even in the browser if you use web workers for instance. This will completely kill reusability.
-
Ahmed Syed about 8 years
window.yourGlobalVariable = ...;
works like a charm after reading 5 to 6 questions on stack site. -
Stuntddude about 8 yearsThis doesn't help to answer the question. It should have been a comment, not an answer.
-
op1ekun about 8 years@Stuntddude you're probably right :( I started answering the question and then decided to diverge a bit, and well this is what we've got. Still some ppl still find it useful so I've left it here. Thanks for your feedback!
-
Jacques Koekemoer about 8 yearsYou can also set dynamic variables in the window by using code like this:
eval("window."+dynamic_variable_name+" = '"+dynamic_variable_value+"';");
which is helpful if you need to maintain the value of custom JS/HTML elements -
T.J. Crowder about 8 years@JacquesKoekemoer: There's no reason whatsoever to use
eval
there. Instead:window[dynamic_variable_name] = dynamic_variable_value;
-
cregox about 7 yearsif you're not using strict (but why aren't you using strict?), you actually can declare and define global vars inside a function by going against all good practices and just not using the
var
, which is what Guffa meant by implicitly create (such as @DhruvPathak pointed there, as well). -
iyrin almost 6 yearsSo far this is the only answer that works at all, but it requires reloading the page and
location.reload(false);
refreshes the page repeatedly. -
Webwoman about 5 yearshow use the function's trick if you have to import your file in an another file?
-
T.J. Crowder about 5 years@Webwoman - Import how? JavaScript standard modules? CommonJS?
-
Webwoman about 5 yearslike following, module.exports... then require("/")
-
T.J. Crowder about 5 years@Webwoman - (CommonJS) There's no need for it. In a CommonJS-style module (such as Node.js's modules), your top-level code isn't at global scope, so
var x;
won't create a global. (But if you wanted to do it anyway, you'd just assign tomodule.exports
within the wrapper function.(function() { var moduleGlobal = 42; module.exports.foo = function foo() { /*...*/ }; })()
) -
Astrit Spanca about 4 yearsI think this is another way too: (() => { a = 10; console.log(a); })(); console.log(a);
-
T.J. Crowder about 4 years@AstritSpanca - That's the Horror of Implicit Globals I mention in a parenthetical in the middle of the answer. :-)
-
Astrit Spanca about 4 years@T.J.Crowder i am well aware of it though i didn't notice that in your answer. Anyway using global variables is uneccessary most of the time.
-
T.J. Crowder about 4 years@AstritSpanca - Indeed. And it's never necessary (anymore) to use implicit globals. :-)
-
Avatar over 3 yearsI had to define
window.yourGlobalVariable = ...;
outside offunction foo()
to make the variable accessible. Is "global variables declared with var are properties of the window object" still valid? -
T.J. Crowder over 3 years@KaiNoack - Yes, it is. My guess is that you were using a module. The top-level scope of modules isn't global scope, so
var
there doesn't create a global variable, just a variable that's global to the module. -
Avatar over 3 yearsYes, I tried to access the global variable from within a module/plugin, in the callback function. And this was undefined. Maybe we should add this special case to the answer?
-
T.J. Crowder over 3 years@KaiNoack - The answer needed miscellanous updating and cleanup, so I've done that and mentioned modules (and
globalThis
). :-) -
Robert over 2 yearsPretty clean and working solution +1
-
Ozgun Senyuva over 2 yearsIn my case I replace
sessionStorage
withlocalStorage
and this suppress the need tofunction LocalToGlobalVariable()
. I am usinglocalStorage.setItem("xxx", "yyy")
andlocalStorage.getItem("xxx")
for setting and getting the variables. -
Fishbite about 2 yearsI'm reading this post because I'm trying to understand why I have access to
const actx = "value
declared in a file withtype = "module"
from within a file that has no type defined.const actx
is an audio context. Both files are loaded in the same app of course, but I didn't expect that behavior and I can't quite see the answer in this post. Could you please explain this further? -
T.J. Crowder about 2 years@Fishbite - You're right to wonder about that because on the face of it, you shouldn't have access to that module-level const from a script (no
type
). I can only think of three possibilities: 1. You have an element in the DOM withid="actx"
(which creates an automatic global), and it's that global (not theactx
module const) that you're seeing in your script; or 2. You have a differentactx
global variable declared globally some other way somewhere; or 3. You're using a bundler that's messing this up (which seems unlikely, but...). :-) -
T.J. Crowder about 2 years@Fishbite - If it's not one of those and you can create an minimal reproducible example, you might post it as a question. Please ping me here with the link if you do. Happy coding!
-
Fishbite about 2 years@T.J.Crowder my apologies, I had it back to front.
const actx = new AudioContext():
is declared in a filescript.js
at root level with no type defined and I have access to that context from within a fileplayMusic.js
withtype="module"
I have no DOM element with anid=actx
and I'm not using a bundler.script.js
is loaded beforeplayMusic.js
As for posting a question, to reproduce having two files, I would just need to include the contents of each file in a separate code blockContents of file 1
and thenContents of file 2
is that correct? My IDE is VS Code. -
T.J. Crowder about 2 years@Fishbite - That way around it makes perfect sense. The top level of a non-module script is global, so any top-level declarations are globals, accessible from anywhere.
-
Fishbite about 2 years@T.J.Crowder Phew! I thought I was losing the plot, this has been a great help and my code is working as intended thankfully. I thought I had come across an anomaly.