How do Anonymous Functions and IIFE prevent naming collisions?

Question

Note: this isn't exactly a question about scope.

I'm reading a book that says that many people can add scripts to a web page, and for that reason, having global variables can cause naming collision. For example, say one person adds this script:

  <script>
    function showAreaOfWall(height, width) {
      let area = height * width
      return `<h1>Area: ${area}</h1>`
    }

    let message = showAreaOfWall(5, 20)
    document.write(message)
  </script>

The script above has a global variable called message, which can't be declared again anywhere else. However, say someone does exactly that. Someone adds in another script that declares a variable with the same name.

  <script>
    function welcomeMessage(user) {
      return `<h1>Welcome, ${user}!</h1>`
    }

    let message = welcomeMessage('Luke')
    document.write(message)
  </script>

As expected, we get an error:

Uncaught SyntaxError: Identifier 'message' has already been declared

Now my question is, how does an Anonymous Function or IIFE prevent this from happening?

This is how I'm thinking about it. Let's see what happens if both persons used IIFEs in their scripts:

  <script>
    document.write(function(height, width) {
      let area = height * width
      return `<h1>Area: ${area}</h1>`
    }(5, 20))
  </script>

  <script>
    document.write(function(user) {
      return `<h1>Welcome ${user}!</h1>`
    }('Luke'))
  </script>

That one works perfectly. Cool. No name collisions. But it defeats the whole purpose of functions, because these functions aren't even reusable anymore, I'm not storing them anywhere...

Ok, those were IIFEs. But also, I can't wrap my head around how Anonymous Functions would prevent naming collisions. Both scripts can still assign an unnamed function to a variable with the same name.

How am I looking at this wrong?

That's not the whole purpose of functions. Functions have 1001 uses. — Charlie Bamford, Dec 01 '20 at 22:56
Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Andy, Dec 01 '20 at 22:58
No, I'm not asking about scope. I know about that. I just don't see how Anonymous Functions or Immediately Invoked Function Expressions help with preventing name collisions. And how it feels to me like they defeat the purpose of functions which is to be reusable pieces of code. But someone just pointed out that "that's not the whole purpose of functions". So, that's a start — Gabriel Sales, Dec 01 '20 at 23:02
Does this answer your question? [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Matt Morgan, Dec 01 '20 at 23:08
It's entirely about scope. They prevent collisions by putting the variables in different scopes! — Quentin, Dec 01 '20 at 23:08

Quentin · Answer 1 · 2020-12-01T23:09:17.677

It doesn't matter if the function is anonymous or named. It doesn't matter if it is immediately invoked or not.

A function creates a new scope.

Your edit:

Note: this isn't exactly a question about scope.

It's entirely about scope. Using different scopes is how collisions are prevented.

A variable declared (with let, const or var) inside a function is a different variable to one declared in a different function or outside of any function, even if it has the same name.

That said, this was how we handled scoping of variables in ES5.

In modern JavaScript we use either blocks or modules.

Modules have similar scoping rules to functions, and blocks are the scoping level for let and const.

{
    let foo = 1;
    document.write(foo);
}


{
    let foo = 3;
    document.write(foo);
}

How do Anonymous Functions and IIFE prevent naming collisions?

1 Answers1