0
document.getElementById('game').addEventListener('click', function startGame() {
  console.log('Game is starting!'); // name of the function is given just for debugging purposes
});

What is the scope of the function startGame? Where is this function accessible(Where it can be called) ?

Tanmay Lodha
  • 27
  • 6
  • No this snippet is not inside another function. Now if this is a global function then when I am calling it , why console is throwing this error - app.js:136 Uncaught ReferenceError: startGame is not defined – Tanmay Lodha May 20 '20 at 17:34
  • The name of inline named functions are only available inside the function, IIRC. Or something weird like that. – Dave Newton May 20 '20 at 17:43
  • @DaveNewton Explain in detail. – Tanmay Lodha May 20 '20 at 17:45
  • 1
    @TanmayLodha Both links do contain the answer: [_“Named function expressions are scoped only to the expression itself”_](https://stackoverflow.com/a/500459/4642212); [_“Inline function names act somewhat like variable names, and their scope is limited to the function within which they’re declared”_](https://stackoverflow.com/a/17447477/4642212). If there’s something you don’t understand about these answers, please clarify what exactly you’re having trouble with. – Sebastian Simon May 20 '20 at 17:52
  • 1
    @TanmayLodha That's about as much detail as is necessary (or possible). That's an inline-function (a function declared within a statement), its name is available only within the function being declared (e,g., to allow for recursion). – Dave Newton May 20 '20 at 18:55
  • Yeah Got it now – Tanmay Lodha May 21 '20 at 17:29
  • Why inline named function allows multiple event listeners? For eg `function event() { document.getElementById('btn2').addEventListener('click', function game() { print(); }); }` Now when event function is getting called, it is adding multiple event listeners on btn2 without removing the previous one. PS. It is not a anonymous function (here talking about function game) (if it would have been then multiple event listeners will be added because anonymous functions are not identical even if defined using the same unchanging code) – Tanmay Lodha May 22 '20 at 21:04
  • @TanmayLodha This has nothing to do with named or anonymous functions. `function () {}` or `function someName() {}` always create new functions, just like `[]` always creates a new array. The _reference_ has to be the same, not the name. You can still use anonymous functions for this: `const game = (0, function(){ print(); }); function event() { document.getElementById("btn2").addEventListener("click", game); }`. – Sebastian Simon May 22 '20 at 21:12
  • So every time the event function is called, it is creating a new function though with the same name and the same name is possible because of scope of inline named functions.? and the references to both the functions are different. – Tanmay Lodha May 22 '20 at 21:17
  • @TanmayLodha The same name is always possible. There’s no conflict in using the same name. `const func1 = function sameName() {}, func2 = function sameName() {};` is valid, and so is `const func3 = function sameName() { const func4 = function sameName() {}; }`, though inside `func4`, `sameName` refers to `func4`, not `func3`. `addEventListener` only cares about the object reference of the functions, not about their names. I can’t think of any API that actually compares function names. – Sebastian Simon May 22 '20 at 21:21
  • yeah but the references of all the functions are different i.e - const func1 ,func2, func3, func4. right? – Tanmay Lodha May 22 '20 at 21:26
  • @TanmayLodha Yes, exactly. – Sebastian Simon May 22 '20 at 21:39
  • See the below snippet `let game = function () { console.log('hello'); }; let newGame = game; console.log(newGame === game);` // this yields true keeping in mind that functions are objects so the reference of both the functions is different then why equality check is yielding true? – Tanmay Lodha May 22 '20 at 21:46
  • @TanmayLodha No, the reference is not different. You have only created a single function; you only have written `function () {` … `}` _once_. `let newGame = game;` doesn’t create new functions and it doesn’t copy functions. It just aliases them. See [Copy array by value](https://stackoverflow.com/q/7486085/4642212). – Sebastian Simon May 22 '20 at 21:54

0 Answers0