TIL(20.03.11)

코드스테이츠 4주차#3

<회고> 오늘은 stringfyJSON과 recursion에 대한 문제를 풀었다. stringfyJSON에 대한 개념과 적용 어떤식으로 사용이 되는지 알게 되는 계기였고 stringfyJSON이 어떤식으로 구현 되는지 직접 코딩 하면서 recursion에 대한 개념이 많이 흔들리고 적용하고 적용해도 헷갈렸는데 과제를 여러번 풀어보면서 해소가 되었다.

<오늘 배운 내용>😆

• stringfyJSON
• recursion

1.stringfyJSON

JSON이란??
JavaScript Object Notation의 약자로, 클라이언트와 서버가 간에 정보를 교환하기 위한 데이터 형태이다. 자바스크립트의 구문 형식을 따르지만 독립적인 데이터형이기에 다른 프로그래밍 언어 c, c++, 자바, 파이썬에서도 JSON은 활용 할 수 있다.

여기서 stringfyJSON은

• javascript의 값이나 객체를 json문자열로 반환 하는 것이다.
• 쉽게 말하자면 컴퓨터가 읽을 수 있도록 문자열로 바꾸어주는 것이라 할 수 있다.

function stringifyJSON(obj) {
  // obj 숫자와 불린 일 경우 
  if(typeof obj === 'number' || typeof obj === 'boolean'){
    return obj.toString();
  }
  // obj null인 경우
  if(obj === null){
    return 'null';
  }
  // 문자열인 경우 
  if(typeof obj === 'string'){
    return '"'+ obj + '"';
  }
  // obj 배열인 경우 
  if(Array.isArray(obj)){
    let arr = [];
    if (obj.length < 1 ){
      return '[]' ;
    }
    for(let i = 0 ; i < obj.length; i ++){
      arr.push(stringifyJSON(obj[i]));
    }
    return "[" + arr.toString() + "]";
  }
  // 객체 인 경우
  if(typeof obj === 'object'){
    let arr = []; 
    if(Object.keys(obj).length < 1 ){
      return '{}';
    }
    for(let key in obj){
      if(typeof obj[key] === "function" || typeof obj[key] === undefined){
        return '{}'
      }
      arr.push(stringifyJSON(key) + ":" + stringifyJSON(obj[key])) ;
    }
    return "{" + arr.toString() + "}" ;
  }
};

stringfyJSON에 대한 조건들을 재귀를 통해 반복해서 충족시키게 만들어 처리 한 코드다.
사실 잘 짠 코드인지는 모르겠지만 ㅎㅎ 잘 돌아가니 만족 😆😆

2.recursion

앞선 TIL에서도 재귀에 대해 다루고 팩토리얼과 피보나치를 사용한 예시도 들었었다.
재귀에서 가장 중요하다 생각하는 것은 콜백이 무한으로 되지 않도록 탈출 조건을 반드시 만들어 주는 것이다.

이번에는 DOM의 getElementByclassName의 함수를 직접 작성해 보았다.
DOM에 대한 내용이 많이 약했기 때문에 문제 조건인 document.body, element.childNodes, element.classList 을 사용해 작성하기 전에 다른 메소드들도 콘솔에 찍어보면서 DOM에 대해 익숙해진후 다시 문제를 접근하였다.

function getElementsByClassName(className) {
  let arr = [];
  let body = document.body;

  let check = function (body) {
    if (body.classList && body.classList.contains(className)) {
      arr.push(body)
    }
    if (body.hasChildNodes()) {
      for (let i = 0; i < body.childNodes.length; i++) {
        check(body.childNodes[i]);
      }
    }
  }
  check(body);
  return arr;
};

이 문제 또한 함수를 만들어 주어 재귀를 통해 조건을 만족하게 하였다. 처음에 콜백함수의 탈출조건을 작성 하는데 굉장히 애를 먹었지만 재귀를 통해 check함수가 실행 될 때 body를 body.childNode로 바꾸어 주는 과정을 통해 해결 하였다.