25

As I understand it, the IIFE pattern is a work around to the fact that ES5 and below do not have a way to create block scopes. By wrapping everything in a function and immediately invoking it, we can create a scope.

Now that let and const will gain support by more the browsers, does this reduce the need for something like the IIFE pattern?

zerkms
  • 230,357
  • 57
  • 408
  • 498
Kyle Pennell
  • 4,306
  • 3
  • 38
  • 65
  • I can see an argument for how one might use a block and `let` to replace an IIFE, but what does `const` have to do with any of that? The IIFE gives you privacy inside the scope and avoids namespace pollution. `const` doesn't really help with namespace conflicts at all. It does provide write protection, but not read privacy. – jfriend00 Nov 05 '15 at 00:15
  • Take a look at this: [Do ES6 Modules make the case of IIFEs obsolete?](https://hashnode.com/post/do-es6-modules-make-the-case-of-iifes-obsolete-civ96wet80scqgc538un20es0) – Noam Manos May 01 '17 at 17:00

3 Answers3

25

Yes, blocks are going to replace IEFEs, as soon as block-scoped declarations (functions, let/const/class) become widely adopted. You need a scope, e.g. for a closure? Here you have a block, be it a loop body or just part of a statement list.

However, there is still one application of IEFEs that blocks cannot replace: the module pattern. Blocks don't have return values, and mutating higher-scoped variables is ugly, so we will still see function expressions in the creation of objects that need private state:

const example = (() => {
    …
    return …;
}());
Community
  • 1
  • 1
Bergi
  • 513,640
  • 108
  • 821
  • 1,164
  • 2
    You would use ES2015 modules to maintain private state and code. That is, when they're supported by browsers :( – Esteban Nov 06 '15 at 00:03
  • 2
    @Esteban: Good objection. But an ES6 module typically requires an own file, and you might not want to spread out your code too far. – Bergi Nov 06 '15 at 00:18
  • 1
    `let`, `const`, and `class` are scoped within block scopes, however `function` is not, and will leak out of a block scope. If you are declaring functions, an IIFE is still necessary. – Rob Porter Feb 22 '17 at 04:03
  • @RobPorter Function declarations are block scoped as well in ES6 - check the question linked in my answer. – Bergi Feb 22 '17 at 11:13
  • 1
    @Bergi is this then just incorrectly implemented in Chrome? Try this code in Chrome 58: https://gist.github.com/rgeraldporter/3f94db1d0b5515789c9675cb659b7cc3 Declaring strict doesn't seem to help either. (`let`, `const`, `class` all block scope correctly though) – Rob Porter Feb 22 '17 at 15:10
  • Never mind, now I see that you need to have `"use strict"` outside of the scope of the block. That helps a lot. Thanks! – Rob Porter Feb 22 '17 at 15:23
4

Although browser's may begin supporting this, there will always be some random browser that is outdated or is not planning support for this. until it has become standard in all major browsers, it is still recommended that you continue going on with your IIFE pattern until you find it on all majorly used browsers. something you could do is have a script (or google analytics) send information on whether this is undefined or not and until you get at least around 90% of it saying it is not undefined you should continue with IIFE.

puppy0cam
  • 51
  • 5
-1

Yes, it's very recommendable to use const and let and also all the new features of ES6. It may not be supported by all browsers for now but you can just use compilers like babel in your applications to make sure they will work everywhere.

Ana Bastos
  • 1
  • 1
    You did not explain your arguments and did not really address the question. `const` is not related to scope. ES2015 modules have much more to do with name-spacing than `const` (and wrapping everything in a block and using `let` everywhere just for scoping just seems hack-ish to me). – MasterAM Sep 19 '16 at 20:44
  • @MasterAM `const` is just as related to scope as `let` is: they are both block-scoped. References: [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) [2ality](http://www.2ality.com/2015/02/es6-scoping.html) – Marcus Feb 01 '17 at 21:47