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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EfAl9bwzVZk.html Note: There is a default parameter placement correction of the example at 1:30 noted in the description. Doh! Needed more ☕☕☕
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.
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! 🚀
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 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()
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..
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!!!
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?
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,
@@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 🙏
@@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 😎
> 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?
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?
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.
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());
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.
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
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.
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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_E96W6ivHng.html Thanks again for the comment! 😀
