stringifyJSON

/**
 * 단, undefined와 function은 JSON으로 생략되거나 null로 변환됩니다.
 *
 * 2. stringfyJSON은 아래와 같이 작동합니다.
 * - Boolean이 input으로 주어졌을 경우
 * stringifyJSON(true);                // 'true'
 * - String이 input으로 주어졌을 경우
 * stringifyJSON('foo');               // '"foo"'
 * - Array가 input으로 주어졌을 경우
 * stringifyJSON([1, 'false', false]); // '[1,"false",false]'
 * - Object가 input으로 주어졌을 경우
 * stringifyJSON({ x: 5 });            // '{"x":5}'
 * - undefined, function이 주어졌을 경우
 * stringifyJSON(undefined)            // undefined
 * stringifyJSON(function(){})         // undefined
 * stringifyJSON({ x: undefined, y: function(){} })   // '{}'
 *
 * 3. spec/stringifyJSONSpec.js의 stringifiableObjects 배열을 참고해서 테스트에서 어떤 input 값들이
 * 주어지고, 어떻게 stringify해 주어야 할지 생각해 보세요.
 */
function stringifyJSON(obj) {
  //1. null일 경우 문자열 null 반환
  if (obj === null) {
    return "null";
  }
  //2. 문자열일 경우 작은따옴표가 아닌 큰따옴표로 감싸준다.
  if (typeof obj === 'string') {
    return `"${obj}"`;
  }
  //4. 배열일 경우: Array.isArray
  if (Array.isArray(obj)) {
    let result = [];
    if (obj.length === 0) return '[]'; //4-1. 빈배열일때
    else { //4-2. 빈배열이 아닐때
      for (let item of obj) { 
        //4-2-1. for of로 반복문을 돌려서 JSON화 한 요소를 새로운 배열에 푸시한다.
        result.push(stringifyJSON(item));
        //,와 함께 result에 넣어준다. 문자열이 되니 이 방법이 가능해진다!
        //다른방법: result += stringifyJSON(item) + ',';
      }
      //"result"에 문자열 배열이라는 표식을 붙인다. "[]"
      //다른방법을 쓴다면 마지막에 붙는 ,를 슬라이스해주는 과정을 추가해야한다.
      return `[${String(result)}]`;
    }
  }
  //5. 객체일 경우
  if (typeof obj === 'object' && obj !== null) {
    let result = '';
    if (Object.keys(obj).length === 0) return "{}"; 
    //빈객체인지 알기 위해서는 object.keys를 활용해야 한다.
    else {
      for (let item in obj) {
        if (obj[item] === 'function' || obj[item] === undefined) return '{}'; //continue
        //result += `${stringifyJSON(item)}:${stringifyJSON(obj[item])},`
        let key = stringifyJSON(item);
        obj[item] = stringifyJSON(obj[item]);
        result = result + `${key}:${obj[item]}`;
        result = result + ',';
      }
      result = result.slice(0, -1);
      return `{${result}}`;
    }
  }
  //3. 이도저도 아니면 문자열화 한다.
  return String(obj);
};

tree UI

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.
  for (let item of menu) {
    if (item.type === 'group') {
      const li = document.createElement('li');
      currentNode.append(li);
      const input = document.createElement('input');
      input.type = 'checkbox';
      const span = document.createElement('span');
      span.textContent = item.name;
      const ul = document.createElement('ul');
      li.append(input, span, ul);

      createTreeView(item.children, ul);
    } else {
      const li = document.createElement('li');
      li.textContent = item.name;
      currentNode.append(li);
    }
  }
}

createTreeView(menu, root);