Как не дублировать код в функции типа Immediately Invoked Function Expression в JS?

Question

[Newer123]

Познакомился с типом такой функции как Immediately Invoked Function Expression.
Написал код, но не получается его оптимизировать и не писать одно и тоже дважды. Вот код:

const descriptionTextFunctions = (function () {

     const expand = () => {

          const dtTable = document.querySelector('.description_text');

          const dtMax = document.querySelector('.description_text-maximize-icon');

          const dtMin = document.querySelector('.description_text-minimize-icon');

          dtMax.addEventListener('click', function () {
               
dtTable.classList.remove('description_collapse');
               dtMax.classList.add('icon-hidden');
               dtMin.classList.remove('icon-hidden');
         })

     }


     const collapse = () => {
          const dtTable = document.querySelector('.description_text');
          const dtMax = document.querySelector('.description_text-maximize-icon');
          const dtMin = document.querySelector('.description_text-minimize-icon');

          dtMin.addEventListener('click', function () {
               dtTable.classList.add('description_collapse');
               dtMin.classList.add('icon-hidden');

               dtMax.classList.remove('icon-hidden');

         })
     }


     return {
          expand,

          collapse
    }
}());

И выносил эти переменные перед "expand", и добавлял в обьект, но все безуспешно и потом при загрузке страницы пишет ошибку, что не удалось получить элемент. Только при таком решении код заработал, но понимаю что это не оптимизированно.
Подскажите, пожалуйста, как оптимизировать код и не писать эти строки дважды?

Answer 1

[Чипекве]

Можно вынести получение элементов в функцию.

const descriptionTextFunctions = (function () {
    const getElements = () => {
        const dtTable = document.querySelector('.description_text');
        const dtMax = document.querySelector('.description_text-maximize-icon');
        const dtMin = document.querySelector('.description_text-minimize-icon');
        return [dtTable, dtMax, dtMin];
    }

    const expand = () => {
       const [dtTable, dtMax, dtMin] = getElements();
        dtMax.addEventListener('click', function () {
            dtTable.classList.remove('description_collapse');
            dtMax.classList.add('icon-hidden');
            dtMin.classList.remove('icon-hidden');
        })
    }

    const collapse = () => {
        const [dtTable, dtMax, dtMin] = getElements();
...

Comments

[Newer123]

То, что надо, спасибо большое. Удачи и успехов Вам :)