JavaScript Functions
About JavaScript Function
In JavaScript, a function is a block of reusable code that performs specified task when it is called.
To use a function, you must define it first. Then you can call it (in the scope where it was defined).
JavaScript function should take some input (parameters) and return an output (return type).
JavaScript has a number of built-in functions. Moreover, it allows programmers to define their own functions to encapsulate code for reusability and modularity.
Declaring and Calling a Typical Function
Declaring a Function
- A function is typically declared using the 'function' keyword, followed by the function name and parentheses '()' ( e.g.
function functionName(parameter, ...)). Inside the parentheses, parameters are placed that act as inputs. - Parentheses '()' is followed by curly braces '{}' and the block of code of the function is written inside the curly braces.
Calling a Function
- A function can be called by using its name followed by parentheses "()" ( e.g.
functionName("paramValue")). You need to pass arguments if the function requires them.
Example of Declaring and Calling a Typical Function
Explanation of the code
-
function message(name): Here, 'function' is the keyword to define the function. 'message' is the user defined name of the function. 'name' inside the parentheses is a parameter. You can use multiple paremeters in function. -
return "Hello, " + name + "!";: This line is the block of code of the function. When the function will be called, it will return a string type message. Please note that the code block is placed inside curly braces '{}'. -
let result = message("Jane");: The codemessage("Jane")calls the function message by passing "Jane" as function argument. The return of the function is assigned to the "result" variable. -
console.log(result);: This line prints the value of "result" variable in the console.
Function with Parameters
- JavaScript functions can accept parameters which are used as placeholders for values.
- Parameters are used to pass data into the function when it is called.
- Arguments are the values passed to the fuction as parametrs when it is called.
Example of Function with Parameters
Function with Default Parameters
- JavaScript functions can accept parameters with default values.
- The function will use default value of the parameter if no argument is passed for default parameter.
Example of Function with Default Parameter
Function with Rest Parameters (...)
- JavaScript functions can accept an indefinite number of arguments as an array.
- (...) is used before the parameter name. (e.g. ...params)
- The rest parameter must be the last parameter in the function definition.
Example of Function with Rest Parameters
Function Return Type
- JavaScript function's return type is determined by the value returned by the 'return' statement.
- The value after the 'return' keyword is returned to the caller of the function.
- A JavaScript function may not have a return type.
Example of Functions with Different Return Types
Function Expression
Function expression is another way to define a function in JavaScript where the function is assigned to a variable or a constant.
In function expression, no function name is used after function keyword.
Example of Function Expression
Output of the above example
Hello, Jane!
Explanation of the code
-
const message = function(name) { return "Hello, " + name + "!";};: This line declares an expression function. The function is assigned to "message" variable. Please note that the function keyword is not followed by any function name.function(name)specifies that the function takes a single parameter, "name".return "Hello, " + name + "!";is the function body. It returns a string with the name parameter value. -
let result = message("Jane");: The code line calls the function using 'message' variable and pass a string "Jane" as argument to the function. -
console.log(result);: This line prints the returned value of the function.
Arrow Function
The arrow function was introduced in ES6 (ECMAScript 2015). It is a compact way to define functions in JavaScript.
It uses the => (arrow) syntax and is often shorter and more concise than traditional functions.
Arrow function is assigned to a variable or a constant and the variable is used to call the function.
Example of Arrow Function
Output of the above example
Hello Jane!
Explanation of the code
-
const message = (name) => "Hello " + name + "!";: This line declares an arrow function. The function assigned to "message" variable.(name) =>specifies that the function takes a single parameter, "name". Please note that the function does not use function keyword as well as function name."Hello " + name + "!"is the function body. It returns a string with the name parameter value. -
let greet = message("Jane"): The code block calls the function using 'message' variable and pass a string "Jane" as argument to the function. -
console.log(greet);: This line prints the returned value of the function.
Immediately Invoked Function Expressions (IIFE)
Immediately Invoked Function Expressions (IIFEs) are functions that are executed immediately after they are defined.
In IIFEs function, a function is placed inside parentheses '()' which is followed by another parentheses '()'.
Example of IIFEs Function
Output of the above example
IIFEs Function is invoked.
Callback Functions
When a function is passed as an argument to another function, it is called a callback function.
The callback function is often invoked within the another function to perform task asynchronously.
Simple Example of Callback Function
Output of the above example
Sending message...! Hello, Jane!
Explanation: The message() function is invoked in the outer function sentMessage(). Here the message() function is the callback function.
JavaScript Compiler For Live Practice
Practice the above JavaScript code in the following JavaScript Editor. Create more JavaScript functions in the following editor and click Execute button to check the output. Output will be displayed in JavaScript Code Output section.
JavaScript Editor