ES6 Functions

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: 

<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: 

<script>
function geeks( ) {  
    // body 
    return 'GeeksforGeeks';
}

// calling
var 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: 

<script>
// p2 and p3 initialized with a default value
function 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: 

<script>
function RestFunc( ...p) // "p" is the parameter
// "..."  define the "Rest parameters"
{
   document.write(p + "<br>");
}
 
// calling
 
RestFunc(1); // 1 
RestFunc(2,"GFG"); // 2,GFG
RestFunc(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: 

<script>
// "func" refer to the function
var func = function() {
    document.write("GeeksforGeeks");
}

// Calling
func();
</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: 

<script>
//"=>" is use for arrow or lambda expression
var 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:  

<script>
func();

// Calling before definition-->Hoisting
// "func" is the function
function 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: 

<script> 

// Generator Function 
function * func() { 

    // 3 different value 
    // generates by 3 different call
    yield 'python'; 
    yield 'java'; 
    yield 'C++';     
} 
   
// Calling the Generate Function 
var 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. 

<script>

// Immediately Invoked Function Expression
function 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"); 
} 
 
// Calling 
func(); 
</script> 

Output: 

do
CODE
at GeeksforGeeks

do
Practice
at GeeksforGeeks