JavaScript Function Cheatsheet

Javascript allows to declare functions in various ways. This article provides a quick overview of each type.

1. Simple function definition

    function hello() {
        console.log("hello")
    }
    hello();
    // Output: hello
   

2. Anonymous function expression

    const hello = function() {
        console.log("hello")
    }
    hello();
    // Output: hello
   

3. Named function expression

    const hello = function hello1() {
        console.log("hello")
    }
    hello()
    // Output: hello
   

4. Arrow function (always anonymous)

    const hello = ()  => {
        console.log("hello")
    }
    hello();
    // Output: hello
   

5. Single line arrow function

    const hello = () => console.log("hello")
    hello();
    // Output: hello
   
    const hello = () => "hello"
    console.log(hello());
    // Output: hello
   
    const obj = () => {a: "1", b: "2"} // Error
    const obj = () => ({a: "1", b: "2"}) // Returns object
   

6. Anonymous callback

    setTimeout(function () {
        console.log("hello");
    })
    // Output: hello
   

7. Named callback

    setTimeout(function hello() {
        console.log("hello");
    })
    // Output: hello
   

8. Arrow function callback

    setTimeout(() => {
        console.log("hello")
    })
    // Output: hello
   

9. IIFE(Immediately Invoked Function Expression)

    (
        function() {
            console.log("hello")
        }
    )();
    // Output: hello
   

10. Named IIFE

    (
        function hello() {
            console.log("hello")
        }
    )();
    // Output: hello
    

11. Arrow function IIFE

    (
        () => {
            console.log("hello")
        }
    )();
    // Output: hello
    

12. Default parameters function

    function hello(name = "User") {
        console.log("hello, ", name)
    }
    hello()
    hello("Demo User")
    // Output
    // hello,  User
    // hello,  Demo User
    

13. Arguments Object (Only in non-arrow functions)

    function hello() {
        for(let i=0;i<arguments.length;i++) {
            console.log(arguments[i])
        }
    }
    hello(1, 2, 3, "Demo");
    /* Output:
    1
    2
    3
    Demo
    */
    

14. Rest parameters (At the end of parameters list, included in arguments object)

function hello(name, ...params) {
    console.log(name);
    params.map(item => console.log(item))
}
hello("Demo", 1, 2, 3)
/* Output:
Demo
1
2
3
*/

15. Higher-Order Functions (HOF)

    • Either takes function as argument

    • or returns function as result

    • Inbulit HOFs: map, reduce, filter, etc.

    function name() {
        return "Demo"
    }

    function greet(callback) {
        console.log("Hello", callback());
    }

    greet(name);

    // Output: Hello Demo

    function outer() {
        return function inner() {
            console.log("hello")
        }
    }
    // const outer = () => () => console.log("hello")

    outer()();

    // Output: hello

Arrow vs Regular functions

Anonymous vs Named functions