Functions in JavaScript Tutorials Updated 2024

Functions in JavaScript are the same as in any other programming language. In this article, we are going to discuss functions in depth in JavaScript. Before you study JavaScript you need HTML and CSS the reason behind JavaScript is one of the three(HTML, CSS, Javascript) languages that every web designer or developer must learn.

What is a Function in Javascript:

A function is a block of code which can be reused anywhere in the program. The main benefit of writing a function is that we don’t need to write the same block of code again and again. Also, functions give us the modular approach of programming where we can break a large line of code program into small modules. Even though JavaScript itself provide modular programming we have many inbuilt functions which are written once in JavaScript and we can use them anywhere in the program. Being a web designer these 6 Facts You Should Know About Web Design.

Table of Content

What is a Function in Javascript
Javascript details image
Defining a Function in Javascript
The syntax of Functions in Javascript
Example of a Function in Javascript
Explanations of Functions in Javascript
Parameters of a Function in Javascript
Calling of a Function in Javascript
Return Statement in Javascript

Suggestions: Before reading this article about functions in JavaScript, you have to know about Conditional Statements in JavaScript(IF ELSE SWITCH). below is some example of predefined javascript functions.

For example: alert(), getElementbyId(), write() etc. Here we can write our functions too.

functions tutorials in javascript with diagram and list

Defining a Function in Javascript:

The most common way to define a function in JavaScript is to use the function keyword before the function name, The parameter list can be empty or can contain a list of parameters and a block of code of the function is written inside the curly braces.

Syntax of a Function in Javascript:

Example of a Function in Javascript:

Calling of a Function in Javascript:

Calling means invoking or using a function somewhere in the JavaScript code. A function is called simply by writing the name of that function if there are some parameters then pass those parameters.

Example:

<html>
<head>

<script type="text/javascript">
function WelcomeToPWB()
{
alert ("Welcome To Programming With Basics!");
}
</script>
</head>
<body>
<p>Click Here </p>
<form>
<input type="button" onclick="WelcomeToPWB()" value="Welcome To PWB">
</form>
</body>
</html>

Parameters of Function in Javascript:

In the Early Examples, we use functions without parameters, but as we said earlier we can pass parameters to a function. These parameters are to be used inside the function and on the basis of the values of these parameters some manipulation inside a function can be done. A function can take more than one parameter separated by a comma.

Example:

<html>
<head>
<script type="text/javascript">
function sum(num1, num2)
{
var sum=num1+num2;
document.write ("Sum is" + " " + sum);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="sum(700, 7)" value="calculate Sum">
</form>
</body>
</html>

Return Statement:

JavaScript Function can also have a return statement, But this is optional. If you want a value to return after the function execution you can Write a return statement at the end of the function in the previous example you want to return the sum of two numbers a return statement can be used.

Example :

<html>
<head>
<script type="text/javascript">
function sum(num1, num2)
{
var result
result= num1 + num2
return result
}

function NewFunction()
{
var total;
total = sum(700,7);
document.write("Sum Returned by the called function is" + " " + total)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="NewFunction()" value="Click Here">
</form>
</body>
</html>

Author:

This in-depth tutorial on Functions in Javascript is written by Suman Yadav. Submit your article and be a member of our Programming With Basics | A Programming Solutions Blog Family.