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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    function add( p1, p2) { 
       var sum = p1 + p2
       console.log("The sum of the values entered " + sum) 
    add(12, 10)
    </script>

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    function geeks( ) {  
        // body 
        return 'GeeksforGeeks';
    }
      
    // calling
    var gfg = geeks()
    console.log(gfg)
    </script>                    

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    //"=>" is use for arrow or lambda expression
    var func = () => 
       document.write("Arrow function"
    func() 
    </script>

    chevron_right

    
    

  • 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 defination
function GFG() // Define after calling
{
  // body
}
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    func();
      
    // Calling before defination-->Hoisting
    // "func" is the function
    function func() {
        document.write("GeeksforGeeks");
    }
    </script>  

    chevron_right

    
    

  • 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 return or ends. It is done by using yield keyword in place of 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(){
     yeild 'GEEK';
     yeild 'GFG';
}

// Object creation of generator function
var v = func-name()
document.write.(v.next().value); //"GEEK" 
document.write.(v.next().value); //GFG
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 
    // Pasued execution on "python"
       
    document.write(g.next().value+"<br>"); //java
    // Pasued execution on "java"
       
    document.write(g.next().value); //c++
    // Pasued execution on "C++"
       
    // "value" is keywprd
    </script> 

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    do
    CODE
    at GeeksforGeeks
    
    do
    Practice
    at GeeksforGeeks


My Personal Notes arrow_drop_up

3rd year student of Information Technology JADAVPUR UNIVERSITY

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.