Logo - ProgrammingHead

How to call a function in JavaScript - JavaScript Functions

We all have wondered about How to call a function using JavaScript, How to Declare a Function, How to Run a function onClick and so many relatable things in our Beginning Faze.
So I am here with this Tutorial Dedicated to "How to call a Function in JavaScript" with all the Possible Ways in Detail with Examples.

How to call a function in JavaScript - JavaScript Functions

my.js

myFunction(); //calling a Function

//Declaring a Function
function myFunction() {
    alert("Working");
}

How to Run a JavaScript Function

In JavaScript, we need to call or Run a function by its Name.
When we declare functions in JavaScript we write something like

my.js [declaring a function]

//declaring a Function
function myFunction(){
  //statement
  alert("My Function Data");
}

where myFunction is my Function name. For calling a JavaScript function we just need to write the function name followed by parenthesis or round brackets like myFunction().

my.js [calling a function]

//calling a JavaScript Function
myFunction();

Related Topics: How to call a function in JavaScript - JavaScript Functions

Click on Titles below to reveal the Data

How to call a function manually on Button Click

If we use the function name inside JavaScript, it will call that function instantly at the time of Rendering/Execution.
If you want to run a function manually on Button click, then you need to use onClick Event.

index.html

<!-- Calling a Function -->
<button onClick="myFunction()">Click Me</button>

<script>
  //declaring a Function
  function myFunction() {
    alert("Button Clicked");
  }
</script>

Here click event will fire/Call your Function on Button Click.
this approach is Best if you want to run a function when the user clicks a Button.

How to call a function every second in JavaScript

To call a function every second in JavaScript, we need to use Intervals.
Intervals inside JavaScript run a Statement/Task again and again in given time intervals.
For example, you want to Display your name again and again after 3 seconds of Pause/Interval, then you can use Interval like this Example.

my.js

//Syntax
setInterval(function, IntervalTime)

//Alerting Name after 3Sec
setInterval(function(){
  alert("I am Groot");
}, 3000);

Where setInterval() will SET a JavaScript Interval and our Given Statement is to alert("I am Groot") again and again
after 3 Seconds (3000 millisecond = 3 Seconds).

How to call External function from HTML button onClick

While using External JavaScript, we can still call a function inside HTML if we have linked our External JavaScript with our HTML file Correctly.
but keep in mind, Before calling a Function from an external JavaScript file you need to Link your External JavaScript file first.
Because of that, we suggest you to Link your External JavaScript file inside HTML Head Tags
(your Browser gonna Load the Header Tag's Data First)

File: external.js [External JavaScript File]

external.js

//Declaring JavaScript Function
function myFunction(){
    alert("Got this from External JS");
}

index.html

<html>
<head>
  <title>External JS with HTML</title>
  <!-- Linking External JS File -->
  <script src="external.js"></script>
</head>
<body>
  <!-- Calling JavaScript Function from External JS -->
  <button onClick="myFunction()"> Click Me </button>
</body>
</html>

How to call a function with arguments in JavaScript

While calling a function in JavaScript we can also pass Arguments along with it.
So if you want to pass something like "Your Name" as a Parameter you can do that.
Just pass your name as A Parameter while calling your function and make sure your Function [That you are calling] is expecting an argument.

external.js

//Calling myName function with "GROOT" as an Argument
myName("GROOT");

//Declaring a Function where we are expecting "name" as an Argument
function myName(name){
    //using argument Values
    alert(name);
}

How to call a function after another function in JavaScript

To call a function after another function in JavaScript, we just need to write our other function name inside a function.
For example, I have a helloThere() function and inside this function, I am going to call another function which is okBye().

my.js

//main Function
function helloThere(){
    alert("Hello");
    okBye(); //calling another Function
}

//another Function
function okBye(){
    alert("Ok Bye")
}

//calling our main Function
helloThere();

How to call a function from another class in JavaScript

To call a Function or Method from another class in JavaScript we have to first store our class's instance using the
"NEW" keyword.
After that, we can use .MethodName() to call our Method from that Class.

my.js

//class
class myClass{
  constructor(uName){
    this.name = uName
  }
  showName(){
    alert(this.name);
  }
}

const myname = new myClass("john");

//calling Class [myClass] Method
myname.showName();

Where
myClass is my Class Name
showName() is a method that can alert UserName
at const myname = new myClass("john");
by using new keyword we are creating an instance of our class myClass inside myname constant variable.

How to call a function from an array in JavaScript

To call a function from an array in JavaScript we have to provide an Array index number followed by Parenthesis/Round Brackets.

my.js

//Declaring an array
var myArr = [
  function myFun0(){
    alert("Array0 TEXT");
  },
  function myFun1(){
    alert("Array1 TEXT");
  },
  function myFun2(){
    alert("Array2 TEXT");
  },
  function myFun3(){
    alert("Array3 TEXT");
  },
  function myFun4(){
    alert("Array4 TEXT");
  }
];

//calling a Function from Array
myArr[2]();

In this example, as you can see,
We have 5 different Functions declared inside ARRAY myArr.
and at the End, we are calling our Array function using an Array variable name myArr with index number [2] along with Parenthesis/Round Brackets myArr[2]().
This will call our Declared function from Array index 2.

Can you overload functions in javaScript

Yes,
you can overload functions in JavaScript (means you can have multiple function with same names but different Arguments) but in the END JavaScript last Function will overwrite the previous Functions Values.

my.js

function myFun(arg){
  console.log("First: "+arg);
}
function myFun(arg){
  console.log("Middle: "+arg);
}
function myFun(arg){
  console.log("Last: "+arg);
}

myFun("Working");

In this Example you will only get LAST: Working because last Function will overwrite all the previous values;