Is it possible to use a variable in a file called first.js inside another file called second.js?
first.js contains a variable called colorcodes.
8 Answers
As Fermin said, a variable in the global scope should be accessible to all scripts loaded after it is declared. You could also use a property of window or (in the global scope) this to get the same effect.
// first.js var colorCodes = { back : "#fff", front : "#888", side : "#369" }; ... in another file ...
// second.js alert(colorCodes.back); // alerts `#fff` ... in your html file ...
<script type="text/javascript" src="first.js"></script> <script type="text/javascript" src="second.js"></script> 
8 Comments
Piskvor left the building
In a browser,
window is the global scope - so window.colorCodes and the (global) object colorCodes is the same object.
Dagg Nabbit
True... the reason I mention it is for cases where you need to set a global variable from a non-global scope.
user25
what about html? in html I have:
<script>var variable1 = true;</script> <script src="first.js"></script> will first.js see that variable? I tested it in Google Chrome extension and it didn't work
Joseph K.
If you are using eslint, you can add
/* global colorCodes */ on the line above to prevent "...is not defined" error message
Gal Grünfeld
This is an outdated answer. Please accept my answer below that uses ES6 export/import syntax, which is mostly the standard now.
|
You can export the variable from first file using export.
//first.js const colorCode = { black: "#000", white: "#fff" }; export { colorCode }; Then, import the variable in second file using import.
//second.js import { colorCode } from './first.js' 
3 Comments
AntonOfTheWoods
const in the example and talking about variable - am I missing something? If I do this and use a variable var and try to assign then at least in a Chrome extension it complains with "Cannot set property XXX of #<Object> which has only a getter". If this can only be done with const/read-only, then this is a highly misleading answer.Gal Grünfeld
const is a type of a variable. var is also a type of a variable. They're two different kinds of variables and have different characteristics. The answer is not misleading, you're just using the wrong kind of variable for your use case. This cannot be done with const - they're immutable after initialization. You can learn about the different variable declarations here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Hashim Aziz
This gives me the error:
An export declaration can only be used at the top level of a module.Using Node.js you can export the variable via module.
//first.js const colorCode = { black: "#000", white: "#fff" }; module.exports = { colorCode }; Then, import the module/variable in second file using require.
//second.js const { colorCode } = require('./first.js') You can use the import and export aproach from ES6 using Webpack/Babel, but in Node.js you need to enable a flag, and uses the .mjs extension.
2 Comments
BenKoshy
does it have to be a const in order to export it?
Sir Mishaa
In Node.js, this is not longer the case. You can simply add
type: module in the package.json file to use import / export natively.This should work - define a global variable in firstfile and access it from secondfile:
<script src="/firstfile.js"></script> <script src="/secondfile.js"></script> firstfile.js:
var colors = { text:'#000000', background:'#aaaaaa', something_else:'blue' }; secondfile.js:
do_something_with(colors.background); Note that the order in which you load the script files is significant for some browsers (IE6 for sure, maybe others)
answered Jul 14, 2010 at 8:18
Piskvor left the building
93.1k46 gold badges182 silver badges226 bronze badges
2 Comments
aggaton
You may need to attach that variable to the object like: this.colors = colors. If its an object rather than an enum, you can make a function to just return the value. this.getTextColor = function() { return colors.text; };
v3nt
how would you update a variable from a loaded page? <script type="text/javascript">colors.background="new col"; </script> doesn't seem to work.
I did like the answer above said, but it didn't work for me at first because I was declaring these variables inside jQuery $( document ).ready().
So make sure you declare your variables inside the <script> tag not somewhere else.
answered Aug 17, 2016 at 11:15
Basheer AL-MOMANI
15.5k9 gold badges103 silver badges96 bronze badges
Comments
I came across amplify.js. It's really simple to use. To store a value, let's call it "myValue", you do:
amplify.store("myKey", "myValue") And to access it, you do
amplify.store("myKey") 
Comments
If you store your colorcodes in a global variable you should be able to access it from either javascript file.
Comments
I may be doing this a little differently. I'm not sure why I use this syntax, copied it from some book a long time ago. But each of my js files defines a variable. The first file, for no reason at all, is called R:
var R = { somevar: 0, othervar: -1, init: function() { ... } // end init function somefunction: function(somearg) { ... } // end somefunction ... }; // end variable R definition $( window ).load(function() { R.init(); }) And then if I have a big piece of code that I want to segregate, I put it in a separate file and a different variable name, but I can still reference the R variables and functions. I called the new one TD for no good reason at all:
var TD = { xvar: 0, yvar: -1, init: function() { ... } // end init function sepfunction: function() { ... R.somefunction(xvar); ... } // end somefunction ... }; // end variable TD definition $( window ).load(function() { TD.init(); }) You can see that where in the TD 'sepfunction' I call the R.somefunction. I realize this doesn't give any runtime efficiencies because both scripts to need to load, but it does help me keep my code organized.
<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>