A JavaScript function is a section of code made to perform same task again and again. JavaScript function is executed when it is called.
Table of Contents
What is JavaScript Function
A JavaScript function is a section of code made to perform same task repeatedly, so you don't have to write same set of lines again and again. JavaScript Functions make your code reusable.
While using JavaScript in real world, you will rarely write a code that won't have a single JavaScript Function in it.
JavaScript Function Example
function myFunction(a, b)
{
return a + b; // This function returns the sum of a and b
}
This was a simple example of JavaScript Function, Let's see some more examples.
Suppose we want to calculate the area of a room for different values. One way is to write same code again and again as shown below.
var length = 10;
var width = 5;
alert(length * width); //first calculation
var length = 20;
var width = 10;
alert(length * width); //second calculation
var length = 100;
var width = 10;
alert(length * width); //third calculation
Or we can make a JavaScript Function for this and calculate area of room again and again by simply calling it. See the code below.
function calculateArea(length , width)
{
alert(length * width);
}
calculateArea(10 , 5); //first calculation
calculateArea(20 , 10); //second calculation
calculateArea(100 , 10); //third calculation
This is how JavaScript Function works.
With functions a developer can separate a major program into various little chunks of code with different capacity for own ease.
JavaScript Function Syntax
JavaScript Function is defined using the keyword function. After that function name is written, followed by parentheses. Inside these parentheses parameters are written, separated by commas. After that the block of code is written inside the curly brackets.
JavaScript Function Keyword
JavaScript Function is defined using the keyword function, this function keyword tells the JavaScript engine that this entire chunk of code is a JavaScript Function and your browser will treat it differently.
JavaScript Function Name
After function keyword, we specify a unique name for our JavaScript Function. To run or execute a function we have to call it using this name.
How to Name JavaScript Function
JavaScript Function name can contain letters, digits, underscore, and dollar sign. JavaScript Function name cannot contain spaces. You can use upper or lower case letters or both. Best way to name JavaScript Function is to use Camel Case letters, to make it more readable.
JavaScript Function Parentheses or () Operator
After the name of JavaScript Function, we use parentheses for the parameters of that function. The parentheses may include more than one parameter names, all separated by commas.
The parentheses executes the javascript function, JavaScript Function with () refers to the function result, while JavaScript Function without the () operator refers to the function object.
Only alert refers to the function object while alert() refers to the function result.
Trying to access a function without () will return the function definition instead of function result.
JavaScript Function Parameters
JavaScript Function parameters are the values that you pass to JavaScript Function during it's calling. JavaScript Function use these parameters to perform it's task.
We can also pass any type of value to our function by writing it inside these parentheses of JavaScript Function, depending on the type of function we have made. This value is called parameter. Some function don't need any parameters.
JavaScript Function Parameter can be a string or number. Inside the function, the parameters behave as local variables.
JavaScript Function Arguments
JavaScript Function arguments are the values received by the function when it is invoked or called.
JavaScript Function Curly Brackets
Finally To enclose one or more than one line of code of our function, curly brackets are used which makes function complete.
JavaScript Function Calling
JavaScript Function only works when called. It means to execute all lines of codes written inside the function you have to invoke it or call it.
How JavaScript Function is Called
The function call is the name of the function you want to call (or invoke) followed by parentheses.
You can also call JavaScript Function on occurrence of specific event. For example: a mouse click or page scroll etc. Some function are called automatically.
JavaScript Function Return
Return statement is always the last statement of the function. When JavaScript reaches a return statement, the function execution stops.
The return statement in JavaScript Function is used to get some value or result from the function to use it outside of it.
The returned value is given back to the caller of the function.
For example, we can pass two numbers to a function, It will perform some operation on these numbers and then we can get the output value as a result using the return statement.
function calculateArea(length , width)
{
var area = length * width;
return area; // function return
}
var roomArea = calculateArea(10 , 5); // function calling
alert(roomArea); // alerting the returned area value
In the above code, the JavaScript Function is calculating the area and returning the result, which is then assigned to the variable roomArea.
JavaScript Function as Variable
Remember in previous examples where we stored a returned value in our variable for future use, we can directly use our function as variable. See code example below.
function calculateArea(length , width)
{
var area = length * width;
return area; // function return
}
var roomArea = "The room area is " + calculateArea(10 , 5); // function being used as a variable
Variables Scope inside JavaScript Function
Variables declared inside a JavaScript function are Local variables. Local variables can only be recognized and accessed from within the function.
Due to this variables of same name can be used inside different javascript functions. Local variables are created when javascript function execution starts and they are removed once the execution of function is completed.