📢 재귀 함수

재귀 함수란 ? 자기 자신을 호출하는 함수를 말한다.

재귀를 사용하기 적합한 상황

• 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
• 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우
• 반복문으로 작성된 코드를 더욱 간결하고 이해하기 쉽게 작성하고 싶은 경우

코드 구현하기

• 문제를 작게 쪼개는 것 ⇒ recursive case
• 재귀의 탈출 조건 ⇒ base case

function arrSum(arr) {
// base case : 문제를 더 이상 쪼갤 수 없는 경우 (재귀의 기초)
  if (arr의 길이가 0인 경우) {
    return 0;
  }

  // recursive case : 그렇지 않은 경우
  return 요소1 + arrSum([요소2, ... , 요소n]);
}

---

📢 JSON

JavaScript Object Notation의 줄임말
데이터 교환을 위해 만들어진 객체 형태의 포맷이다.

전송 가능한 조건 (transferable condition)

• 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다.
• 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다.

JSON.stringify : 객체를 JSON으로 변환합니다.
stringify과정 - 직렬화(serialize)

let getMessage = JSON.stringify(message)
console.log(getMessage) 
// `{"name" : "kimcoding", "message" : "hello"}`
console.log(typeof(getMessage))
// `string`

JSON.parse : JSON을 객체로 변환합니다.
JSON.parse과정 - 역직렬화(deserialize)

let output = `{"name" : "kimcoding", "message" : "hello"}`
let obj = JSON.parse(output)
console.log(obj)
/*
 * {
 * name: "kim",
 * message: "hello",
 * }
 */
 console.log(typeof(obj))
 // `object`

---

과제1 - JSON.stringify 🔍

function stringifyJSON(obj) {
  // your code goes here
  // 1. number, boolean, null 
  // 2. string
  // 3. 배열 [] array 
  // 4. 객체 {} object
  if(typeof obj === "number" || typeof obj === "boolean" || obj === null) {
    return `${obj}`;
  }
  if(typeof obj === "string") {
    return `"${obj}"`;
  }
  if(Array.isArray(obj) === true) {
    let result = '';
    for(let i of obj) {
      result = result + stringifyJSON(i) + ",";
    }
    result = result.slice(0, result.length -1); // 마지막 쉼표 지우기
    return `[${result}]`;
  }
  if(typeof obj === 'object') {
    let result = ''; 
    for(let i in obj) {
      if(typeof obj[i] === 'function' || obj[i] === undefined) {
        return "{}";
      }
      result = result + stringifyJSON(i) + ":" + stringifyJSON(obj[i]) + ",";
    }
    result = result.slice(0, result.length -1) // 마지막 쉼표 지우기
    return `{${result}}`; 
  }
};

---

과제2 - Tree UI ☕

html구조

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.
  // li 
  // input - checkbox
  // span - name
  // ul 

  for(let i = 0; i < menu.length; i++) { 
    const li = document.createElement('li');
    if(menu[i].children) {  
      const input = document.createElement('input');
      input.type = 'checkbox';

      const span = document.createElement('span'); 
      span.textContent = menu[i].name;

      const ul = document.createElement('ul');
      li.append(input, span, ul); 
      currentNode.append(li); 

      createTreeView(menu[i].children, ul) 

    } else {
      li.textContent = menu[i].name;  
      currentNode.append(li);
    }
  }
};

---

학습을 마치고 나서, 📖

처음에 너무 당황했다. 개념을 봐도 이해를 못 하였는데, 문제를 풀어야 하는 상황에 놓여 걱정이 많이 들었다. 오늘 안에 다 할 수 있을지.. 인터넷 검색을 해보기도 하고 페어와 서로 공유하면서 어찌어찌 풀어냈다. 또 다른 새로운 함수를 배우게 돼서 새롭지만 어려운 부분이라 복습을 해야겠다는 생각이 들었다. 재귀 관련된 코테 문제를 공유 받아 따로 풀어볼 예정이다.