Accessing a function from another javascript file

Question

I have 2 Javascript files, a main.js which loads first and then a secondary.js which loads afterwards. What I am trying to do is create a global function in main.js which can be utilized on the pages where secondary.js is loaded.

Here's what I have in main.js:

var doSomething;

doSomething = function() {
    //things to do
}

And then in my secondary.js:

var result = doSomething();

However, this is returning doSomething is not defined. I searched SO and found similar questions but was not able to find a solution that worked for me.

Using node you will need to use require(). In browser you will need to either include both files in the correct order OR use a module loader (like SystemJS). — Mike Cheel, Nov 21 '17 at 16:31
@evolutionxbox Have you read through the answer? It tells you how to import another js inside a js — Red fx, Nov 21 '17 at 16:32
I am not trying to import another js inside a js, I'm trying to create and access a global function. — user13286, Nov 21 '17 at 16:32
fairly common in node-apps: https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export — admcfajn, Nov 21 '17 at 16:33
To try to access a function inside another file, you kinda have to import it. Otherwise how can it see? — Red fx, Nov 21 '17 at 16:33
@Redfx You don't work with js much do you? Good practice or not, directly calling a function from another file is very common in the real world. — takendarkk, Nov 21 '17 at 16:34
I can create a global variable that can be accessed from another Javascript file without importing it through js, just trying to do that same thing but with a function. I am not using Node either. — user13286, Nov 21 '17 at 16:35
@csm_dev oh then that 3200 voted answer counts nothing https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file — Red fx, Nov 21 '17 at 16:35
@csm_dev and no, i do not work with plain js without any framework and I always had to import — Red fx, Nov 21 '17 at 16:38
Check this: https://plnkr.co/edit/vidQBnhASJ71ftEANPmn?p=preview — Mike Cheel, Nov 21 '17 at 16:38
"_main.js which loads first and then a secondary.js which loads afterwards_" Show us your example of this. — takendarkk, Nov 21 '17 at 16:40
Please create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem. Yours question is far too unclear currently. — Liam, Nov 21 '17 at 16:40
Figured out the issue. I was defining the function within document ready and I was trying to access it outside of document ready. Thanks for all the responses everyone! — user13286, Nov 21 '17 at 16:42
This is why MCVE exists... That being said, thank you for coming back to let us know instead of just running off :) — takendarkk, Nov 21 '17 at 16:43
As mentioned creating a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) would of saved everyone wasting their time here... — Liam, Nov 21 '17 at 16:43
@Redfx calling a global function defined in another file doesn't require imports. if you dont work with plain js, maybe listen to the people who have? — , Nov 21 '17 at 16:50
Hi @Amy thank you for your spare time to read through all comments. He did not post any HTML, and I didnt insist on anything. I just told by my experience. Btw, if he doesnt import the scripts inside html, would it be able to still find the method? Without no connection in anyway ? I'm asking to learn — Red fx, Nov 21 '17 at 16:54
@Redfx linking to the script from an html file doesn't qualify as "imports". That's a module term. Also "oh then that 3200 voted answer counts nothing" is absolutely insisting on something using sarcasm. — , Nov 21 '17 at 16:56
@Amy Well A plain js file would never be able to see a method inside another one without any link between. I cannot tell if he is using a framework or linking through HTML. So I am not totally wrong, neither those guys. I was commenting through what was given on the question, no offence. Which loads the 'script' files and acts as a one file -> thus it sees the method right? By not knowing his html or whether he is using a framework or not.. It is kind of aggressive to blame me in this manner. — Red fx, Nov 21 '17 at 16:57
Yes, one file can call a function in another file without directly referencing that other file. — , Nov 21 '17 at 17:00
@Redfx no one is "blaming" you for anything. What are you talking about? — , Nov 21 '17 at 17:03

Jonathan.Brink · Answer 1 · 2017-11-21T16:46:52.720

1

You are getting doSomething is not defined because doSomething is being created after secondary.js has been loaded, so it's not available and you are getting a reference error.

You need to control the order in which your code is getting executed.

How you accomplish this depends on how you are loading your JavaScript files. For example, let's say you are using script tags in your html file. You can have main.js load after secondary.js like this:

<script src="main.js"></script>
<script src="secondary.js"></script>

edited Nov 21 '17 at 16:46

answered Nov 21 '17 at 16:31

Jonathan.Brink

23,757
20
73
115

I don't see how this is going to help? – Liam Nov 21 '17 at 16:32
*Just make sure that secondary.js has executed prior to main.js. You can control that by the order of your script tags.* This line is the only thing relevant here – Liam Nov 21 '17 at 16:33
@LIam this helps because using `window` is one approach to sharing state between files. It's essentially sharing a global variable. – Jonathan.Brink Nov 21 '17 at 16:33
Also it's considered bad practice to pollute the global scope like this. Closures would make more sense – Liam Nov 21 '17 at 16:34
1

It's a reasonable approach. But I would elaborate to include local/session storage. & yes, technically not the best practice, but we're not all making masterpieces here. Sometimes it just needs to work. – admcfajn Nov 21 '17 at 16:34
`window.foo` is identical to `var foo`. `foo` is created in the global scope, which is `window` – Liam Nov 21 '17 at 16:35
@Liam it's nice to use `window` so we are explicit about putting things on the global scope. Is that a best practice? No. But, it's a start and is a basic solution to the OP's original question. – Jonathan.Brink Nov 21 '17 at 16:37
1

No it's not nice to use window. It's bad practice. Using closures is nice – Liam Nov 21 '17 at 16:41
@Liam, if the OP wants his code to be in separate files, how are closures going to help? – Jonathan.Brink Nov 21 '17 at 16:45
2

**OP:** *What I am trying to do is create a global function in `main.js` which can be utilized on the pages where `secondary.js` is loaded*. – Danny Fardy Jhonston Bermúdez Nov 21 '17 at 16:46
Ok, Ignoring all talk about global scope, I go back to my initial point, **none of this is relevant**. This does not and will not help the OP. His issue was that he'd wrapped the [call in a closure](https://stackoverflow.com/questions/47417996/accessing-a-function-from-another-javascript-file#comment81790428_47417996) (ironically). So this is all just random bumf unrelated to the actual question being asked. *a main.js which **loads first** and then a secondary.js* – Liam Nov 21 '17 at 16:55

Accessing a function from another javascript file

1 Answers1