How to write a function in JavaScript
Overview
A function acts as a black box for the user containing a sequence of instructions required to perform a specific task. Usually, functions are passed a set of parameters (inputs) and have return values, referred to as the output.
Javascript is a language that supports the functional programming paradigm, so functions (also referred to as methods) are treated as standard variables. Functions help make the code base modular and easier to maintain.
Note: Usually, the code within the JS function executes when it is invoked.
There are three primary ways of writing a function in Javascript that we'll discuss in this answer, and they are listed as follows:
- Function declaration
- Function expression
- Arrow functions
Function declaration
In this way of declaration, we use the function keyword and declare the function with a name and set of input parameters. The code within the function is called its body.
Syntax
function name(parameter1,paremeter2,...){
//function body (Code to be executed)
}
After declaring a function using the method above, we can use it later in our code whenever required; hence functions make the code more reusable.
Example
// Function Declaration Methodfunction squareInput(x) {console.log(x*x);}//Invoking functionsquareInput(10);
Explanation
- Line 2: We use the
functionkeyword and give a name to the function, such assquareInputfollowed by an input parameterx. - Line 3: The code on this line is a simple
console.log()instruction that displays the square of the input as the output, making the body of the function. - Line 7: We invoke the function with an input parameter in this line of code.
Function expression
In this way of defining functions, we assign the function to a variable that is then used to store the function's return value.
Syntax
const variableName = function (parameter1,parameter2,...){
//Function body (Code to be executed)
}
Note: Here,
variableNamemust comply with all the rules of JS language.
Example
//Function Expression Methodconst squareInput = function (x) {console.log(x*x);}//Function callsquareInput(2);
As we can see in the code widget above, the function is now an expression whose return value is stored in the variable, which is then used to call the function.
Explanation
- Line 2: We define a
constvariable with the name ofsquareInputand assign a function expression to it using thefunctionkeyword. - Line 3: This refers to the body of the function and exhibits the same functionality as explained in the process of a function declaration.
- Line 7: This line refers to the variable to which the function's return value is assigned and is used to call the function.
Arrow functions
This way of writing functions is introduced in the ES6 version of JS. The primary purpose of introducing this way of writing functions is to shorten the code, thus making it more understandable and easy to use.
Syntax
//If there are more than one statements in the functions body follow the following syntax
let fnName = (parameter1,parameter2,...) => {
//Function body (Code to be executed)
}
//Otherwise we can further shorten the notation
let fnName = (parameter1,paremeter2,...) => <fnBody>;
Note: It is important to note we can only shorten the notation further if there is one statement that we need to execute in the function body.
Example
//Arrow functionlet squareInput = (x) => {let square = x*x;console.log(square)}//Invoking functionsquareInput(2)
Explanation
- Line 3: We declare a function with the name of
squareInput, which is written using the arrow notation and has the parameterx. - Line 4–5: We store the square of the input parameter
xin a variable namedsquare. Next, we use theconsole.logstatement to print the variable's value in the output window as shown above. - Line 9: We call the function to execute the code within its body.
The code in the widget above can be further shortened as follows:
//Function declarationlet squareInput = (x) => console.log(x*x);//invokng the functionsquareInput(2);
Free Resources
