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.
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 callingExplanation:
- 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 argumentsCode: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 argumentsCode: 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.
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 argumentsCode: 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 argumentsCode: 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.
