In this tutorial, you will be learning how to write JavaScript functions.
In JavaScript, a function is a block of statements that you can repeatedly use in your program. You can very roughly divide JavaScript functions into two different types: built-in functions and user defined functions.
JavaScript comes with more than one thousand built-in functions. You don’t have to memorize them individually. Just use them enough, and you will eventually understand the ones you need.
As well, you are also free to design your own function; we will call these “user-defined functions”.
Please note, though, functions do not automatically execute on their own when the script loads, you must call the function each time you want the block of code to execute.
Creating A User Defined Function
Here is the syntax of a user-defined function:
function function_name()
{
Statement 1;
Statement 2;
Statement 3;
Statement 4;
}
What happens is whenever you write function_name(), statement 1, statement 2, statement 3, and statement 4 will all execute in that order.
Elements of A Function
All functions begin with the keyword function. After the keyword, you specify the name of the function.
You can name your function whatever you want, so as long as it is not a reserved keyword.
Generally, however, you want to pick a name that describes what the function does.
The name of your function can only be one word. If you want to include multiple words in your name, a common thing you can do is to separate the words using an underscore(_).
Functions Are NOT Case Sensitive
One thing to remember for JavaScript is the function names are case-insensitive. Function_name, FUNction_NAme, FUNCTION_NAME, and Function_Name mean the exact same thing.
Example: To Call A Function
Function my_function()
{
document.write("Hello World");
}
my_function();
Taking Parameters
While not mandatory to include, one of the function’s main purposes is to take in some parameters and then manipulate them in some way.
JavaScript Code
<?php
function add(a, b)
{
return a+b;
}
add(10, 20);
?>
In the function above, we take in two parameters(a and b). And we then add the two numbers together.
Understanding JavaScript Function Parameter
What are JavaScript Parameters? Parameters are real values that are passed into a function. A function’s purpose is to manipulate them accordingly. Unlike some other programming languages, JavaScript does not check parameter types.
In many other languages, if a function’s parameter calls for an integer, and you input a string, you will return an error.
JavaScript, however, will not do that for you.
It also does not return an error either when you leave out a parameter.
JavaScript is capable of executing even if you add a parameter of the wrong type or leave out a parameter.
What If You Forget A Parameter?
One of the quirks of JavaScript is that JavaScript doesn’t give you an error when you forget a parameter. When a parameter is left out, JavaScript will assume that parameter’s value is equal to undefined.
Example
function myFunction(x, y) {
if (y === undefined) {
alert("hello world");
}
}
So, unlike in some other languages, you can leave out a parameter and your code will execute just fine.
The Arguments Object
JavaScript functions come with a built-in object called the argument object. The argument object is an array of all the arguments when the function is called. In the below example, we use a function to find the highest or lower value of a list of numbers.
Example
x = findMax(1, 10, 100, 305, 40, 188);
function findMax() {
let max = -Infinity;
for (let i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
document.write(x);
Two Types Of Functions
A function can do one of two things.
It can execute code only, or it can execute some code and then return a value.
Function That Does Not Return Anything
Function display_me(a)
{
document.write(a);
}
display_me("hello world");
?>
The function we wrote above doesn’t return anything.
It only takes a parameter and then prints out whatever text we entered.
Functions That Return A Value
However, a function can also have a return statement which returns a value. This means the function will do whatever manipulation it does and then finally return a particular value. This should be the last line of the code block in your function.
You use the return keyword to return the text.
When you add the statement with a return, your function terminates immediately.
You are allowed to return any type of data.
Example
In the following statement, a function accepts a number and calculates the areas of a rectangle with those sides, and then returns the area.
function rec_area(height, width)
{
return parseInt(height)*parseInt(width);
}
document.write(rec_area(10,20));
Please note, the above example will not work if you do not add parseInt() around the two numbers.