Why I can't access a JavaScript function defined in a .js file from another .js file?

Question

I am pretty new to JavaScript, and I was experimenting with the global scope following a tutorial.

In this tutorial I have 3 files:

1) index.htm:

<html>
    <head></head>

    <body>
        <h1>HELLO WORLD !!!</h1>

        <script src="app.js"></script>
        <script src="utility.js"></script>

    </body>
</html>

As you can see I include 2 JavaScript files.

2) app.js:

var person = 'Torny';   // When I call the logPerson() function this line override the person variable value into the global stack

//console.log(person);

logPerson();

3) utility.js in which is defined the logPerson() function defined into the app.js file:

var person = 'Steve';

function logPerson() {
    console.log(person);
}

Ok, so I expected the following behavior:

Into the app.js file set the string 'Tony' as value of the person variable, the call the logPerson() function declared into the utility.js file and so print 'Tony' in the console.

The problem is that when I try to open the index.htm file into FireFox, I go into FireBug console and instead the 'Tony' value I obtain this error message:

ReferenceError: logPerson is not defined

So it seems that from the app.js file it can't see the logPerson() function that is defined into the utility.js file and imported.

Why? What am I missing? what is wrong?

The function call in app.js is made to the time where utility.js (and the functions within) is not known. Include order matters — Wa Kai
– Wa Kai, Commented Oct 29, 2015 at 15:10

element11 · Accepted Answer · 2015-10-29 15:11:06Z

13

In javascript the order of the files matters. You need to load the script which defines your function before you can use it. Switch the 2 <script> tags

<body>
    <h1>HELLO WORLD !!!</h1>

    <script src="utility.js"></script>
    <script src="app.js"></script>

</body>
</html>

answered Oct 29, 2015 at 15:11

element11

4,5052 gold badges19 silver badges25 bronze badges

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

Comments

messerbill · Accepted Answer · 2015-10-29 15:10:44Z

4

change

<script src="app.js"></script>
<script src="utility.js"></script>

to

<script src="utility.js"></script>
<script src="app.js"></script>

;) You try to get definitions from a script which is loaded later greetings

answered Oct 29, 2015 at 15:10

messerbill

5,6391 gold badge31 silver badges39 bronze badges

Comments

rajuGT · Accepted Answer · 2015-10-29 15:13:27Z

3

First browser will parse the JS files.

If you see the order of script included

app.js
utility.js

So when it is parsing app.js. It sees logPerson() which is a function call not function definition. At this point of time the file utility.js is not parsed and the browser is not aware of that function also. (meaning till it reads utility.js).

So to solve this, call the logPerson api after dom-loaded, usiing body onload function.

answered Oct 29, 2015 at 15:13

rajuGT

6,4442 gold badges30 silver badges44 bronze badges

Comments

Little Santi · Accepted Answer · 2015-10-29 15:10:37Z

2

The explanation is as simple as that Javascript code is interpreted on the fly: As one script is loaded, it is executed immediately.

So, you just have to declare the scripts in the right order of dependence.

answered Oct 29, 2015 at 15:10

Little Santi

8,8532 gold badges22 silver badges50 bronze badges

Comments

Quentin · Accepted Answer · 2015-10-29 15:10:41Z

2

You run the script which tries to use logPerson before you run the script that defined logPerson.

If you reverse the order of the scripts, it will work.

Function declaration hoisting only works within a given script.

answered Oct 29, 2015 at 15:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

ballade4op52 · Accepted Answer · 2017-05-23 00:01:15Z

0

In my case, it wasn't the <script> ordering that was the issue (as initially thought), but the scope in which the function was defined. To enable access of the function in other JS files, I made it a property of the object that is in the scope of those files. So now, it can be accessed as MyObject.myFunction wherever MyObject is instantiated.

(function ($) {
    function MyObject(data) {
        var myFunction = function(){
            console.log('');
        }

        $.extend(this, {

              // methods
              "myFunction": myFunction,

        });
    }
}(jQuery));

answered May 23, 2017 at 0:01

ballade4op52

2,2675 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

Why I can't access a JavaScript function defined in a .js file from another .js file?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related