1

Not really sure how to ask this, but I'm just looking for some insight/info.

If I'm including multiple JavaScript files in my app, how does the page/app see all the JS code. Does all the JS in all files become one-big JS file

If one JS file has a variable foo=true; and another JS file has foo=false, what is the scope of foo? Is it local to the script it is in or does it become seen in 'all' the js code?

Thanks for any insights.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
John Cowan
  • 1,452
  • 5
  • 25
  • 39

3 Answers3

2

Yes, for most purposes it's just like if there were only one file, built by concatenating all the files in the order of imports.

The differences :

  • "use strict"; (supposing it's present) is only valid per file
  • it's much slower for the browser to fetch 10 small files than a big one, which is why js developers building big applications usually concatenate (and often minify) all the files for production
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • One caveat ... the order of JavaScript files matters. If you declare `foo=true` in the second file and try to reference it in the first, it wont see it. – PlantTheIdea Mar 13 '13 at 14:23
  • +1 correct and and fast answer. @LifeInTheGrey he mentioned "in the order of imports" – Benjamin Gruenbaum Mar 13 '13 at 14:23
  • @LifeInTheGrey — Unless the attempt to reference it occurs in a function that isn't called until after the second file has been processed. – Quentin Mar 13 '13 at 14:23
  • indeed my caveat has a caveat :P. But I was just pointing out that there was the possibility of variable passing not working 100% of the time. Its a small thing to work around. Still upvoted the answer, as it is very descriptive and correct. – PlantTheIdea Mar 13 '13 at 14:24
  • Thanks for all the replies. Much appreciated. --jc – John Cowan Mar 13 '13 at 14:43
0

The only thing the scripts share is the global scope; the separate parts don’t become one big file.

For example, you can’t do this:

<script type="text/javascript">
function hello() {
</script>
<script type="text/javascript">
}
</script>

And a 'use strict' in one <script> wouldn’t apply strict mode across all of them.

Ry-
  • 218,210
  • 55
  • 464
  • 476
0

If you define in one file, without using var:

foo = true;

It will be a global variable, and it will be accessible by your second JS file when it does foo = false

All your scripts will share the same global namespace if they are defined in plainly on the page. To create a local scope for your variable, you'd have to wrap it in a function.

See the explanation provided in this question: What is the scope of variables in JavaScript?

To easily handle multiple JavaScript files and keeping the global scope minimal, while allowing the different scripts to share information, I recommend you try RequireJS (http://requirejs.org/), it is a JavaScript file and module loader. It will handle any file dependancies you may have and it'll load them asynchronously. It will also make it easy for you to pass variables amongst the different modules/files without having to expose them to the global scope.

There are other file/module loaders too. See: http://www.netmagazine.com/features/essential-javascript-top-five-script-loaders

Community
  • 1
  • 1
Amy
  • 7,388
  • 2
  • 20
  • 31