TIL_2020.04.17(금) - JSON.stringify, getElementsByClassName() 구현하기

JSON.stringify 구현하기

JSON.stringify를 직접 구현해조았다...
가장 어려웠던 부분은 역시나 재귀였는데 return 하는 값을 표현하는 부분이었다.

단편적으로 이야기 하면
Array가 input으로 주어졌을 경우에는
stringifyJSON([1, 'false', false]); // '[1,"false",false]'
Object가 input으로 주어졌을 경우에는
stringifyJSON({ x: 5 }); // '{"x":5}'
과 같은 결과를 반환한다.

function stringifyJSON(obj) {
  // 생략
  // obj가 배열일 때
  let newArr = [];
  if(Array.isArray(obj)){
    if(obj.length === 0){
      return '[]';
    }
    for(let i = 0; i < obj.length ; i++){
      newArr.push(stringifyJSON(obj[i]));
    }
    return '[' + newArr + ']';
  }
  //obj가 객체일 때
  if(typeof obj === 'object' && !Array.isArray(obj)){
    for(let key in obj){
      if(typeof obj[key] === 'function' ||obj[key] === undefined){
        return '{}';
      }
      newArr.push(stringifyJSON(key) + ':' + stringifyJSON(obj[key]));
    }
  }
  return  '{' + newArr + '}';

}

이런 코드를 작성했다.

그런데 예를 들어 [1, 'false', false]가 input으로 주어졌을 때 재귀를 돌면서 newArr로 들어가는 값은 ["1","'false'","false"]인데 return 해야 하는 값은 '[1,"false",false]'이기 때문에 어떤 식으로 return을 구성해야 하는지에 대한 의문이 들었다.

'[' + newArr.join() + ']'
이런식으로 구현을 했지만

'[' + newArr + ']'
사실 js에서는 배열은 위와 같이 해도 자동으로 string으로 형변환 된다고 한다...

+) 객체에서는 불가능
'{'+ {'a':'b'} +'}'
//"{[object Object]}"
//[object Object]는 객체를 string으로 강제로 형변환 하려할 때 나온다.

getElementsByClassName() 구현하기

function check(ele){
    if(ele.classList.contains(className)){
      newArr.push(ele);
    }
    
    if(ele.children.length !== 0){
      for(let i = 0; i < ele.children.length; i++){
        check(ele.children[i]);
      }
    }
  }

위 코드는 getElementsByClassName()의 안의 매개변수를 적은 것이다!

1. 일단 element에 classList를 조사하고 그게 매개변수로 들어온 className이 포함되는지 조사한다.
2. 포함되면 newArr에 push
3. 포함되지 않고 element의 자식이 있는지 조사한다.
4. 자식이 있으면 다시 element[i]로 재귀를 돌린다!

이번 문제는 특히 콘솔로 값을 많이 확인 해봤던 것 같다!