ES6 | Functions - GeeksforGeeks

20 Jul, 2021
The ES6 function is the same as a normal function, but ES6 has some differences. A function is a set of instruction that takes some inputs, do some specific task and produce output. A function is a set of codes that can be reused in the program at any time. 
Syntax: 
function func-name() { 
   // body 
}

func-name();  // Calling 
Types of functions: There are several types of functions in ES6 JavaScript, all of them are mentioned below:
Parameterized functions: This functions is same as a normal function. We are sending some parameters which is accepted by the calling function and it does some task on those parameters and produce an output. 
Syntax: 
function func-name( p1, p2, . . ., p-n) {   
   // body 
}

func-name(1,"Geek", 3); // calling
Example: 
Javascript
<script>function add( p1, p2) {   var sum = p1 + p2   console.log("The sum of the values entered " + sum)}add(12, 10)</script>
Output: 
The sum of the values entered 22
Returnable functions: The functions which return some value to the main function or the function from which it called. 
Syntax: 
function func_name() { 
   // statements 
   return value; 
}
var var_name = func_name
Example: 
Javascript
<script>function geeks( ) {     // body    return 'GeeksforGeeks';} // callingvar gfg = geeks()console.log(gfg)</script>                   
Output: 
GeeksforGeeks
Default parameters in functions: This concept is new in the ES6 version. It is similar to the default function in C++. We just assign a default value to the arguments in the parameter list. If no values are passed to it or it is undefined then the parameters are initialized with these default values. 
Syntax:  
// p2 and p3 initialized with a default value
function func-name( p1, p2 = 0, p3 = 2) {
   // body 
}

func - name(1); // calling
Example: 
Javascript
<script>// p2 and p3 initialized with a default valuefunction sum( p1, p2 = 0, p3 = 2) {   document.write(p1+p2+p3); //1+0+2= 3}sum(1);</script>
Output: 
3
Rest Parameters in function: It doesn’t restrict the number of arguments that can be passed to a function. That is, we can send either 1, 2, 3 or many more arguments to the same function with different function calls. The parameters are written followed by “...”, as example “...p”, “...” defines there may be many arguments passed by the function call. 
Syntax:  
function func-name( ...p) // "p" is the parameter
// "..."  define the "Rest parameters"
{
   // body 
}

// calling
func-name(); // 0 argument
func-name(1); // 1 argument
func-name(1,"Geek"); // 2 arguments
func-name(1,"Geek",3); // 3 arguments
Example: 
Javascript
<script>function RestFunc( ...p) // "p" is the parameter// "..."  define the "Rest parameters"{   document.write(p + "<br>");}  // calling  RestFunc(1); // 1RestFunc(2,"GFG"); // 2,GFGRestFunc(3,"GeeK","GFG"); // 3, GeeK, GFG</script>
Output: 
1
2,GFG
3,GeeK,GFG
Anonymous Function: An anonymous function is a function that is declared without any named identifier to refer to it. These functions are declared at runtime dynamically. It can take input and produce output. It cannot accessible after its initial creation.
 Syntax: 
var func = function(arguments)
{
    // body
}
Example: 
Javascript
<script>// "func" refer to the functionvar func = function() {    document.write("GeeksforGeeks");} // Callingfunc();</script>
Output: 
GeeksforGeeks
Lambda Functions or Arrow function: Lambda refers to anonymous functions. It is a function that doesn’t have a name but is usually used as a value passed to another function as a value. Lambda function has an arrow notation, this is the main thing that differentiates a lambda function from another function. This is introduced in the ES6 version. It is also known as the arrow function. It provides a shorthand for creating anonymous functions. It defines using “=>” notation.  Syntax: 
Anonymous function with one argument x which returns x + 1 
x => x + 1
Same as previous but with a function body 
x => {return x + 1}
2 argument arrow function 
(x, y) => x + y
Same as previous but with a function body 
(x, y) => {return x + y}
Example: 
Javascript
<script>//"=>" is use for arrow or lambda expressionvar func = () =>{   document.write("Arrow function")}func()</script>
Output: 
Arrow function
Function Hoisting: Function Hoisting is a JavaScript mechanism where functions can be used before its declaration. It only occurs for function declarations. It just hoist the function name, also hoists the actual function definition. 
Syntax:  
GFG();  // Calling before definition
function GFG() // Define after calling
{
  // body
}
Example:  
Javascript
<script>func(); // Calling before definition-->Hoisting// "func" is the functionfunction func() {    document.write("GeeksforGeeks");}</script> 
Output: 
GeeksforGeeks
Generator() Function: A Generator-function is like a normal function. But a normal function runs until it returns or ends. In Generator-function the function runs until yield it returns or ends. It is done by using the yield keyword in place of the return keyword. When a Generator function is called then it returns the Generator Object which holds the entire Generator Iterator that is iterated using the next() method or for...of loop. The yield statement suspends the execution of function temporarily and sends a value back to the caller. The main thing is that when we call a function many times then the execution of that function is paused for a single value and in the next call, the execution of that function resumes from that paused position. 
Syntax:  
function* func-name(){
     yield 'GEEK';
     yield 'GFG';
}

// Object creation of generator function
var v = func-name()
document.write.(v.next().value); //"GEEK" 
document.write.(v.next().value); //GFG
Example: 
Javascript
<script> // Generator Functionfunction * func() {     // 3 different value    // generates by 3 different call    yield 'python';    yield 'java';    yield 'C++';    }    // Calling the Generate Functionvar g = func();document.write(g.next().value+"<br>"); //python// Paused execution on "python"  document.write(g.next().value+"<br>"); //java// Paused execution on "java"  document.write(g.next().value); //c++// Paused execution on "C++"  // "value" is keyword</script>
Output: 
python
java
C++
Immediately Invoked Function: Immediately Invoked Function Expressions is used to avoid hoisting. It allows public access to methods even if the privacy for variables are not public. These functions do not require any explicit call to invoke. The declaration of this function is also different from the normal functions. The total function is declared under a pair of 1st bracket. This thing tells the compiler to executes this block immediately. This is also declared using the “!” symbol. 
Syntax:  
using 1st bracket: 
(function ()
{ 
    // body 
}) ();
using “!” symbol 
!function ()
{ 
    // body 
}();
Example: Here the 2nd statement is the Immediately Invoked Function Expression, which will invoke after the 1st statement in the called function and before the last statement of the called function even if the last statement is under the called function. 
Javascript
<script> // Immediately Invoked Function Expressionfunction func() {    document.write("do"+"<br>");              // This function invoke immediately        // after executing previous statement        (function() { document.write("CODE"+"<br>"); })();          document.write("at GeeksforGeeks");      // Using "!" keyword    document.write("<br><br>do"+"<br>");              // Same thing using "!" symbol        !function() { document.write("Practice"+"<br>"); } ();          document.write("at GeeksforGeeks");}  // Callingfunc();</script>
Output: 
do
CODE
at GeeksforGeeks

do
Practice
at GeeksforGeeks
 
sooda367
anikaseth98
arorakashish0911
ES6
Picked
JavaScript
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Angular File Upload
How to get selected value in dropdown list using JavaScript ?
How to remove duplicate elements from JavaScript Array ?
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript