Functions in JavaScript - with Examples [Updated]
Function in JavaScript is a block of Organized and Reusable code.
Where you can organize a particular task or functionality of your code inside a function and use it again without declaring it twice.
How do you create a function in JavaScript?
For creating functions in JavaScript we have the "function" keyword.
Using this keyword we can tell JavaScript that we are declaring a function here.
After that, we have to give a name for our function
(Function name can be anything like yourname, ABC, myfun anything you want but there are some rules that your function can't start with numbers like 123fun but you can use numbers at the end like myfun1, myfun2, etc)
followed by round brackets "myfunction()" and between "{}" curly braces we can write our code.
index.js
function myfunction(){
alert("My First Function");
}
myfunction();![Functions in JavaScript - with Examples [Updated]](/_next/image?url=%2FImages%2Ffunctios-in-javascript1.png&w=1200&q=75 "Image : Functions in JavaScript - with Examples [Updated]")
keep in mind: Functions only execute their code when we call it. Without calling it won't display any output. So to run your functions code you need to call your function.
How to call a function in JavaScript
In JavaScript, we have so many methods for calling functions.
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Method 1: Calling a function using JavaScript
Here we can call our function by writing our function name inside after or before declaring your Function (It's always recommended to call your function after declaring it).
index.js
//declaring function
function myfunction(){
alert("Calling using Method 1");
}
//calling function
myfunction();Method 2: Calling a function using onClick Event
In HTML we have different types of Events (Like onCLick onSubmit, onHover, etc). So using those methods you can call a JavaScript function. Where when the onClick event will it will call our function and JavaScript will execute the code of our function.
index.html
<button onClick="myfunction()"> Click Me </button>
<script>
function myfunction(){
alert("Method 2 - Thanks for Clicking the Btn");
}
</script>
How to call external javascript function from HTML button onclick
To call the external javascript function from HTML button onClick we need to import our External JavaScript first (Inside the HEAD tags or before calling it).
After successfully importing the External JavaScript file we can now call that JavaScript function by Using the Function Name (that we wanna call/Run) inside the onClick=" " event.
index.html
<html>
<head>
<title></title>
<script src="./myExternal.js"></script>
</head>
<body>
<button onClick="externalFun()">Click Me</button>
</body>
</html>Types of functions in JavaScript
In JavaScript, we mainly have 3 types of functions
1. Named Functions
2. Anonymous Function
3. Immediately invoked function expressions
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
1. Named Functions in JavaScript
Named functions in JavaScript have a name, using which we can call the function from anywhere. Like from Script file by using "functionname();" or using Events like "onClick='functionname()'".
index.js
function functionname(){
alert("Got this using Named Function");
}2. Anonymous Functions in JavaScript
Anonymous Functions in JavaScript don't have any names.
You can declare them anonymously and the name is not available nor needed in some tasks.
index.js
var myname = (function myname(){
alert("programmingHEAD");
})();3. Immediately invoked function expressions in JavaScript
Immediately invoked function expressions in JavaScript are the same as Anonymous functions. You don't have to give a function name (you can assign a function name if you want to) and the best thing is it's going to run whenever the browser going to reaches this function without manually calling it.
So that's why this is called Immediately invoked function expressions because it going to execute Immediately when the browser reaches it.
index.js
(function myname(){
alert("programmingHEAD");
})();Function parameters/Arguments
Function parameters/Arguments are the names listed in the function definition. Function Parameters/Arguments are Values that we can pass while calling a function and access the values inside the function.
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Function parameters/Arguments Syntax
index.js
function myfun(argument1, argument2){
//argument1 and 2 will be accessible here
}function in JavaScript example
Example 1: How to ADD, Subdivide and Multiply two numbers using Functions
index.js
function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
function multi(a,b){
alert(a*b);
}
add(5,2);
sub(5,2);
multi(5,2);Example 2: Store your name inside a Variable using functions
index.js
var myname = (function greaterOrNot(){
return "ProgrammingHead";
})();
console.log(myname);Here we declared our function as a value for a variable "myname" and then instead of alerting or printing our names to the output screen, we are returning our output value "programminghead" so we can store it inside our variable "myname".
After that, we can get our returned/Stored values from our variable name by using "alert(myname)".
On This Page
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
