Updated March 27, 2023

Introduction to JavaScript Function Declaration

A function is said to be a group of statements into a single logical unit (code). A function can be called from anywhere without the HTML page. A function can define at the beginning of the <head> tag.

Important Note: Functions can be used or defined with both <head> and <body> section of a document.

Real-time Example: I am writing a code to display the existing products to an e-commerce website. Suppose I have shampoo specifications to display; everywhere, it is difficult to write all specification code lines. If we write that code in a particular block and use that block where ever required, we did our work easily without writing the same code again and again. There we will come across functions.

How do JavaScript Functions work?

JavaScript functions are used by using the function keyword. You can take a function declaration or a function expression.
JavaScript functions do not check with a return type and parameter type; it takes care of JavaScript Engine.
JavaScript functions do not check with many parameters; even no parameters in function and arguments from a function do not give you an error because it takes care of by JavaScript Engine.
JavaScript functions Syntax is a really important matter.

Syntax:

function functionName(x, y, z,………….)//function definition
{
//code or logic
}
functionName(1,2,3,…….);//function calling

Explanation:

The function is declared by using the function keyword.
Function name is functionName(x,y,z) and called function definition.
x,y,z………are function parameters.
functionName (1,2,3) are function arguments and called function calling.

document.write(): Used for displaying output in the browser as like the html pages.

Types and Examples of JavaScript Function Declaration

Function definition with no parameter and function calling with no arguments.
Function definition with no parameter and function calling with arguments.
Function definition with parameter and function calling with no arguments.
Function definition with parameter and function calling with arguments.

Given below are the examples of the JavaScript Declaration:

Example #1

Function definition with no parameter and function calling with no arguments. Function definition and function calling both does not have parameters and arguments, respectively.

Syntax:

function getName()//function with no parameters
{
//code
}
getName()//function with no arguments

Code:Palindrome.js

<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Function definition with no parameter and function calling with no arguments</h1></font>
<script>
function palindromeOrNot()
{
var remainder,total=0,actualNumber;
var input=998919899;
actualNumber=input;
while(input>0)
{
remainder=input%10;
total=(total*10)+remainder;
input=parseInt(input/10);
}
if(actualNumber===total){
document.write(actualNumber+": is palindrome number ");
}
else  {
document.write(actualNumber+": is not palindrome");
}
}
palindromeOrNot();
</script>
</body>
</html>

Output:

Logic Explanation:

Consider number 594.
First iteration Remainder=594%10 gives you remainder 4.
Total=total*10+remainder=>initial total value=0 so total=0*10+4 is 4.
Input=parseInt(input/10), parsing is required because JavaScript by default consider this as string. Input=594/10 is 59.
The second iteration While executing until input>0, so again remainder=input%10. This time input=59 from the first iteration in the code. Remainder=59%10 is 9
Now, total=4*10+9 is 49. Here total is 4 because of the first iteration.
Input=59/10 is 5.
Third Iteration remainder=5%10 is 5. Input is 5 because of the second iteration.
Total=49*10+5 is 495. The total is 49 from the second iteration.
Input=5/10 is 0, so while exits.
If any number palindrome if and only if the number and its reverse are the same. So, 594 is not a palindrome.

Example #2

Function definition with no parameter and function calling with arguments. A function definition has no parameter, and function calls have some arguments within it.

Syntax:

function getName()//function with no parameters
{
//code
}
getName(myName)//function with one arguments

Code: Factors.js

<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Function definition with no parameter and function calling with arguments</h1></font>
<script>
function factors()
{
var input=arguments[0],j=1;
document.write("factors of : "+input+" are ");
document.write("<br>");
while(j<=input)
{
if(input%j==0){
document.write(j);
document.write("<br>");
}
j++;//post increment operator
}
}
factors(9);
</script>
</body>
</html>

Output:

Explanation:

factors() definition does not have parameters, but factors(9) have one argument. Even JavaScript did not complain about it. So, this example concludes JavaScript does not check with arguments passed to it.
Factors mean number completely divisible by other numbers, is said to be a factor of that number.
Input%j==0 means, for example 9%1==0 is true so 1 s factor of 9

9%2==0 false so not a factor

9%3==0 true, so 3 is a factor of 9
.
.
.

9%9==0 true, so 9 is a factor of 9.

Note: arguments[] array used to get elements from the calling function.

Example #3

Function definition with parameter and function calling with no arguments.

Syntax:

function getName(a,b,c)//function with 3 parameters
{
//code
}
getName()//function with no arguments

Code: PerfectNumber.js

<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Function definition with parameter and function calling with no arguments</h1></font>
<script>
function perfectNumber(input=6)
{
var i=1,sum=0;
while(input>i)
{
if(input%i==0){
sum=sum+i;
}
i++;
}
if(sum==input)
{
document.write(input+" is perfect number");
}
else
{
document.write(input+" is not perfect number");
}
}
perfectNumber();
</script>
</body>
</html>

Output:

Explanation:

A number is a perfect number; if some of the factors excluding itself are equal, then the number is said to be a Perfect Number.
For example, perfectNumber(input), input type we did not specify even JavaScript did not complain about. So, JavaScript does not check with a return type or parameter type at all.
Let number=6 and i=1 initially

Number%i==0

6%1==0 so 1 is factor

6%2==0 so 2 is factor

6%3==0 so 3 is factor

Rest are not factors

So the sum of 1+2+3 is 6. So, 6 is a perfect number

Example #4

Function definition with parameter and function calling with arguments. Function definition and function calling both are having parameters and arguments, respectively.

Syntax:

function getName(a,b,c)//function with 3 parameters
{
//code
}
getName(1,2,3)//function with 3 arguments

Code: SquareSum.js

<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Function definition with parameter and function calling with arguments</h1></font>
<script>
function squareSum(lastNumber)
{
var i,sum=0,j=1;
for(i=1;i<=lastNumber;i++)
{
j=i*i;
sum=sum+j;
}
return sum;
}
document.write("Sum of the Squares is :"+squareSum(10));
</script>
</body>
</html>

Output:

Explanation:

Logic: j=i*i

Sum=sum+j;

i)J=1*1=>1

Sum=0+1=>1

ii)j=2*2=>4

sum=1+4=>5

ii)j=3*3=>9

sum=5+9=>14
.
.
.

x)j=10*10

sum=285+100=>385

Conclusion

JavaScript functions cannot check return type, parameter type, and a number of parameters in the function definition. Everything is taken care of by JavaScript Engine.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to JavaScript Function Declaration

How do JavaScript Functions work?

Types and Examples of JavaScript Function Declaration

Example #1

Example #2

Example #3

Example #4

Conclusion

Recommended Articles

Follow us!

APPS

Blog

Courses

Email