1

Consider the following:
https://developer.mozilla.org/en-US/docs/Glossary/IIFE

(function() {}());

Then there is this snippet:

class Test {
    constructor() {
        this.WP = (() => { //scope here?
            // annotated
            const tar = webpackJsonp.push([[], {a_test: (md, exp, tar) => md.exports = tar}, [["a_test"]]]);
            delete tar.m.a_test;
            delete tar.c.a_test;
            // annotated_end
            const find = (mask) => {
                for (let i in tar.c) {
                    if (tar.c.hasOwnProperty(i)) {
                        let m = tar.c[i].exports;
                        if (m && m.__esModule && m.default && mask(m.default)) return m.default;
                        if (m && mask(m))   return m;
                    }
                }
                return null;
            };
            return {find};
        })();
    }
}

Which is 

= (() => {})();

My understanding they are both IIFE, what I don't understand is:

  1. Why such difference in syntax? I'm not talking about arrow part, I know about arrow functions. I'm talking about brackets, there is some scope nonsense.
  2. Why annotated part executes only once? const tar is scoped and this is a function and each time I call it the scope should be reinstated. Yet calling find reuses already existing const variable. What gives?

I Honestly Am Totally Enigmatically Just Stumbled

Kirikan
  • 119
  • 6
  • can you make a runnabe example? – Nina Scholz Feb 08 '20 at 10:02
  • what is `webpackJsonp` doing? – Nina Scholz Feb 08 '20 at 10:06
  • that's how you write arrow function which doesn't return any value directly. – Amit Chauhan Feb 08 '20 at 10:07
  • *const req is scoped* ?? `req` is never defined – CertainPerformance Feb 08 '20 at 10:07
  • @CertainPerformance I meant `tar`. I've tested it and the first annotated line in the code example executes only once. If it did every time i call `.find` it would push more object to `webpackJsonp `. – Kirikan Feb 08 '20 at 10:10
  • Sure, but what do you mean by `const req is scoped`? There is no `const req` – CertainPerformance Feb 08 '20 at 10:11
  • 1
    "Why such difference in syntax"? The brackets are needed by the language specification. "Why annotated part executes only once?" Because it belongs to the part that executes immediately, and not to the part that the IIFE *returns* as function. – trincot Feb 08 '20 at 10:11
  • if you push s/t to an array, you get the new length of it as return value. – Nina Scholz Feb 08 '20 at 10:12
  • @trincot Any more in-depth info you can provide, preferably as an answer? – Kirikan Feb 08 '20 at 10:13
  • 1
    Kirikan, I actually don't understand what you are asking. Furthermore, saying that `tar` is scoped does not say a lot: *all* variables in JavaScript have a scope. Finally, a good question, should just be ... one question. – trincot Feb 08 '20 at 10:13
  • @trincot By scoped I mean to that particular scope. if I `"nstantiate"` Test class `let q = new Test()` ,y understanding is that the scoped part that are in `{}` and as a function it should execute each time I call it since that is how function work. Yet it isnt. – Kirikan Feb 08 '20 at 10:15
  • 1
    Kirikan, do you understand that an IIFE is only executed once (unless you execute the surrounding code more than once of course)? But that the function that IFFE returns, might be called later multiple times? And that such a returned function may access variables within its scope (the priniciple of *closure*)? I am not sure what is confusing you here. There are so many aspects... – trincot Feb 08 '20 at 10:17
  • @trincot Okay, well, I see what are you saying but it still leaves me baffled. – Kirikan Feb 08 '20 at 10:25
  • 1
    The problem is that you have too many questions here, both about syntax, scope and semantics, and that the snippet you included performs actions that make no sense, which makes the question even more unanswerable. Please focus on just one aspect, and the chances of getting a useful answer will drastically increase. – trincot Feb 08 '20 at 10:27

1 Answers1

1

With non-arrow function expressions, the parentheses invoking the IIFE can be positioned either before or after the parentheses delineating the function expression.

(function (){}()) or (function f(){})()

With arrow function expressions, the parentheses invoking the IIFE can only be positioned after the parentheses delineating the function expression.

(() => {})()

The reason for this is discussed here.

The behaviour is the same, regardless.

Ben Aston
  • 53,718
  • 65
  • 205
  • 331