Zwracanie wartości z jednej metody do drugiej

Cześć. Jako, że spędzam godziny nad kodowaniem mojego mini projektu (pierwszego) i raczkuje w temacie napotkałem kolejny akurat 'mały' problem ale nie mogę znaleźć nigdzie odpowiedzi. Wiem, że mogę zwrócić value z jednej funkcji i wykorzystać w drugiej w ten sposób :

function passFromValue(){
    var x = 15;
    return x;  
}
function passToValue() {
    var y = passFromValue();
    console.log(y);//15
}
passToValue(); 

Mam teraz problem bo chce to zrobić z jednej metody do drugiej.

tu na samym początku mam return bo te metody chce wykorzystać w innym kontrolerze oddzielnym

return { 
countTotBoxes: () => {

tu coś tam robię i mam value (x)

return x
},

createTotBoxes: () => {

let abc = countTotBoxes();
console.log(abc)

}

Oczywiście wyrzuca mi błąd, że countTotBoxes jest nie zdefiniowane gdy chce wylogować abc. Jak mam się dostać w tej drugiej metodzie do wartości , która zwracam z pierwszej metody ?

Weź to pokaż w całości, bo może jestem tępa, ale nic z powyższego nie rozumiem.

I użyj narzędzi do formatowania kodu

console.log("ładnie sformatowany kod :)");

const domStrings = (() => {
    // STRINGS
    const strings = {
        mainContent: '.main-content',
        body: '.body',
        welcomeBtnText: '.welcome__btn--text',
        // MAIN SECTIONS
        welcome: '.welcome',
        welcomeBtn: '.welcome__btn',
        rules: '.rules',
        gameBoard: '.gameBoard',
        // SECTION WELCOME BUTTONS
        btnCl: '.welcome__btn-cl',
        stBtnClOne: 'welcome__btn-cl--1',
        stBtnClTwo: 'welcome__btn-cl--2',
        stBtnClThree: 'welcome__btn-cl--3',
        stBtnClFour: 'welcome__btn-cl--4',
        stBtnClFive: 'welcome__btn-cl--5',
        // SECTION RULES CONTAINERS
        cardWelcome: '.rules__card-welcome',
        cardOne: '.rules__card-one',
        cardTwo: '.rules__card-two',
        cardStartGame: '.rules__card-start-game',
        rulesTransform: '.rules__transform',
        // CARDS BUTTONS
        rulesBtn: '.rules__btn',
        cardWelcomeBtn: 'card-welcome__btn',
        cardOneBtn: 'card-one__btn',
        cardTwoBtn: 'card-two__btn',
        cardStartGameBtn: 'card-start-game__btn',
        // CARD START GAME
        btnMinus: '.card-start-game__btn-chose--minus',
        btnPlus: '.card-start-game__btn-chose--plus',
        choseContainer: 'chose-container',
        // GAME BOARD CHOICES
        btnsChoices: '.gameBoard__btn-choice',
        btnChoiceOne: 'gameBoard__btn-choice--1',
        btnChoiceTwo: 'gameBoard__btn-choice--2',
        btnChoiceThree: 'gameBoard__btn-choice--3',
        // COLORS
        orangeDark: '#da910b',
        orangeLight: '#f3b239',
        pinkDark: '#DC51E4',
        pinkLight: '#d16fd8',
        greenDark: '#2bdb2b',
        greenLight: '#5add5a',
        redDark: '#E45353',
        redLight: '#E16D6D',
        blueDark: '#2e92db',
        blueLight: '#02f3ff'
    }

    return {
        getDomStrings: () => {
            return strings;
        }
    }

})();

// UI CONTROLLER --------------------------------------------------------------------------------------------

const UIController = ((domStr) => {

    const dom = domStr.getDomStrings();

    const choseContainer = document.getElementById(dom.choseContainer);



    // ----------

    return {
        // 1.color changes
        changeThemeColor: (e) => {

            if (e.target.classList.contains(dom.stBtnClOne)) {

                document.documentElement.style.setProperty('--colorDark', dom.orangeDark);
                document.documentElement.style.setProperty('--colorLight', dom.orangeLight);

            } else if (e.target.classList.contains(dom.stBtnClTwo)) {

                document.documentElement.style.setProperty('--colorDark', dom.pinkDark);
                document.documentElement.style.setProperty('--colorLight', dom.pinkLight);

            } else if (e.target.classList.contains(dom.stBtnClThree)) {

                document.documentElement.style.setProperty('--colorDark', dom.greenDark);
                document.documentElement.style.setProperty('--colorLight', dom.greenLight);

            } else if (e.target.classList.contains(dom.stBtnClFour)) {

                document.documentElement.style.setProperty('--colorDark', dom.redDark);
                document.documentElement.style.setProperty('--colorLight', dom.redLight);

            } else if (e.target.classList.contains(dom.stBtnClFive)) {

                document.documentElement.style.setProperty('--colorDark', dom.blueDark);
                document.documentElement.style.setProperty('--colorLight', dom.blueLight);

            }
        },

        moveToNextSection: () => {
            document.querySelector(dom.welcome).style.visibility = 'hidden';
            document.querySelector(dom.welcome).style.opacity = '0';
            setTimeout(() => {
                document.querySelector(dom.rules).style.visibility = 'visible';
                document.querySelector(dom.rules).style.opacity = '1';
            }, 500);
        },

        exploreRules: (e) => {

            const rulesTransform = document.querySelector(dom.rulesTransform);

            if (e.target.classList.contains(dom.cardWelcomeBtn)) {
                rulesTransform.style.transform = 'translateX(-25%)'

            } else if (e.target.classList.contains(dom.cardOneBtn)) {
                rulesTransform.style.transform = 'translateX(-50%)'

            } else if (e.target.classList.contains(dom.cardTwoBtn)) {
                rulesTransform.style.transform = 'translateX(-75%)'

            }
            if (e.target.classList.contains(dom.cardStartGameBtn)) {
                // HIDE SECTION RULES AND SHOW GAMEBOARD
                // document.querySelector(dom.rules).style.visibility = 'hidden';
                // document.querySelector(dom.rules).style.opacity = '0';
                // document.querySelector(dom.gameBoard).style.visibility = 'visible';
                // setTimeout(() => {
                //     document.querySelector(dom.gameBoard).style.opacity = '1';
                // }, 1500);
                // CREATE TOTAL POINTS BOXES

            }

        },

        // HERE YOU CAN ADD TOT BOXES BEFORE YOU START GAME

        addTotBoxes: () => {


            if (choseContainer.children[3].children.length === 0) {
                const div = document.createElement('div');
                div.className = 'tot-point';
                choseContainer.children[3].appendChild(div);
            } else if (choseContainer.children[3].children.length === 1 && choseContainer.children[4].children.length === 0) {
                const div = document.createElement('div');
                div.className = 'tot-point';
                choseContainer.children[4].appendChild(div);
            } else if (choseContainer.children[4].children.length === 1 && choseContainer.children[5].children.length === 0) {
                const div = document.createElement('div');
                div.className = 'tot-point';
                choseContainer.children[5].appendChild(div);
            }
        },

        // HERE YOU CAN REMOVE TOT BOXES BEFORE START GAME

        removeTotBoxes: () => {


            if (choseContainer.children[5].children.length === 1) {
                choseContainer.children[5].children[0].remove()
            } else if (choseContainer.children[5].children.length === 0 && choseContainer.children[4].children.length === 1) {
                choseContainer.children[4].children[0].remove()
            } else if (choseContainer.children[3].children.length === 1) {
                choseContainer.children[3].children[0].remove()
            }
        },

        // COUNT HOW MANY TOT POINT BOXES YOU WANT CREATE

       countTotBoxes: () => {
            // CONVERT CHOISE CONTAINER TO ARRAY
            const choseContArr = Array.from(choseContainer.children);

            let counter = 0;

            choseContArr.forEach(function (el) {

                let num;


                if (el.children.length === 1) {
                    num = counter++
                }

            })

            console.log(counter);

            return counter;

        },

        // CREATE TOTAL POINTS BOXES
    createTotPointBoxes: () => {
            let check = countTotBoxes();
            console.log(check);
        }

    }

})(domStrings);

// APP CONTROLLER --------------------------------------------------------------------------------------------

const app = ((domStr, UIctrl) => {

    const dom = domStr.getDomStrings();

    // VARIABLES

    // BUTTONS
    // 1.section rules
    const rulesBtns = document.querySelectorAll(dom.rulesBtn);
    const cardWelcome = document.querySelector(dom.cardWelcome);
    const cardOne = document.querySelector(dom.cardOne);
    const cardTwo = document.querySelector(dom.cardTwo);
    const cardStartGame = document.querySelector(dom.cardStartGame);
    const rulesTransform = document.querySelector(dom.rulesTransform);
    // buttons minus plus
    const btnMinus = document.querySelector(dom.btnMinus);
    const btnPlus = document.querySelector(dom.btnPlus);
    // 2.section welcome
    const btnCl = document.querySelectorAll(dom.btnCl)
    const welcomeBtn = document.querySelector(dom.welcomeBtn);
    // 3. section game baord
    const choices = document.querySelectorAll(dom.btnsChoices);

    // SETUP EVENT LISTENERS

    const setupEventListeners = () => {
        // 1. listen for colors changes
        btnCl.forEach(el => el.addEventListener('click', function (e) {
            UIctrl.changeThemeColor(e);
        }))
        // 2. move to  next section
        welcomeBtn.addEventListener('click', function () {
            UIctrl.moveToNextSection();
        })
        // 3. move between rules
        rulesBtns.forEach(el => el.addEventListener('click', function (e) {
            UIctrl.exploreRules(e);
            // COUNT GAMESTART CARD BOXES
            UIctrl.countTotBoxes();

            UIctrl.createTotPointBoxes()

        }))
        // 4. add boxes before start game
        btnPlus.addEventListener('click', function () {
            UIctrl.addTotBoxes();
            // 5. remove boxes before start game

        })
        btnMinus.addEventListener('click', function () {
            UIctrl.removeTotBoxes();
        })

    }

    // FUNCTIONS

    // -----------------------------------------------------------------------------------------------

    return {
        init: () => {
            setupEventListeners();
            console.log('App in progress...');
        }
    }

})(domStrings, UIController);

app.init();

To jest mój pierwszy kod także proszę się nie smiać : ). Dopiero raczkuje.

W kontrolerze UIController mam objekt z metodami, który zwracam by wykorzystać je w App kontrolerze. W tym obiekcie mam dwie ostatnie metody countTotBoxes, która zwracam mi wartość counter, którą che wykorzystać w metodzie createTotPointBoxes.
Pytanie brzmi: w jaki sposób mam dostać się do tej wartości w mojej metodzie createTotPointBoxes ?

Dobra, poradziłem sobie w ten sposób:

Wprowadziłem argument.

  createTotPointBoxes: (nom) => {
            let check = nom;
            console.log(check);
        }

Następnie: zapisałem tą wartość w drugim kontrolerze i wprowadziłem ją jako parametr dla mojej metody createTotPoint.

 rulesBtns.forEach(el => el.addEventListener('click', function (e) {
            UIctrl.exploreRules(e);
            // COUNT GAMESTART CARD BOXES

            UIctrl.countTotBoxes();

            const haha = UIctrl.countTotBoxes();

            UIctrl.createTotPointBoxes(haha)

Tylko, że wydaje mi się, że to jest takie na około trochę. Lepiej gdybym mógł jakoś z jednej metody przerzucić parametr do drugiej. A tak to muszę zrobić w ten sposób w jaki tutaj zaprezentowałem.
Powtarzam. Jestem zielony. Więc pewnie o wiele rzeczy się tu można przyczepić ale jak ktoś mi wytknie błędy to poprawie :D

let abc = countTotBoxes() -> let abc = this.countTotBoxes()

Z tym że zamiast arrow functions musisz użyć normalnych metod (przynjamniej w tym rozwiązaniu):

const obj = {
  countTotBoxes() {
    const x = 42

    return x
  },

  createTotBoxes() {
    let abc = this.countTotBoxes()
    console.log(abc)
  },
}

O ja ! Pomogło !:D Dziękuję bardzo.
Czyli nie zawsze powinno się używać funkcji strzałkowych ? Czy przeważnie tak ?

Ja przeważnie stosuję, ale nie do metod - one mają swój dedykowany syntax. Oczywiście można się obyć bez this i uzyć arrow functions:

const UIController = () => {
  const countTotBoxes = () => {
    const x = 42

    return x
  }

  const createTotBoxes = () => {
    let abc = countTotBoxes()
    console.log(abc)
  }

  return {
    countTotBoxes,
    createTotBoxes,
  }
}

Można też użyć klas, można użyć czystych funkcji itd. Zależy od sytuacji i preferencji.