1

Is it possible to use the same variable which I have passed in another javascript file? For example, if in firstfile.js I declared const temp = 4; can I access temp in secondfile.js?

AmAn KumAr
  • 376
  • 2
  • 12

5 Answers5

3

In firstfile.js Export temp,

module.exports = { temp };

Get temp in Secondfile.js

const { temp } = require("pathOfFirstFile.js")
Artem Arkhipov
  • 7,025
  • 5
  • 30
  • 52
Anwar Gul
  • 665
  • 4
  • 15
  • can you tell me what exactly you want to do? – Anwar Gul Oct 27 '20 at 08:27
  • Actually, I am trying to make a music player. For that, I need an array of objects to load the song, song name, artist name, and album. This music player will have 50-60 music or maybe more in the future. If I include the array of objects in my main js file, it will become very long, which I don't want. So I was searching if there is a way to separate my whole list of music from the main js file. Here is the GitHub link of the project https://github.com/amankumar6/Epic-Player – AmAn KumAr Oct 27 '20 at 08:37
  • @AmAnKumAr, you need support for commonjs; which is native in node.js but not in browsers, where you need a third party provider like requirejs, browserify ... – PA. Oct 27 '20 at 08:53
1

If you are using javascript in frontend you can use global window variable.

But be warn to not use reserved variable name, so you can prefix your variable.

// file1.js
window.myapp_temp = 4


// file2.js
console.log(myapp_temp)

keep in mind that using global variable is consider as a bad practice

ZecKa
  • 2,552
  • 2
  • 21
  • 39
1

As others have mentioned, the following is not recommended, as it is a bad practice. Global variables that are implicitly read can create problems. The import export patterns recommended in other answers are a better practice, as you have more explicit knowledge of where variables are coming from.

Only try out the following if you are curious to know about how browsers read script tags from top to bottom:

If you are using html script tags, you may have script files (the order matters):

<script src="firstFile.js"> </script>
<script src="secondFile.js"> </script>

As long as const temp = 4; is globally defined in firstFile.js, secondFile.js will have access to temp.

If you flipped the order:

<script src="secondFile.js"> </script>
<script src="firstFile.js"> </script>

secondFile.js will not have access to firstFile.js.

James Ng
  • 136
  • 3
  • But this technique of using globals is currently regarded as a **bad practice**. See answers below about ES Modules. – PA. Oct 27 '20 at 08:54
1

The current best practice for the client-side is to use the ES6 modules. They separate their variables from each other, but you can export/import variables that are accessible to both files.

<script type="module" src="secondfile.js">

//firstfile.js
export const temp = 4
console.log('firstfile', temp) //4

//secondfile.js
import {temp} from './firstfile.js'
console.log('secondfile', temp) //4

If you have to support some old browsers (see on caniuse.com), you can still transcompile this code using something like Babel.

This solution also works in Node.js, however, you'll have to use the .mjs file extension or set "type": "module" in package.json (and the --experimental-modules flag if you're using version <14.0).

FZs
  • 16,581
  • 13
  • 41
  • 50
0

Yes, as long as they are both imported or declared in a single page.

topher
  • 31
  • 2