improve IIFE docs #37361

kirkwaiblinger · 2024-12-24T21:46:59Z

Description

Added examples of IIFE use cases, and made changes to confusing and misleading information.

Motivation

I was pointing a github user to the docs for IIFEs, since they were in a position where they were absolutely required to use multiple statements in a position that only accepted one, which is perfect use case for an IIFE, see marilari88/zod-playground#130 (comment) (and also marilari88/zod-playground#81). But when I looked at the docs page I had linked... I found it to be extremely difficult to understand, and didn't really address the use case I was referring to at all.

Additional details

Related issues and pull requests

github-actions · 2024-12-24T21:48:45Z

Preview URLs

Flaws (18)

Note! 1 document with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/JavaScript/Reference/Operators/function
Title: function expression
Flaw count: 6

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/First_steps
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/Building_blocks
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/Objects
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
- and 1 more flaws omitted

URL: /en-US/docs/Web/JavaScript/Reference/Operators/async_function
Title: async function expression
Flaw count: 6

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/First_steps
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/Building_blocks
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/Objects
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
- and 1 more flaws omitted

URL: /en-US/docs/Web/JavaScript/Reference/Operators/Comma_operator
Title: Comma operator (,)
Flaw count: 6

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/First_steps
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/Building_blocks
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/JavaScript/Objects
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
- and 1 more flaws omitted

External URLs (1)

URL: /en-US/docs/Glossary/IIFE
Title: IIFE

https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately-invoked-function-expression/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-01-03 22:23:28)

kirkwaiblinger · 2024-12-24T22:05:35Z

files/en-us/glossary/iife/index.md

 ```

 It is a design pattern which is also known as a {{glossary("Self-Executing Anonymous Function")}} and contains two major parts:

-1. The first is the anonymous function with lexical scope enclosed within the [grouping operator](/en-US/docs/Web/JavaScript/Reference/Operators/Grouping) `()`. This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
-2. The second part creates the immediately invoked function expression `()` through which the JavaScript engine will directly interpret the function.


this was particularly incomprehensible to me

Agreed since it doesn't have to be anonymous or even enclosed within (). And the scope the function expression creates does not belong to the enclosing ():

const [uncleDavidStr, uncleDavidFunc] = function uncleDavidFunc() { return ['Uncle David', uncleDavidFunc]; }();

(uncleDavidFunc, function uncleDavidFunc() { })(); // ReferenceError: uncleDavidFunc is not defined

kirkwaiblinger · 2024-12-24T22:08:44Z

files/en-us/glossary/iife/index.md

@@ -6,45 +6,74 @@ page-type: glossary-definition

 {{GlossarySidebar}}

-An **IIFE** (Immediately Invoked Function Expression) is a {{glossary("JavaScript")}} {{glossary("function")}} that runs as soon as it is defined.


At first read, this sounds to me as a reader like

function implicitlyRunsImmediatelyForSomeReason() {}

rather than an explicit pattern.

Looks accurate.

60x20 · 2024-12-25T16:07:48Z

files/en-us/glossary/iife/index.md

-important to limit the number of global variables. If we have some initiation code that we don't need to use
-again, we could use the IIFE pattern. As we will not reuse the code again, using IIFE in this case is better than
+important to limit the number of variables at the top level of a script
+(this advice [does not apply to module code](/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_classic_scripts)).


I don't think leaving out modules is a good idea, since it implies that it's okay to pollute the module scope (and pollute implies that the scope will keep variables that are no longer needed).

const year2000 = new Date('2000'); const currentDate = new Date(); export const isAfterYear2000 = currentDate > year2000;

export const isAfterYear2000 = (() => { const year2000 = new Date('2000'); const currentDate = new Date(); return currentDate > year2000; })();

There's a critical conceptual difference between "I want to avoid an intermediate variable for all the reasons you might ordinarily want to avoid an intermediate variable" and "if I create an intermediate variable here it will be a global variable" (which applies to top level of scripts only). My goal is to convey that difference.

Do you have a suggestion how I might communicate that better? I.e. to communicate that if it's not the top level of a script, this is still a useful pattern, but it doesn't solve nearly as catastrophic a problem as the script global variable problem.

It doesn't look necessary to mention modules when the focus is already on the global namespace. Though it's true the advice is more lenient with modules.

60x20

Looks good without the exclusion of modules.

60x20 · 2024-12-26T12:16:48Z

files/en-us/glossary/iife/index.md

+// IIFE being used to initialize a variable
+const value = (() => {
+  const randomValue = Math.random();
+  if (randomValue > 0.5) {


Suggested change

if (randomValue > 0.5) {

if (randomValue >= 0.5) {

Nitpicking but for an even distribution, the true branch should include the 0.5 value.
Range for the false branch: 0 <= x < 0.5
Range for the true branch: 0.5 <= x < 1

60x20 · 2024-12-26T12:22:45Z

files/en-us/glossary/iife/index.md

@@ -6,45 +6,74 @@ page-type: glossary-definition

 {{GlossarySidebar}}

-An **IIFE** (Immediately Invoked Function Expression) is a {{glossary("JavaScript")}} {{glossary("function")}} that runs as soon as it is defined.


Looks accurate.

60x20 · 2024-12-26T12:50:35Z

files/en-us/glossary/iife/index.md

 ```

 It is a design pattern which is also known as a {{glossary("Self-Executing Anonymous Function")}} and contains two major parts:

-1. The first is the anonymous function with lexical scope enclosed within the [grouping operator](/en-US/docs/Web/JavaScript/Reference/Operators/Grouping) `()`. This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
-2. The second part creates the immediately invoked function expression `()` through which the JavaScript engine will directly interpret the function.


Agreed since it doesn't have to be anonymous or even enclosed within (). And the scope the function expression creates does not belong to the enclosing ():

const [uncleDavidStr, uncleDavidFunc] = function uncleDavidFunc() { return ['Uncle David', uncleDavidFunc]; }();

(uncleDavidFunc, function uncleDavidFunc() { })(); // ReferenceError: uncleDavidFunc is not defined

Josh-Cena · 2025-01-03T21:12:45Z

This page is getting too long. In general glossary entries should try to be a few paragraphs. I will try to move this to the JS reference instead.

Josh-Cena · 2025-01-03T22:23:29Z

Moved the examples around. @kirkwaiblinger @60x20 WDYT?

kirkwaiblinger · 2025-01-03T22:38:12Z

files/en-us/web/javascript/reference/operators/function/index.md

+    };
+  })(balance);
+
+const firstAccount = makeWithdraw(100); // "I will do bad things with your money"


neither here nor there really, but I really dislike this example

The specific code example is hard to follow and just.... weird 😆

I'm not sure this use pattern in general is that useful especially with #private class members these days. But I could be wrong about this

It is a bit weird, but this is exactly how modules work, so I think it's still useful, at least not any less than the for loop scoping example below. We already said that "Many traditional use cases of IIFEs have been obsoleted by new syntax features such as modules and block-scoped declarations", so I'd like to keep this for now.

kirkwaiblinger · 2025-01-03T22:41:53Z

@Josh-Cena I'm happy!

Josh-Cena

👍 Thanks a lot!

kirkwaiblinger force-pushed the iife-docs branch from dda2933 to 709613a Compare December 24, 2024 21:47

github-actions bot added Content:JS JavaScript docs Content:Glossary Glossary entries labels Dec 24, 2024

kirkwaiblinger changed the title ~~lots of iife writeup~~ improve IIFE docs Dec 24, 2024

github-actions bot added the size/m [PR only] 51-500 LoC changed label Dec 24, 2024

kirkwaiblinger force-pushed the iife-docs branch 2 times, most recently from d2ffb51 to 3e917eb Compare December 24, 2024 22:01

lots of iife writeup

8b04261

kirkwaiblinger force-pushed the iife-docs branch from 3e917eb to 8b04261 Compare December 24, 2024 22:02

kirkwaiblinger marked this pull request as ready for review December 24, 2024 22:03

kirkwaiblinger requested review from a team as code owners December 24, 2024 22:03

kirkwaiblinger requested review from Josh-Cena and hamishwillee and removed request for a team December 24, 2024 22:03

kirkwaiblinger commented Dec 24, 2024

View reviewed changes

60x20 reviewed Dec 25, 2024

View reviewed changes

60x20 reviewed Dec 26, 2024

View reviewed changes

Reorg files

5695bc4

kirkwaiblinger commented Jan 3, 2025

View reviewed changes

Josh-Cena approved these changes Jan 4, 2025

View reviewed changes

Josh-Cena merged commit 9a7e014 into mdn:main Jan 4, 2025
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improve IIFE docs #37361

improve IIFE docs #37361

kirkwaiblinger commented Dec 24, 2024

github-actions bot commented Dec 24, 2024 •

edited

Loading

kirkwaiblinger Dec 24, 2024

60x20 Dec 26, 2024

kirkwaiblinger Dec 24, 2024 •

edited

Loading

60x20 Dec 26, 2024

60x20 Dec 25, 2024

kirkwaiblinger Dec 25, 2024

60x20 Dec 25, 2024

60x20 left a comment

60x20 Dec 26, 2024

60x20 Dec 26, 2024

60x20 Dec 26, 2024

Josh-Cena commented Jan 3, 2025

Josh-Cena commented Jan 3, 2025

kirkwaiblinger Jan 3, 2025

Josh-Cena Jan 4, 2025

kirkwaiblinger commented Jan 3, 2025

Josh-Cena left a comment

		@@ -6,45 +6,74 @@ page-type: glossary-definition

		{{GlossarySidebar}}

		An IIFE (Immediately Invoked Function Expression) is a {{glossary("JavaScript")}} {{glossary("function")}} that runs as soon as it is defined.

improve IIFE docs #37361

improve IIFE docs #37361

Conversation

kirkwaiblinger commented Dec 24, 2024

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kirkwaiblinger Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

60x20 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Josh-Cena commented Jan 3, 2025

Josh-Cena commented Jan 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kirkwaiblinger commented Jan 3, 2025

Josh-Cena left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 24, 2024 •

edited

Loading

kirkwaiblinger Dec 24, 2024 •

edited

Loading