syntax with arrow function in TypeScript

Question

In a code in TypeScript I saw

(() => {
    const abc = 'blabla';
    ...
})();

What does this syntax mean exactly ? I know arrow functions is JS - so I understand this:

() => {
    const abc = 'blabla';
    ...
});

But what is the interest of the rest of parenthesis ?

PS: The original code is

(() => {
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );

})();

Thank you

in this context, it looks like its simply used as a function (slightly shorter than writing out function), which is then called immediately. Given it isn't using a this - I think it could just use function notation instead. — Meirion Hughes
– Meirion Hughes, Commented Aug 14, 2017 at 20:12
This is an IIFE, or an "Immediately Invoked Function Expression" — Sterling Archer
– Sterling Archer, Commented Aug 14, 2017 at 20:13
It's just an Immediately-invoked function expression using an arrow function — Nitzan Tomer
– Nitzan Tomer, Commented Aug 14, 2017 at 20:13
The second snippet in your question is invalid syntax since you have one more closing than opening parenthesis. — alpinist
– alpinist, Commented Aug 14, 2017 at 20:14

gilamran · Accepted Answer · 2017-08-14 21:51:43Z

2

In JavaScript these functions are called IIFE (Immediately-Invoked Function Expression), it's just a definition of a function and invoking it immediately! What is it good for? many reasons...

But, before we go into the reasons, please note that arrow functions are not part of your question, as there's not this in your example...

Also not that this question is not relevant to TypeScript.

Few on many reasons:

You get to have a scope (By reacting a function), without polluting the global scope.
Can can defined a "private" functions that will not be accessible outside of the IIFE
You are in control on what's going in and out of this function.

answered Aug 14, 2017 at 21:51

gilamran

7,3144 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Russley Shaw · Accepted Answer · 2017-08-14 20:45:58Z

0

Your code can be decomposed from

(() => {
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );

})();

to...

const myFunc = () => {
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );
}
(myFunc)();

The parenthesis you are seeing is wrapping the lambda (anonymous function) in parenthesis so you can call it.

answered Aug 14, 2017 at 20:45

Russley Shaw

4412 silver badges9 bronze badges

1 Comment

Russley Shaw Over a year ago

The extra set of () allows you to immediately call your lambda. ({... Define Lambda Here...})(arg1, arg2, arg3)

alpinist · Accepted Answer · 2017-08-14 21:07:19Z

The trailing () call the anonymous function. This is also possible with functions.

Since your code already makes use of ES6 features, a simple block of curly braces can be sufficient. In your example, it restricts the scope of title to the curly braces which makes the code more predictable. The title constant is not visible before { and after } (it does not pollute the rest of your file):

{
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );

}

In the same file, you may now have a second block of curly braces and do something else with a different title, without having to modify the first title:

{
    const title = 'Other Document'
    // do something with "title"
}

Hint: Avoid var declarations. They are not useful any more with ES6 because const and let are available, and the scopes of var variables do not respect simple curly braces.

Collectives™ on Stack Overflow

syntax with arrow function in TypeScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related