Question

JavaScript programs consist of statements and function declarations. When a JavaScript program is executed, these two steps occur:

1. the code is scanned for function declarations, and every func. declaration is “executed” (by creating a function object) and a named reference to that function is created (so that this function can be called from within a statement)

2. the statements are executed (evaluated) sequentially (as they appear in the code)

Because of that, this works just fine:

<script>
    foo();
    function foo() {
        return;
    }
</script>

Although the “foo” function is called before it is declared, it works because the function declaration is evaluated before the statement.

However, this does not work:

<script>
    foo();
</script>
<script>
    function foo() {
        return;
    }
</script>

A ReferenceError will be thrown (“foo is not defined”).
This leads to the conclusion that every SCRIPT element inside the HTML code of the web-page represents a separate JavaScript program and every time the HTML parser encounters a SCRIPT element, it executes the program inside that element (and then once the program is executed, the parser moves on to the HTML code that follows the SCRIPT element).

Then again, this does work:

<script>
    function foo() {
        return;
    }
</script>
<script>
    foo();
</script>

My understanding here is that the Global object (which serves as the Variable object in the global execution context) exists (and remains) at all times, so the first JavaScript program will create the function object and make a reference for it, and then the second JavaScript program will use that reference to call the function. Therefore, all JavaScript programs (within a single web-page) “use” the same Global object, and all changes done to the Global object by one JavaScript program can be observed by all JavaScript programs that run subsequently.

Now, note this…

<script>
    // assuming that foo is not defined
    foo();
    alert(1);
</script>

In the above case, the alert call will not execute, because the “foo()” statement throws a ReferenceError (which breaks the whole JavaScript program) and therefore, all subsequent statements do not execute.

However, in this case…

<script>
    // assuming that foo is not defined
    foo();
</script>
<script>
    alert(1);
</script>

Now, the alert call does get executed. The first JavaScript program throws a ReferenceError (and as a consequence breaks), but the second JavaScript program runs normally. Of course, the browser will report the error (although it did execute subsequent JavaScript programs, after the error occurred).

Now, my conclusions are:

• every SCRIPT element within the HTML code of the web-page represents a separate JavaScript program. These programs execute immediately as the HTML parser encounters them.
• all JavaScript programs within the same web-page “use” the same Global object. That Global object exists at all times (from the moment the web-page is fetched up until the web-page is destroyed). JavaScript programs may manipulate the Global object, and all changes done to the Global object by one JavaScript program can be observed in all subsequent JavaScript programs.
• if one JavaScript program breaks (by having an error thrown), that does not prevent subsequent JavaScript programs to execute.

Please fact-check this post and tell me if I got something wrong.

Also, I have not found resources that explain the behaviors mentioned in this post, and I assume that the browser makers must have published such resources somewhere, so if you know about them, please provide the links to them.

Answer 1

Dmitry Soshnikov has answered your question. Every <script> element is executed as a Program, as defined by the ECMAScript specification. There is one global object that each Program within a single page uses. And that’s really it.