학습 자료 Section 7 - 함수, 변수의 호이스팅에 업로드 되어 있는 문제 파일의 Reference Code입니다.

<aside> 💡 Reference Code는 수많은 풀이 방법 중 하나입니다! 참고용으로만 사용하시고, 본인의 성장을 위해 활용하시길 바랍니다.

</aside>

basic

const completeFolderTree = function (folderList) {
  for (let i = 0; i < folderList.length; i++) {
    folderList[i].addEventListener('click', (event) => {
      // 여기에서 작업하세요.
      const visibleTarget = event.target.parentNode;
      const lowerFile = visibleTarget.querySelector('.lower-folder');
      const visible = lowerFile.style.display;
      visibleTarget.classList.toggle('isOpen');
      if (visible === 'block') {
        lowerFile.style.display = 'none';
      } else {
        lowerFile.style.display = 'block';
      }
    });
  }
};

advanced

const createTree = function (folder, node) {
  // 여기에서 작업하세요.
  for (let i = 0; i < folder.length; i++) {
    const folderName = folder[i].name;
    const folderFile = folder[i].file;
    const lowerFolder = folder[i].folder;

    // 토글 생성
    const newToggle = document.createElement('details');

    // folder div 생성
    const newFolder = document.createElement('summary');
    newFolder.textContent = folderName;
    newToggle.appendChild(newFolder);
    node.prepend(newToggle);

    // 하위 file 생성
    if (folderFile) {
      for (let j = 0; j < folderFile.length; j++) {
        const newFile = document.createElement('li');
        newFile.textContent = folderFile[j];
        newToggle.appendChild(newFile);
      }
    }

    // 하위 folder 생성
    if (lowerFolder) {
      for (let k = 0; k < lowerFolder.length; k++) {
        createTree([lowerFolder[k]], newToggle);
      }
    } else {
      return;
    }
  }
};