Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript

How to write a function in JavaScript

Abdul Muizz

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

A function taking some input parameters and returning an 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 Method
function squareInput(x) {
console.log(x*x);
}
//Invoking function
squareInput(10);

Explanation

  • Line 2: We use the function keyword and give a name to the function, such as squareInput followed by an input parameter x.
  • 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, variableName must comply with all the rules of JS language.

Example

//Function Expression Method
const squareInput = function (x) {
console.log(x*x);
}
//Function call
squareInput(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 const variable with the name of squareInput and assign a function expression to it using the function keyword.
  • 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 function
let squareInput = (x) => {
let square = x*x;
console.log(square)
}
//Invoking function
squareInput(2)

Explanation

  • Line 3: We declare a function with the name of squareInput, which is written using the arrow notation and has the parameter x .
  • Line 4–5: We store the square of the input parameter x in a variable named square. Next, we use the console.log statement 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 declaration
let squareInput = (x) => console.log(x*x);
//invokng the function
squareInput(2);

RELATED TAGS

javascript

CONTRIBUTOR

Abdul Muizz
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring