How did the addEventListener act in this module

Question

Edited:

Sorry, I didn't make myself clear, now I re-think and re-write what I actually want to know:

When doing lesson from Odin project:

https://www.theodinproject.com/paths/full-stack-ruby-on-rails/courses/javascript/lessons/tic-tac-toe-javascript

I didn't understand why addEventListener in the gameBoard function auto-worked.

A simplified version of my code,


const gameBoard = (() => {

  window.addEventListener("click", () => {
    alert("2")
  })
})()

Why window.addEventListener auto-worked when I did nothing at all.

IIFE stands for Immediately Invoked Function Expression. So, the function expression is immediately invoked. The first snippet "works"; `gameArea` is created, and it has an `init` method available. It just doesn't alert "1" because `gameArea.init()` is never called. The second snippet "works" as well. It alerts "1" because `gameArea.init()` is called. Neither of those have anything to do with `addEventListener`. — Heretic Monkey, Jul 19 '21 at 13:29

kuroi neko · Answer 1 · 2021-07-20T00:48:01.927

People using that kind of code should be flogged to death with the complete works of Donald Knuth.

Decompiling that mess:

() => { alert("2") }
// an unnamed function that displays a popup. Let's call it Bob

window.addEventListener("click", Bob)
// This system call makes Bob the browser window click handler

() => { call Bob when you click on the browser window }
// yet another unnamed function invoking the above. Let's call it Bertie.

(Bertie)()
// Bertie gets called, setting Bob as the browser window click handler

const BoardGame = (Bertie)()
// BoardGame is assigned the return value of a function that doesn't provide any,
// thus being set to `undefined', which was also its previous value
// as a not yet defined variable, so this bit does not change much
// in the grand scheme of things

Instead of these hieroglyphs, you could have taken 3 minutes to give some names to these functions, like so:

function OnWindowClicked () {
    alert ("2");
}

function SetupWindowClickHandler () {
   window.addEventListener("click", OnWindowClicked);
}

const SomeUselessConstant = SetupWindowClickHandler();

There is exactly zero value to using lambda functions there, except maybe impressing the chicks with your mastery of pointlessly obfuscated JavaScript.

The idea behind using lambda functions is to avoid cluttering the toplevel namespace with lots of function names, but there are other ways to do so. And besides, you don't need any of this to program a tic tac toe.

Quite the opposite: it makes for horrible, unreadable code while you'd be better off with simple examples to get familiar with the basics of the language.

score -1 · Answer 2 · answered Jul 19 '21 at 13:22

Firstly you create a function and call it immediately.

const gameArea = (...)()

This function returns just another function called init. So you didn't run init, only anonymous function that is now in gameArea. To run init that you return you have to call it:

  gameArea.init()

How did the addEventListener act in this module

2 Answers2