JAVASCRIPT FUNCTION

What Is A Function In Javascript?

A function is one of the fundamental building blocks in javascript, it is a group of code statements which performs some specific task.

A function may return some output to the user or can do the computation to result in some output.

The basic idea of the function is to reduce the number of repeated code blocks and executing a code block whenever needed.

Javascript Function Declaration

To use a function you must first declare it. In javascript, the function is declared by using the function keyword:

• Start function with the function keyword
• Then write the name of the function after space. The naming convention of function is the same as a variable naming convention.
• then a list of parameters are given, enclose in parentheses and separated by commas like (parameter1, parameter2, ...)
• Then javascript statements are enclosed in curly braces {...}
• At the end of the function use return keyword to return any object or value.

javascript function syntax

function name_of_function (parameter1, parameter2,...) {
    // javascript statements
    return something;
}

Below is an example of a function which takes two numbers as an argument and returns the sum of the number. To call a function write name of the function with their arguments in parenthesis, if there is no argument then let the parenthesis be blank.

Javascript function call

Just defining a function does nothing until it is invoked or called.

How to call a function in javascript?

To call a function directly in javascript write the name of the function and give the required parameters in parenthesis. If there is no parameter then write blank parenthesis.

See the example below the 'sum' function defined in above example is called by giving 2 parameters:

Call Javascript Function From HTML

You can call a javascript function from HTML using some event. When an event occurs like button click, mouse move, document load, etc then you can use some event handler to trigger the event.

In the following example, there is a function that alerts a message, it is invoked as page loads and when the button is clicked.

Javascript function parameter

Javascript function parameters are the values that are passed in the function to be used inside its statements. Parameters are extra added information that is given to the function while execution of the code.

The actual values that are passed in the function are known as arguments while the variable that is declared in the function is known as a parameter.

The data type of javascript function parameter could be any valid data type, example string, number, array, etc

In the example below function is taking 2 arguments 'user' and 'message' to be used in the function.

In Javascript functions, you can pass more or fewer arguments than the actual defined parameters. When a number of arguments are less than parameters then rest parameters will be undefined and when the number of arguments are more than parameters then extra arguments will be ignored.

Let's see an example to understand.

Javascript Function Return

Javascript function can return an object or some value when invoked.

To return something from the function return keyword is used with the return value separated by space.

To use the return value of the function you can assign the function to some variable and when the function returns some value it gets stored in the variable.

Function stop execution when reached to return statement even if there are more statements in the function after a return.

The return value can be placed anywhere in the function but as soon as function find return statement it stops further execution of the code in a function.

Also, you can use return statement without returning any value, you can do this to stop function to execute further in a certain condition.

Javascript Function Local Variable

The variables that are defined inside the function have local scope. Means these variables can't be accessed outside the function.

But a function can access the variable that is defined outside the function.

In the example below the variable, 'a' is defined inside the function, which has local scope and is undefined outside the function.

Javascript Function Expression

Function expression let us define the function and assign it to some variable explicitly. The variable, the function is assigned to is used to invoke the function.

A function expression, in general, has no name hence it is also called an anonymous function.

It is more convenient to pass as an argument in callback functions.

Here is an example of function expression 'sum', which takes 2 arguments and return the sum of the number.

Javascript Function Declaration VS Expression

These are 2 important difference between function declaration and function expression:

1. A function declaration can be hoisted but function expression can't be hoisted. It means you can use a function before it is declared while you can't use before function expression is declared.
2. Function declaration is loaded before execution of any code but function expression loads only when the interpreter reached that line of code.

Javascript Immediately Invoked Function Expression(IIFE)

Immidiately Invoked Function Expression (IIFE) is the function is executed right after the function is declared.

Syntax of IIFE

(function () {
  // statements;
})();

The variables defined inside IIFE is not accessible outside the function.

If you assign IIFE to some variable then it stored function's return value not the function itself.