CODEWITHSUNDEEP
javascript
user3184459
user3184459

Reputation: 23

In javascript, only the function call before it's defined in the same script tag works

// Scenario 1

<script>
myFunction(); // This won't work.
</script>

<script>
function myFunction() {
    alert("ok");
}
</script>

// Scenario 2

<script>
myFunction(); // This will work.
function myFunction() {
    alert("ok");
}
</script>

Why? Thanks for your help!

Upvotes: 2

Views: 927

Answers (5)

chrisn
chrisn

Reputation: 1

rajesh kakawat's answer seems to agree with what I observed but I haven't seen this issue addressed directly in Flanagan's book, "JavaScript: The Definitive Guide" or elsewhere.

js is read and 'compiled' together (with script tags above in the page's html) and executed script tag by script tag - one script tag at a time - consecutively down the page using all of the definitions, etc. from all of the script tags above (but not from script tags below in the page's html).

This is what appears to be happening:

  1. read current script tag'w js chunk (the entire script tag)
  2. combine and 'compile/interpret' with all previously processed script tags above current script tag
  3. execute all js under current script tag
  4. process any resultant html output by current script tag (document.write)
  5. parse html moving down to next script tag below then go back to step 1 if another script tag is hit below.

This means that if a function is defined in a script tag below (hasn't been processed yet) and called in the current script tag then a "'function x' undefined" error will occur because the js interpreter doesn't know about it yet. However within a given script tag a function can be defined below the call in the listing and work the same as if it had been defined above in the listing.

Upvotes: 0

sunderls
sunderls

Reputation: 783

every script tag the page find, it will execute it.

so the first script, it runs myFunction(), but it's not there, ERROR.

For the second, myFunction is there, so OK.

But pay attention that the following is also error:

<script>
    myFunction(); // error
    var myFunction = function() {
        alert("ok");
    }
</script>

when you define myFunction with var, it's now a local variable(here its global scope, so global variable), named myFunction, and only assigned to a function during run-time. So during run-time, you call myFunction() but it is not assigned with a value yet, event don't know whether myFunction is a function or not.

when you do it as following

<script>
    myFunction(); // OK
    function myFunction() {
        alert("ok");
    }
</script>

A function named myFunction will be created during something like pre-process, which does some initial work. and after that is the run-time, which handles myFunction(). So now, when it's called, there is a function with the name of it, no problems.

Upvotes: 1

SK.
SK.

Reputation: 4358

Javascript is client side scipting language. When web page loads browser checks for all syntex and function available in the page.

  • If you are defining a function within one <script> tag and calling from other <script> tag then browser will only check within first <script> tag.
  • If you want to call a function from any script tag then put the function in js file and use it in html page.

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

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.

JavaScript: The Definitive Guide

JavaScript statements that appear between and tags are executed in order of appearance; when more than one script appears in a file, the scripts are executed in the order in which they appear. If a script calls document.write( ), any text passed to that method is inserted into the document immediately after the closing tag and is parsed by the HTML parser when the script finishes running. The same rules apply to scripts included from separate files with the src attribute.

Upvotes: 0

Bic
Bic

Reputation: 3134

In JavaScript, scripts are loaded in the order they appear on the page and are blocking. Because you put them in separate script tags, they are loaded separately. The first is loaded and the method executed without it being defined. In the second example, the method definition and the call are loaded at the same time, meaning that the method does exist when it is called.

Upvotes: 1

Related Questions