[자료구조/알고리즘] 재귀 (2)

과제1 - JSON.stringigy

재귀함수를 이용해 JavaScript 값이나 객체를 JSON 문자열로 변환하는 메서드인 JSON.stringify를 구현한다.

JSON의 기본 규칙

	자바스크립트 객체	JSON
키	따옴표 없이 쓸 수 있음 { key : "property" }	반드시 쌍따옴표를 붙여야 함 '{"key":"property"}'
문자열 값	작은따옴표도 사용 가능 { "key" : 'property' }	반드시 큰따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이 공백	사용 가능 {"key" : 'property'}	사용 불가능 '{"key":"property"}'
키-값 쌍 사이 공백	사용 가능 { "key":'property', num:1 }	사용 불가능 '{"key":"property","num":1}'

조건 설정 시, 고려할 사항

• JSON.stringify(null) === "null"
• JSON.stringify("null") === '"null"'

• typeof null === 'object'
• typeof [] === 'object'
• typeof {} === 'object'

• base case : primitive type
• recursive case : reference type
  
  

function stringifyJSON(obj) {
  if (obj === null || typeof obj === 'boolean' || typeof obj === 'number' ) return String(obj);

  if (typeof obj === 'string') {
    return `"${obj}"`
  }

  if (Array.isArray(obj)) {
    let array = [];
    for (let el of obj) {
      array.push(stringifyJSON(el))
    }
    return `[${array}]`;
  }

  if (typeof obj === 'object') {
    let object = '';
    for (let key in obj) {
      if (typeof obj[key] === 'undefined' || typeof obj[key] === 'function') return "{}"
      object = object + stringifyJSON(key) + ":" + stringifyJSON(obj[key]) + ',';
    }
    object = object.slice(0, -1);
    return `{${object}}`;
  }
};

---

과제2 - Tree UI

JavaScript DOM과 재귀를 사용하여 아래의 HTML과 같은 구성의 을 UI를 만들어보자!

<!-- 생략 -->

<ul id="root">
  <li>
    <input type="checkbox" checked />
    <span>1학년</span>
    <ul>
      <li>
        <input type="checkbox" />
        <span>1반</span>
        <ul>
          <li>김가나</li>
          <li>김다라</li>
          <li>김마바</li>
          <!-- 생략 -->
        </ul>
      <li>
    </ul>
    <ul>
      <li>
        <input type="checkbox" />
        <span>2반</span>
        <ul>
          <li>김사아</li>
          <li>김자차</li>
          <li>김카타</li>
          <!-- 생략 -->
        </ul>
      <li>
    </ul>
    <!-- 생략 -->
  </li>
  <!-- 생략 -->
</ul>
  
<!-- 생략 -->

javaScript 데이터 구조

const = students = [
  {
    name: '1학년',
    children : [
      {
        name: '1반',
        children: [
          { name: "김가나" },
          { name: "김다라" },
          { name: "김마바" },
       // 생략
        ],
      },
      {
        name: '2반',
        children: [
          { name: "김사아" },
          { name: "김자차" },
          { name: "김카타" },
       // 생략
        ],
      },
  // 생략
]

조건 설정 시, 고려할 사항

• base case : children 속성이 없는 경우
  ➡️ <li> 태그만 생성하고 상위 <ul> 태그에 append
• recursive case : children 속성이 있는 경우
  ➡️ <li> 태그 생성하고 상위 <ul> 태그에 append,
  ➡️ <li> 태그 자식 요소로 <input>, <span>, <ul> 태그를 append
  
  

const root = document.getElementById('root');
function createTreeView(students, currentNode) {

  for (let i = 0; i < students.length; i++) {
    const li = document.createElement("li");
    
    // children 프로퍼티가 존재 할 때 (recursive case)
    if (students[i].children) {
      const input = document.createElement("input");
      input.type = "checkbox";
      const span = document.createElement("span");
      span.textContent = students[i].name;
      const ul = document.createElement("ul");

      li.append(input, span, ul);
      currentNode.append(li);

      createTreeView(students[i].children, ul);
    }

    // children 프로퍼티가 없을 때 (base case)
    if (!students[i].children) {
      li.textContent = students[i].name;
      currentNode.append(li);
    }
  }
}

createTreeView(students, root);