{"componentChunkName":"component---src-templates-blog-post-js","path":"/what-are-iife-in-javascript","result":{"data":{"markdownRemark":{"id":"5accc0b0-f226-5f69-a878-756c585a6cae","html":"\n

IIFE (Immediately Invoked Function Expression)

\n

ONE of the important concepts of JavaScript is IIFE and so we will try to make you guys understand what it is and how it is useful

\n

From the things we have learned about execution context and scoping (refer to the previous blog here) you might have noticed some issue and the problem is that whenever we define a variable we have to be careful to not repeat the same name twice or in other words avoiding namespace collisions in the global execution context

\n

Now this is not a big problem if you consider a small size application but when our application becomes big and when we have multiple developers working on the same project and we have multiple JS files and at times like that we encounter this problem

\n

Let's see why global variables are bad

\n
    \n
  1. First if we define too many variables into the global scope we might end up filling our memory heap with so much data and it could crash our browser
    2. \n
  2. The second reason is that even if we don't have many variables there comes a problem like if we define the name of the variable same because it might happen so it will lead to other problems like changing the previous names actual data and create many bugs
    3. \n
\n

Even if we use different script tags and different Js files it all comes down to a single file and having the same names for the variable will lead to many bugs and problems and pollutes the global namespace

\n

But that's where IIFE comes which are Immediately Invoked Function Expression

\n

by reading the full form might have thought what the heck is this so let me know what it exactly is

\n
//IIFE \n(function(){\n //code\n})();
\n

As you can see this is an IIFE and it is also a function expression,

\n

You might ask why it is a function expression well when the JS engine parses through the code it doesn't encounter function keyword instead it encounters \"(\" and so it is a function expression

\n

Now whatever you will write inside the IIFE will not be accessible to the outside function expression and because of that, it doesn't pollute the global namespace as simple as that.

\n

Remember that a function declaration can't be used as an IIFE and it can't be directly invoked if you do that then you will have a syntax error

\n
function(){\n  //code\n}()  // This will give syntax error
\n

This idea of IIFE became very popular back in the day and many libraries still use it like jQuery use IIFE and its just a popular way to avoid namespace collisions

\n

But with the introduction of ES6 Modules and things like that not many applications now don't use IIFE but it really is a very intriguing concept and is often asked in interviews so there is no harm in learning them

\n

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

\n

Reach out to us on Twitter and Instagram where we try to provide more value in threads and carousal formats

\n

Thank You for your time

\n

Keep learning, Keep coding :)

\n","excerpt":"IIFE (Immediately Invoked Function Expression) ONE of the important concepts of JavaScript is IIFE and so we will try to make you guys understand…","frontmatter":{"date":"April 08, 2021","slug":"/what-are-iife-in-javascript","title":"IIFE","description":"IIFE ( Immediately Invoked Function Expression) are an important concept we are going to understand exactly what problem does it solves in JS","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABtUlEQVQ4y6WSuU7DQBRF3QBiqUjsWb3EgYQkgC2HLQmQEBB0NPwDn8AnIEQFNBRISNBBRUGJaPiwy3jMOImUiCLF1R2N5t133rMtzjnGi4GxzIXINHxn5Dgc19dL+P6exefnHKxJgaYwLSgUMhEy2sj409MCfn5m8PU1OznQhMUxwdGRjW7XRrVK81BDXixynJ4W8fo6j4eHRViMsTxgWOZxp+Pg4qKA8/MikoTAtgd0hjB9J2VWZ2XjMd05FaUDZ4wqZ39SxcKEDK1GKW1uGmhCz5OoVBjCkKJUoto9L7334UqpCoRuyijLfIzMZBYhFPV6BWdnHP2+g8Mu095sSkRRgrVaFUEQKDoBrsK1p3TSze+EkDlxPvLysqPIVtHr9XFw0MXx8Ql2dnfAGiHKe+uoRRH8/T785h7kWgP+Vkudd+Fud1CPYpTDUK/GIpQqihranTY2NzfUmB58P1N65lJAqJUIQ2XIcuJsJWYtFrVtuJRgpVyGH/h/H2Ig/s/uRveoRnYbapRWD1RdUOJg8n/5vzRhfPOM5uMHapdXioROFagJk7s3JPfviG9fIIJQhZKpAn8B6yRqNvzY/KAAAAAASUVORK5CYII=","aspectRatio":1.502145922746781,"src":"/static/c1e74128fcfa544bced6cf6e1d5ee8eb/03979/iife-cover.png","srcSet":"/static/c1e74128fcfa544bced6cf6e1d5ee8eb/6cdeb/iife-cover.png 350w,\n/static/c1e74128fcfa544bced6cf6e1d5ee8eb/b1dd8/iife-cover.png 700w,\n/static/c1e74128fcfa544bced6cf6e1d5ee8eb/03979/iife-cover.png 800w,\n/static/c1e74128fcfa544bced6cf6e1d5ee8eb/1783d/iife-cover.png 1050w,\n/static/c1e74128fcfa544bced6cf6e1d5ee8eb/942ca/iife-cover.png 1400w,\n/static/c1e74128fcfa544bced6cf6e1d5ee8eb/b5274/iife-cover.png 3000w","sizes":"(max-width: 800px) 100vw, 800px","maxHeight":533,"maxWidth":800},"sizes":{"src":"/static/c1e74128fcfa544bced6cf6e1d5ee8eb/ee604/iife-cover.png"}}}}}},"pageContext":{"id":"5accc0b0-f226-5f69-a878-756c585a6cae","previous":{"id":"32bfe0f7-810a-5b97-b196-7215a5b03ade","frontmatter":{"slug":"/what-is-hoisting-in-javascript","template":"blog-post","title":"Hoisting in Javascript"}},"next":{"id":"75ee8fb3-5387-5211-8eb5-4e4aed5f336f","frontmatter":{"slug":"/how-this-keyword-works-in-javascript","template":"blog-post","title":"This Keyword In JavaScript"}}}},"staticQueryHashes":["228695001","3868140423"]}