Question about functions being called from other files - Javascript

Question

I am looking for some help understanding something on a project I am working on. I have written some code that is functioning, though I am not sure why.

In a Node.js server, in /public/js there are two scripts. One (file1.js) has a function func(). file2.js, in the same directory, calls func() successfully. There is no module.exporting or requireing anywhere, yet the two files work together. They are both referenced in the index.ejs file, however. Is this where they become able to communicate?

//file1.js
function func() {
    console.log("foo")
}

//file2.js

func()

//index.ejs
...
<script src="public/js/file1.js"></script>
<script src="public/js/file2.js"></script>
...

I've spent all day reading and cannot find anything on this topic.

The script tag it causing the logic to retrieve and include the sources of the files in the file, as if they were inline. Once the file1.js is processed, all the resources that it defines globally will be available from that point onwards. — Taplar
– Taplar, Commented May 27, 2019 at 17:12
"Is this where they become able to communicate?". Absolutely. — TGrif
– TGrif, Commented May 27, 2019 at 17:13
I think the confusion here is the "called from another file". It's not called from another file. That file is retrieved and processed in your main file. The actual execution of the call is from the main file. — Taplar
– Taplar, Commented May 27, 2019 at 17:15

Quentin · Accepted Answer · 2019-05-27 17:38:20Z

Your question is about how JavaScript works in a browser.

Node.js isn't relevant here. All it is doing is running an HTTP server program that gives static files to the browser.

When you load a script into a browser using a script element (and don't use type="module"), any variable in the outer most scope of the script file (e.g. which isn't let inside a block or var inside a function) becomes a global and is accessible to any other script loaded into the same HTML document that way.

Globals are messy and a good way for different bits of code to accidentally interfere with each other so modern JavaScript generally avoids using them. This style of JavaScript programming wasn't common when JS was first implemented in browsers: Hence the behaviour described above.

This is why people started to use techniques like the revealing module pattern and why AMD and Node modules were designed before standard JavaScript modules were added to the specification.

Mosia Thabo · Accepted Answer · 2019-05-27 17:19:59Z

1

You must understand how the global space behaves in Javascript.

This Code:

<script src="public/js/file1.js"></script>
<script src="public/js/file2.js"></script>

Is the same as this:

<script>
    //file1.js
    function func() {
        console.log("foo");
    }

    func();
</script>

Because soon as file1.js is loaded, everything that is defined inside of it, becomes available anywhere in that page from where it was included.

Since file2.js uses contents of file1.js, it will work because func is available to be used anywhere below file1.js inclusion.

answered May 27, 2019 at 17:19

Mosia Thabo

4,2871 gold badge18 silver badges27 bronze badges

6 Comments

jsarbour Over a year ago

Thanks! Then why is module.exports() and requiring a local file ever necessary? Is it because those sorts of files aren't listed in the index.ejs file?

Mosia Thabo Over a year ago

I think you're confusing something here. With module exports you want the contents you're exporting to be available using the 'import' call. So this answer is barely just for your normal application and not associated to any modules.

Mosia Thabo Over a year ago

Those modules you're referring to are based on the server. and Not on the browser. So you can't put a file you're needing to use on the browser on service modules.

Divya Mamgai Over a year ago

@jsarbour You should check my comment in the question. It has a link to an article which might help you understand these concepts.

Mosia Thabo Over a year ago

Yes require() not import, Sorry man. lol I do a lot of Type Script with Angular that's why. SOrry about that.

|

Collectives™ on Stack Overflow

Question about functions being called from other files - Javascript

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related