Calling a JavaScript Function in Another Js File

Calling a JavaScript function in another js file

A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it.

A function cannot be called unless it is in the same or greater scope then the one trying to call it.

You declare function fn1 in first.js, and then in second you can just have fn1();

1.js:

function fn1 () {
    alert();
}

2.js:

fn1();

index.html :

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

Call JavaScript function from another JavaScript file

tl;dr: Load your dependencies before you depend on them.

You can't call a function that hasn't been loaded.

The functions defined in your second JS file won't be loaded until the first file has finished running all the top-level statements.

Reverse the order of your script elements.

How do I call a JS Function in another file?

In the js File A I had to create a class to be able to export the function.
The class had to be exported with "module.exports"

module.exports = class A {
    getFiles(input) {
        ...
    }
}

And now in File B I had to add a require line to this class:

const A = require('./A.js');

And now I can call my function "getFiles" from File A:

// vscode extension function
function activate(context) {
    const a = new A();
    a.getFiles('');
}

https://nodejs.org/api/modules.html#modules_modules

Can we call the function written in one JavaScript in another JS file?

The function could be called as if it was in the same JS File as long as the file containing the definition of the function has been loaded before the first use of the function.

I.e.

File1.js

function alertNumber(number) {
    alert(number);
}

File2.js

function alertOne() {
     alertNumber("one");
}

HTML

<head>
....
    <script src="File1.js" type="text/javascript"></script> 
    <script src="File2.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

~~The other way won't work.~~
As correctly pointed out by Stuart Wakefield. The other way will also work.

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

What will not work would be:

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script type="text/javascript">
       alertOne();
    </script>
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
</body>

Although alertOne is defined when calling it, internally it uses a function that is still not defined (alertNumber).

How to call function from one js file to another

Modules have their own scope and top level var statements and function declarations do not create globals. (This is good, globals are problematic).

To deal with this:

export the variables you want to use outside the module
Change the <script> that loads viewer.js so it loads it as a module
Remove the <script> that loads player.js
Import the variables from player.js that you want to use with an import statement inside viewer.js

Import functions from another js file. Javascript

The following works for me in Firefox and Chrome. In Firefox it even works from file:///

models/course.js

export function Course() {
    this.id = '';
    this.name = '';
};

models/student.js

import { Course } from './course.js';

export function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
};

index.html

<div id="myDiv">
</div>
<script type="module">
    import { Student } from './models/student.js';

    window.onload = function () {
        var x = new Student();
        x.course.id = 1;
        document.getElementById('myDiv').innerHTML = x.course.id;
    }
</script>

Prop undefined when passing to a function in another .js file

EDIT: Your size prop is undefined because you're not exporting your functions properly.

Change this:

  function Testing(props) {
  for (var i = 0; i < props.size; ++i) numArray[i] = i;
  return numArray;
}

To this:

  export function Testing(props) {
  for (var i = 0; i < props.size; ++i) numArray[i] = i;
  return numArray;
}

Change your import in Header.js to this:

import {Testing} from './CreateArray.js';

Send size as a prop down to your Testing Component like this:

<Testing size = {size}/>

To destructure/simplify your Testing function (not required) declare the size prop like below:

 import React, { Component } from 'react'
    
    let numArray = [];
    
    function Testing({size}){
        for (var i=0;i < size; ++i) 
                numArray[i]=i;
        return numArray;
    }

How do I call a function from another file?

Try to use

const { getAllProduct } = require('../helpers/product-helpers');

Calling a JavaScript Function in Another Js File