DEV Community

Cover image for Javascript pattern that changed everything (for me...)

Javascript pattern that changed everything (for me...)

KristijanFištrek on July 28, 2019

Foreword Hello there good people of Dev.to & welcome to my first Dev.to post! I've been a member of this community for a while and f...
Collapse
 
stereobooster profile image
stereobooster

In ES6 you need it less. IIFE was needed in ES5, because there were no lexical scoping (only scoping to function body), so if you needed some isolation you would use closures and IIFE everywhere.

ES6 introduces:

  • modules, which has local scoping
  • let and const which has lexical scoping
  • arrow functions which automatically bind this to parent scope

I haven't seen a lot of usage of IIFE in ES6.

Collapse
 
kristijanfistrek profile image
KristijanFištrek • Edited

I absolutely love ES6 because of that, it blew me away!

However, I've had slight compatibility issues with certain ES6 features and I was forced to use Babel or some other tricks to make it work across all browsers and devices :/
Plus, I've seen couple of developers killing it with ES6, but they weren't aware what's going on behind something like an arrow function or even how local and global scoping acts according to certain definitions, so even though I think this is almost old school and slightly obsolete :D I do think it's cool to know how it was done before and what's going on under the hood, so to speak.

But you're completely right. IIFE is not necessary in ES6 ^

Collapse
 
hakuz profile image
Hakuz

Good Read..and what about writting the same article ...with ES6

Thread Thread
 
kristijanfistrek profile image
KristijanFištrek

Well, I guess I found my inspiration for the next post 😁 good idea!

Collapse
 
drewtownchi profile image
Drew Town

After reading this I realized that this is more or less the pattern the Vue function API proposal is using with some framework specific stuff sprinkled in. I didn't know that 😊

One thing that comes up in their examples is that you can use destructuring to get those methods/values out of the function to use them directly.

const { start, increment, count } = myRevelaingModule;

Cheers and thanks for the article.

Collapse
 
kristijanfistrek profile image
KristijanFištrek

Didn't know that! 😮
Unfortunately I am out of Vue world, although I hear its amazing and I should jump aboard, but I do know that several jQuery plugins and certain Angular functionalities use this or similar techniques to ensure encapsulation of their data.🙃
I would definitely recommend Addy Osmani Javascript Design Patterns to everyone interested in this kind of stuff ^

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

The privacy really bothers me, to the point where I am not sure this pattern actually achieves it's goals. Exposed private methods are no longer private, in much the same way if I had no trousers my private would be public for all the world to see.

Collapse
 
kristijanfistrek profile image
KristijanFištrek

As far as I have learned, what is public is only the reference to what the private function holds. Therefore its internal state or value remains untouched from the outside, or so to speak you can not change what has been defined, you can only view or read what has been exposed. It's like having only the Read segment of CRUD, let's say.
In your analogy, it's like taking down the pants but there's a drawing of your private parts covering them 😄, you can still kind of see what they look like, but if someone were to touch it he would be touching a drawing and not a real thing.
I never thought I would enter a conversation where a correlation between man's private parts and JS pattern is drawn 🙈

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

🤣

Collapse
 
chirag97 profile image
Chirag Chaudhari

awesome article... thanks for enlighting! Enjoy

Collapse
 
kristijanfistrek profile image
KristijanFištrek

No problem, thanks for commenting! 🤘

Collapse
 
juancarlospaco profile image
Juan Carlos

is Anon Function even a design pattern?. 🤔

Collapse
 
kristijanfistrek profile image
KristijanFištrek

I believe it depends on the context of their use.
Because as far as I know, correct me if I am wrong, in this context we have an anonymous function in conjunction with object reference and scope manipulation, which creates a sort of a pattern we can follow in order to replicate this behaviour.
At least that's what I have picked up so far 😄

Collapse
 
juancarlospaco profile image
Juan Carlos

Fair'nuff :)

Collapse
 
fcfn profile image
Peter Timoshevsky

Thank G-d for ES6 and Babel!

Collapse
 
kristijanfistrek profile image
KristijanFištrek

IIFE ain't that bad 😄 but yeah, ES6 and Babel is marvelous!