Calling function in a file while the called function call another function in the first file

Question

I have a trouble to call a function in another file while inside second file the called function have to call another function in first file. How it is possible? In my example I first call Printer1 function which is in File2.js then in File2.js I call Printer2 which is declared in File1.js (but I didn't include File1.js in File2.js. but I do it in the File1.js (Including File2.js)

File1.js

var data1="Hi";
Printer1(data1);

var Printer2(){
document.write(data1);
}

File2.js:

var Printer(data1){
    document.write(data1);
    Printer2();
}

Also I want to know if I can include the File2.js at the beginning of the page or I have to include one line before I call Printer1?

`var Printer(data1){` is not valid anything ? Should probably be `var Printer = function(data1){` — adeneo, Nov 17 '13 at 17:19
I cannot really follow what you are saying, but it looks to me that you have to include `file2` before `file1`. That's of course assuming that you (a) have no syntax errors and (b) the function in `file2` is actually called `Printer1` (not `Printer`). — Felix Kling, Nov 17 '13 at 17:24
I updated my answer...maybe what you're looking for is the strange part at the end. It's really odd to do, but it works. Also, keep in mind that this has a lot to do with global scope and globals are bad. Most of your logic should be contained in objects - isolated scopes. — m59, Nov 17 '13 at 17:42

m59 · Accepted Answer · 2013-11-17T17:40:43.057

Your javascript is going to be executed in the order it is loaded, other than hoisting, where functions can be used before they are written if you use the right syntax.

File 1:
  function foo() {
    alert("I'm foo!");
  }

File 2:
  foo(); //alerts "I'm Foo!"

Basically, having two files like

Is the same as combining them and just including them together. If it works like that, it will work seperately as well, other than hoisting.

This is how hoisting works: (this must be in the same file and in the same scope)

foo(); //alerts "I'm foo!" even though we haven't told it to yet.

function foo() {
  alert("I'm foo!");
}

This works because functions defined that way will be "hoisted" to the beginning of the execution in that scope.

What WON'T work:

foo(); //undefined!!

var foo = function() { //doesn't get hoisted!
  alert("I'm foo!");
}

If you want hoisting, use the other syntax!

One thing you might be wondering is this, but I can't really figure out your question (confusing wording, lol)

What if file 1 has a function that uses a function from file 2?
In that case, you won't be able to use the function in file 1, because the function from file 2 will be undefined at the time file 1 is executed, but you CAN use the file 1 function in file 2 (even at the beginning if you have it hoisted).

Like this:

File 1:

  function foo() {
    bar();
  }

  foo(); //bar is undefined! error!

File 2:

  foo(); //works!! bar is hoisted and therefore defined already for "foo" to use

  function bar() {
    alert('from file 2!');
  }

score 0 · Answer 2 · edited May 23 '17 at 12:12

First off you have var where you should have function. You shouldn't use document.write either. Check this out. The JS should look like:

file1.js:

var data1="Hi";
Printer1(data1);

function Printer2(){
  document.write(data1);
}

file2.js

function Printer1(data1){
    document.write(data1);
    Printer2();
}

And in order to make the function in file2 be callable you need your markup to look like this:

<body>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="file1.js"></script>
</body>

Calling function in a file while the called function call another function in the first file

2 Answers2