How does "scope" work with multiple script tags for Javascript in an HTML document?

Question

I'm not quite sure what goes on between <script> tags. For example, the following gives a reference error and type error in Chrome:

<html>
    <head>
    <script type="text/javascript">
        T.prototype.test = function() {
            document.write("a");
        }
    </script>
    <script type="text/javascript">
        function T() {}
        var v = new T();
        v.test();
    </script>
    </head>
    <body>
    </body>
</html>

But this works:

<html>
    <head>
    <script type="text/javascript">
    </script>
    <script type="text/javascript">
        T.prototype.test = function() {
            document.write("a");
        }
        function T() {}
        var v = new T();
        v.test();
    </script>
    </head>
    <body>
    </body>
</html>

Esailija · Accepted Answer · 2011-11-19 05:19:57Z

17

The upper script is executed first in the first example, so it doesn't know about T yet, hence the error.

In the second example, T is well defined and known anywhere as soon as the script tag is executed. This is due to function declarations being hoisted to the top, no matter what the order is, they are always available. Function declaration hoisting is more deeply explained here

The second example after hoisting is applied:

var v,
   T = function(){}; /* using comma like this is short-hand for: var v; var T = function(){}; */

T.prototype.test = function() {
        document.write("a");
    };

v = new T();
v.test();

edited Nov 19, 2011 at 5:19

answered Nov 19, 2011 at 5:06

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mshang Over a year ago

Thanks for the link! If I have an object whose methods I want to spread across two files, what's the best way to do this?

Esailija Over a year ago

@mshang, don't do that, have a single file that has a name that describes the object and all of its methods should be there. There is no reason to have myobjectmethodspart1.js and myobjectmethodspart2.js... that just makes maintenance harder.

Jim Deville Over a year ago

Or if you want to do that, make one object the prototype in file1.js and the other one use that prototype in file2.js

mshang Over a year ago

@Esailija, in my case, for example, I have a Node object and I would like to have all traversal-related methods in one file and all parsing-related methods in another. I think it makes sense and makes it easier to find things.

Esailija Over a year ago

@mshang, I think that then in that case your object has too much responsibility (I.E. god object). Node is also reserved at least in google chrome. But yeah if you really wanna do it after my warnings then JimDeville has a nice solution :P

|

Jim Deville · Accepted Answer · 2011-11-19 05:06:13Z

9

They are each parsed in the global context, but in order. The entire first script tag is parsed and executed before the second one is considered. As part of parsing a script, function declarations are recognized ahead of time, which is why the second one works while the first one doesn't.

answered Nov 19, 2011 at 5:06

Jim Deville

10.7k1 gold badge42 silver badges49 bronze badges

1 Comment

Dimitri Kopriwa Over a year ago

What is the global context ? globalThis ? window ? document ? I have tried to write <script>class FooBar {}; const foo = new FooBar()</script>, in my JS console, I can find foo, FooBar, but they are not in any of those.

Collectives™ on Stack Overflow

How does "scope" work with multiple script tags for Javascript in an HTML document?

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related