Essential JavaScript: Mastering Immediately-invoked Function Expressions

The natural function definition

  1. Lines 1–3 define a function named sayHi.
  2. On line 5 we call it with the usual “()” syntax to invoke the function.

Function expressions

  1. Line 1 declares msg variable and assigns a string value to it.
  2. Lines 2–4 declare sayHi variable and assign a value to it that’s of function type.
  3. Line 6 calls this sayHi function.

Anonymous function expressions

Named function expressions

Enough! Show me an IIFE or I am leaving now!

  1. As we saw before, a function statement always starts with the function keyword. Whenever JavaScript sees function keyword as the first word in a valid statement, it expects that a function definition is going to take place. So to stop this from happening, we are prefixing “!” in-front of the function keyword on line 1. This basically enforces JavaScript to treat whatever that’s coming after “!” as an expression.
  2. But the most interesting stuff happens on line 3 where we execute that function expression immediately.

Classical IIFE style

  1. In Variation 1, on line 4, parentheses () for invoking the function expression is contained inside the outer parentheses. Again outer parentheses are needed to make a function expression out of that function.
  2. In Variation 2, on line 9, parentheses () for invoking the function expression is outside the wrapping parentheses for the function expression.

IIFEs and private variables

IIFEs with a return value

  1. In this variation, we have an IIFE that has a return statement on line 2.
  2. When we execute the above code, line 5 shows the alert with the return value from the IIFE.

IIFEs with parameters

  1. In the above example, on line 1, IIFE has two formal parameters named msg, times respectively.
  2. When we execute the IIFE on line 5, instead of the empty parentheses () we have seen so far, we are now passing arguments to the IIFE.
  3. Lines 2 and 3 use those parameters inside the IIFE.
  1. JavaScript always does scope lookups from the current function’s scope and keeps searching in higher scopes until it finds an identifier. When we pass document on line 3, that’s the only time when we are doing a scope lookup beyond local scope for the document. Any references in the IIFE to document will never need to be looked up beyond the local scope of the IIFE. Same applies to jQuery as well. Performance gain by this may not be huge based on how trivial or complex the IIFE code is, but still it’s a useful trick to know.
  2. Also, JavaScript minifiers can safely minify the parameter names declared in a function. If we did not pass these as parameters, minifiers don’t minify direct references to document or jQuery as they are outside the scope of this function.

Classical JavaScript module pattern

  1. In the above example, we have an IIFE that returns an object. See line 7 and 8.
  2. We also have a local variable in the IIFE named current.
  3. The return value of the IIFE, which is an object in this example is assigned to the Sequence variable. Line 12 properly alerts “object” since we are returning an object from the IIFE.
  1. In this example, we add two functions on the object that we return from the IIFE.
  2. Lines 8–10 add getCurrentValue function that returns the value in current variable
  3. Lines 12–15 add getNextValue function that increments the value in current by 1 and then returns the value in current.

When you can omit parentheses

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chandra Gundamaraju

Chandra Gundamaraju

For my day job @Salesforce, I write code for machines; But in my free time, I pursue this wild hobby of writing for humans. {Learn | Code | Read | Write}