如何使用普通 JS 将 IIFE 中的变量重新使用到另一个变量？

Question

I wrote a function, initialize that immediately invokes two other functions within an object. I want to reuse the boardXs variable on toggleSymbol . Therefore, I thought of returning it to initialize 's scope hoping it would work.

const game = {
    initialize: (function() {
        (function hideX() {
            let boardXs = document.querySelectorAll('#ghost > div');
            for (let i = 0; i < boardXs.length; i++) {
                boardXs[i].innerHTML = " ";
            };
            return {boardXs};
        })(),

        (function toggleSymbol() {
            console.log(boardXs)
        })();
    });
}

As I run game.initialize() in the console, hideX works but an error is thrown in the console: "boardXs is not defined".

What is going on? How can I use variables amongst IIFEs? For the sake of learning, I'd like to continue using this IIFE setup, if possible.

Answer 1

You can do this if you are returning the object from hideX and use it in toggleSymbol .

If you are returning the object from the hideX , then you need to store the returned value in a variable and use that variable in scope or its nested scope.

 const game = { initialize: (function() { // Grab object in result const result = (function hideX() { let boardXs = document.querySelectorAll('#ghost > div'); for (let i = 0; i < boardXs.length; i++) { boardXs[i].innerHTML = " "; }; return { boardXs }; })(); // use here (function toggleSymbol() { console.log(result) })(); }) } game.initialize();

 <div id="ghost"> <div> </div> </div>