What is an IIFE? | Javascript IIFE Function Expressions Explained

[@ichiroutakashima4503]

This channel needs more subscribers. The info is easy to digest. And your description and links you give are the holy grail needed by every beginner to learn.

[@DaveGrayTeachesCode]

Thank you!

[@farruk_developer]

@@DaveGrayTeachesCode for real you are a great guy

[@srinivasaraoyp3640]

I am trying to learn IIFE, this video demo is simply the best. In the institutions, they only show one example. Here are so many examples. Thank you.

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@DaveGrayTeachesCode]

IIFEs look unusual when you first see them. No worries! In this tutorial I break down what an IIFE is and how an IIFE is used in Javascript. This tutorial also references several other Javascript concepts including recursion, ternary statements, scope, and closure. I have links to tutorials about all of those concepts in the description of the video. If you are just starting to learn Javascript, I suggest starting with my full 8 hour Javascript tutorial found here: kzbin.info/www/bejne/e5eknWyYrN-JkM0 Note: There is a default parameter placement correction of the example at 1:30 noted in the description. Doh! Needed more ☕☕☕

[@CodeWithTomi]

Nice video... And congrats on 4k

[@DaveGrayTeachesCode]

Thanks Tomi! 🙏💯

[@ranjankumar1324]

Congratulations on 4k.., much more to come

[@DaveGrayTeachesCode]

Thank you! 🙏🚀

[@nikitak9628]

Dave, this is a fantastic explanation of IFFEs. Very thorough, especially for going through the module and the revealing module pattern.

[@DaveGrayTeachesCode]

Thank you, Nikita! 🙏

[@ibrahim_youssef_13.12]

I search about thing and open any video , then I sea Dave video , immediately close the video and open the Dave's video , YOU ARE AWESOME

[@DaveGrayTeachesCode]

Thank you!

[@B-Billy]

So much content in such a less time.. Bravo and subscribed !!

[@DaveGrayTeachesCode]

Thank you! 🙏💯

[@hotkatgotama]

Dave, I just recently started watching your tutorials - superb content. Currently, I am doing a deep dive into ReactJs, NextJS and NodeJS (from a .NET background). I would love to see (in addition to your usual generic-type examples) some (at least one) real world examples, this might make your videos a bit longer - but well worth the effort. For example, these variations of the Module Pattern - I can see that a good use case for them would be when you only need one instance of an object - without inheritance, singleton code and all the other baggage. Would be great to see your response. Fantastic channel.

[@DaveGrayTeachesCode]

Thank you, Katim! And thank you for the request / suggestions. 🙏 One instance of an object would be a singleton pattern if I am understanding your request correctly? Design patterns would be a great series to tackle! 🚀

[@aman7555]

Hello Dave, wonderful tutorial as always. A quick input, in the increment counter example, we don't need to pass counter to credits as it already has access to it because its in the lexical scope, [I understand scopes and closures better thanks to you] const increment = (()=>{ let counter=0; console.log(counter); const credits = () => console.log(`I have ${counter} credits`); return () => {counter++; credits();} })();

[@DaveGrayTeachesCode]

That is a good observation about lexical scope. If I didn't use the num parameter placeholder, it could have been written that way. 💯😀

[@shobhitgarg6897]

@@DaveGrayTeachesCode Hey , Great Tutorial !! Just one doubt, I have checked with normal functions they also have access to counter variable. So like whats the difference? const increment = ()=>{ let counter = 0; console.log(counter); const credit = (num)=>console.log(`I have ${num} credits`); return ()=>{counter++; credit(counter)} } const incrementFunction = increment(); console.log(incrementFunction); incrementFunction() incrementFunction() incrementFunction()

[@craigburton4447]

Such a good tutorial Dave, several 'aha' moments for in it. Thanks!

[@DaveGrayTeachesCode]

Glad I could help! 🚀

[@Miguel-Barcelo]

Hi Dave, thanks for your service, you have my like on every video that I watch, really appreciate it

[@DaveGrayTeachesCode]

Thank you, Miguel! 🙏🙏

[@emreozgun3846]

Informative as always Dave!

[@DaveGrayTeachesCode]

Thanks! 🙏

[@RoyerAdames]

Great for keeping subscription and initial values together in angular 2+

[@KishoreRaju-s6u]

Hi Dave, you are doing an amazing job, can you come up with more javascript advance concepts

[@shineLouisShine]

Fascinating concept! Although it does feels as if it requires a lot of practicing to be truly familiar with and apply it while coding with in high skillability. Thanks..

[@gordonmullen7272]

Thanks again for a job well down: I see things I didn't before so THANK YOU !! hungry for more Mr. Grey, you're a Master Code Chef who plays a mean Van Halen lick. I used to be a Keyboard player in a band. Used an old Korg 800 + a whole rack. telling my age now lol. That was back when jump just hit the radio and I loved it.... anyway thanks so much!!!

[@DaveGrayTeachesCode]

Thanks Gordon! 🙏 80s rock does have great guitar and keys! 🤘🤘💯

[@shawnjohnson3433]

Very good teacher!

[@DaveGrayTeachesCode]

Thank you! 😃

[@darkhorsemusicco.5156]

Excellent excellent video. Thank you

[@DaveGrayTeachesCode]

You're welcome! 💯

[@Panjax]

I'd have liked an explanation why these variations exist. Like the module pattern vs the revealing module pattern. I can see they're different but why? what problem does it solve being different like that. And therefore, why would we use it?

[@Really_riel]

When I entered the code at 3:03 . I keep getting a reference error saying “nun is not defined”. Please I’m confused.

[@DaveGrayTeachesCode]

There is a correction that pops-up at 1:30 and is noted in the description. That should help!

[@ahmad-murery]

Injecting name space is useful to plugin more functionalities to the App as needed, for example we can create another separate IIFE to provides a decrement method to expand what the App can do Thanks Dave,

[@DaveGrayTeachesCode]

Absolutely Ahmad. Glad to see your comment here! 🚀💯

[@ahmad-murery]

@@DaveGrayTeachesCode Finally 😁, I thought I'll never be able to comment on your videos again, Thanks Dave and I appreciate your help

[@DaveGrayTeachesCode]

@@ahmad-murery agreed! For the context of anyone else reading this, we could not figure out why YT prevented his comments on my last video. Ahmad provides good comments, and I do not block them. Glad to have you back 🙏

[@ahmad-murery]

@@DaveGrayTeachesCode So true, maybe YT has marked my comments as spam and auto deleted them because I always start them with "Hello Dave", so I didn't do it this time 😎

[@ua2894]

What would be the use and benefit of injecting a namespace object?

[@dzienisz]

Where would you use IIFE in real case application? Any particular module?

[@chetanjain4616]

Love the series, I hoped there will be one for bind, call as well

[@DaveGrayTeachesCode]

I have not made those.. yet. Great requests! Thank you 🙏

[@chetanjain4616]

@@DaveGrayTeachesCode I think video on those topics would complete the advance javascript series

[@dumchik7290]

> function fun1(){return "hello"}() Uncaught SyntaxError: Unexpected token ')' > function fun2(x){return x*x}(5) 5 > 0,function fun3(x){return x*x}(5) 25 As expected in first case I get error as I didn't use paranthesis. But how the second case and third case get executed?

[@jiweihe3413]

10:30 module pattern looks a bit like factory function but is immediately invoked. Is there any relation between the two?

[@DaveGrayTeachesCode]

They are similar!

[@jiweihe3413]

A bit confused about the last example "injecting a namespace object" at the end of the video. Why the input to the function is not "namespace=XXX" but "window.App=window.App" instead?

[@DaveGrayTeachesCode]

In the example, the window object is being passed in and we are creating a namespace in the property App. At 13:50 I explain that it much like defining const App = { } ...those are the arguments passed in when the function is called. In the example, the word "namespace" is a parameter placeholder in the function definition.

[@jiweihe3413]

@@DaveGrayTeachesCode thank you. Just realized namespace is not a random object name.

[@jingli9232]

thx for sharing you knowledge

[@DaveGrayTeachesCode]

You're welcome!

[@JoeeBiden-j1t]

myIffy() function has no parameters. But while invoking a parameter is used (num =0). How is it? Could you please explain it?

[@DaveGrayTeachesCode]

Sounds like a default parameter: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

[@JoeeBiden-j1t]

@@DaveGrayTeachesCode , thanks for your reply. I'm learning a lot from your videos.

[@yabuking84]

isnt it only VAR can be global variables?

[@st10689]

Hi my question is why it is necessary to wrap the whole function definition inside parenthesis and then call it. I mean why this does not work const test = ( ) => { console.log(10) } ( ); Why it needs the added parenthesis, so basically be like that to work const test = (( ) => { console.log(10) }) ( ); OR THIS ( ) => {console.log("Hello") ( ); -> Not working (( ) => {console.log("Hello")) ( ); -> Working

[@DaveGrayTeachesCode]

Good question! It needs to be grouped together so the operators () are calling the complete function. For another example, if we have: 'Dave'+'Gray'.toUpperCase() ...what do you think will be uppercase? Only Gray because toUpperCase() is only called on the last string. However: ('Dave'+'Gray').toUpperCase() makes both Dave and Gray uppercase.

[@ravivarma7837]

every function create its own scope so the variables or functions inside the function would only be created in the same function scope and it would not populate global scope i am very confuse as the below code does the same as IIFE const x = "whatever global Scope"; const helloworld = () => "Hello World from global Scope"; function foo(){ const x = "whatever foo Scope"; const helloworld = () => "Hello World from Foo Scope"; console.log(x); console.log(helloworld()); } foo(); console.log(x); console.log(helloworld());

[@DaveGrayTeachesCode]

In your example, you have 3 globals: x, helloworld, and foo. You could wrap all of those in an IIFE and have no globals. You are correct that each function creates its own scope. This is also true of an IIFE function. All of the other functions you create would be within the scope of the IIFE and not in the global scope.

[@ravivarma7837]

after months of wrapping my head around finally I understood thanks alot ​ @Dave

[@abdulrehman-rt5mz]

@@ravivarma7837 same confusion going with me, can u pls what did u conclude ?

[@shanemarchan658]

and that's why bananas have no toes.. if u need a tutorial to that, ive got a link in the description down below

[@tularamsa5814]

awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@jcubic]

I'm afraid you have a logic error in your code })(num = 0); will create a global variable because it's not a parameter just an expression. You want to put this in function argument not when you call it. I would add a banner to correct that. Also you're using IFFE it isolate the scope but with const and let you're using you can just curly braces you don't need IFFE anymore in ES6 and beyond.

[@DaveGrayTeachesCode]

Thanks for the note. 🙏 I did not consider the default parameter placement correctly when the IIFE is called. Note will be added. Update: It seems YT no longer allows video annotations, but I have added a note in the description. Concerning your 2nd comment on not needing IIFE after ES6 and beyond, I state in the video this is intended to identify what you may see in legacy code. Legacy code will likely use var, but I can't make myself go back lol. I agree that curly braces create a local block scope and you can verify in my scope tutorial: kzbin.info/www/bejne/lXacZ4psntt7pMk Thanks again for the comment! 😀

[@goddamnwhathaveidone]

Thanks my dude. 1st result when I googled and I never never got to the 2nd one.

[@DaveGrayTeachesCode]

Right on! 🤘