Ternary 연산자로 자바스크립트에서의 폴더 구조 표시

08 Nov 2023

javascript

폴더 구조는 많은 프로젝트에서 중요한 역할을 하며, 자바스크립트에서 폴더 구조를 표시하는 방법에 대해 알아보겠습니다.

자바스크립트에서 폴더 구조를 표시하는 가장 간단한 방법은 Ternary 연산자를 사용하는 것입니다. Ternary 연산자는 조건문을 간결하게 작성하는 데 도움을 주는 연산자입니다.

다음은 Ternary 연산자를 사용하여 자바스크립트에서 폴더 구조를 표시하는 예제 코드입니다.

const folder = {
  name: "프로젝트",
  files: [
    {
      name: "index.js",
      type: "파일"
    },
    {
      name: "폴더1",
      type: "폴더",
      files: [
        {
          name: "파일1.js",
          type: "파일"
        },
        {
          name: "파일2.js",
          type: "파일"
        }
      ]
    },
    {
      name: "폴더2",
      type: "폴더",
      files: [
        {
          name: "파일3.js",
          type: "파일"
        },
        {
          name: "파일4.js",
          type: "파일"
        }
      ]
    }
  ]
};

function displayFolder(folder) {
  console.log(folder.name);

  if (folder.files) {
    folder.files.forEach(file => {
      file.type === "폴더"
        ? displayFolder(file)
        : console.log(`- ${file.name}`);
    });
  }
}

displayFolder(folder);

위의 코드에서 displayFolder 함수는 주어진 폴더 객체를 재귀적으로 순회하면서 폴더와 파일을 출력합니다. Ternary 연산자(?)를 사용하여 폴더인지 파일인지를 확인하고, 폴더인 경우에는 다시 displayFolder를 호출하여 하위 폴더를 표시합니다.

위의 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

프로젝트
- index.js
폴더1
- 파일1.js
- 파일2.js
폴더2
- 파일3.js
- 파일4.js

위의 예제 코드를 참고하여 자바스크립트에서 폴더 구조를 표시하는 방법을 응용하여 프로젝트에서 유용하게 활용해보세요.

#JavaScript #폴더구조