Visit Original Non-AMP Page

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.

<script>
  myFunction(); //calling a Function

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

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

//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().

//calling a JavaScript Function
myFunction();

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.

<!-- 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.

//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 a JavaScript function in HTML

Inside HTML you can use onClick Event listener to run a JavaScript function on a Button click and also you can Run or Call your JavaScript function by using the Function name inside JavaScript.

So if you just want to run your Function,
Then write your function name followed by the Parenthesis/Round Brackets (myFunction();)

<script>
  //declaring Function
  function myFunction(){
    alert("Hello There")
  }

  //Calling myFunction
  myFunction();
</script>

If you want to call or Run your Function on a Button click, Then you need to call that Function using JavaScript's onClick Event.

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

<script>
    //Calling a Function on PageLoad
    myFunction();

    //Decraring/Defining a Function
    function myFunction() {
        alert("Hello There");
    }
</script>

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 (Because your Browser gonna Load the Header Tag's Data First)

File: external.js [External JavaScript File]

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

<html>

<head>
  <title>External JS with HTML</title>
  <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.

//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().

//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 callback function in JavaScript

In JavaScript, it's really simple to call a callback function.
You just need to pass your CallBackFunction as an Argument and that's all.
For Example, we are going to pass the Username along with our CallBackFunction Name while calling a Function helloUser().
Where hellowUser() will Display our Username and after that this function will execute our CallBack Function byeUser().

function helloUser(userName, myCallBack){
  alert("Hello "+ userName);
  myCallBack(userName); //callBack
}

function byeUser(userName){
  alert("Bye "+ userName);
}

//Calling helloUser() Function
helloUser("John", byeUser);

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.

//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.
Unable to underStand const variable? Also Visit: What are Variables in Programming
where we are passing "john" as a username
and using myname variable we can access our class Methods like showName().

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.

//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.

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;

Some good exercises to cover JavaScript Functions

There are lots of different ways to give JavaScript function call. For best Exercise we need to make sure of few things to Call/Run JavaScript Functions Properly.

First Declare a Function

How to create a function in javaScript

Before Executing JS Function we need to Declare them. (you can skip this part if you already have declared it).
To Declare functions in JS we need to use function and after that we need to assign a Name for our Function.

<script>

function myFunction(){
  alert("working");
}

</script>

2. Call the Function using Function Name

After declaring your Function, you just need to call that function using the Function name.
Below we are calling our function using Button Click.

<button onClick="myFunction()"> Run </button>

<script>
function myFunction(){
 alert("working");
}
</script>