인턴의 첫번째 과제 코드 리뷰

이번 수요일, 첫 과제를 받았다.

 

과제 내용은 다음과 같다.

 

1. 내가 원하는 요소를 리턴받는 getEle 함수를 구현하시오

조건

- id는 #id

- class는 .class

- 없으면 그냥 tag를 return받음 "div"

- html collection으로 받을지 nodelist 로 받을지 파라메터 추가(live, static)

 

2. 내가 원하는 요소를 생성해서 리턴해주는 함수

조건

- 파라메터는 오브젝트 하나만 받는다.

- id, class, 속성 들이 다 추가되어서 return받는다.

 

내가 작성한 코드

// 1번
const select = function (selector, option) {
      const cleanedSelector = selector.substring(1, selector.length);
      //동적
      if (option === "live") {
         if (selector[0] === "#") {
            return document.getElementById(cleanedSelector);
         } else if (selector[0] === ".") {
            return document.getElementsByClassName(cleanedSelector);
         } else {
            return document.getElementsByTagName(selector);
         }
         //정적
      } else if (option === "static") {
         return document.querySelectorAll(selector);
      }
      else {
         throw new Error("wrong option! option must be 'live' or 'static'");
      }
   };

   const getEle = function (selector, option = "live") {
      if (selector !== "undefined") {
         if (typeof selector === "string" && typeof option == "string") {
            if (selector !== "") {
               return select(selector, option);
            } else {
               throw new Error("selector is empty");
            }
         } else {
            throw new Error("All parameter must be a string");
         }
      } else {
         throw new Error("selector is undefined");
      }
   };

// 2번
const create = function (obj) {
      var ele = document.createElement(obj.tagName);
      var trueAttribute = ["checked", "disabled", "hidden", "multiple"];
      // attribute의 value값이 string이 아니면 ( ex_obj... ) 에러
      for (attribute in obj) {
         if (typeof obj[attribute] !== "string") {
            throw new Error("attribute value must be a string")
         } else if (attribute !== "tagName") {
            //innerHTML을 넣어줌
            if (attribute === "innerHTML") {
               ele.innerHTML = obj[attribute];
            } else if (trueAttribute.indexOf(attribute) !== -1) {
               if (obj[attribute] === true || obj[attribute] === "true") {
                  ele.setAttribute(attribute, obj[attribute]);
               }
            } else {
               ele.setAttribute(attribute, obj[attribute]);
            }

const createEle = function (obj) {
      if (obj) {
         // obj가 {}인 경우
         if (Object.keys(obj).length !== 0) {
            if (typeof obj === "object") {
               //obj.constructor.toString().split(" ")[1]==="Array()";
               if (Array.isArray(obj)) {
                  throw new Error("it is array. parameter must be an object");
               } else {
                  return create(obj);
               }
               return obj;
            } else {
               throw new Error("parameter must be an object");
            }
         } else {
            throw new Error("empty object");
         }
      } else {
         throw new Error("no parameter");
      }
   };

 

그리고 내가 생각하지 못했던 부분에서 몇가지 고칠 점이 있어서 정리해 봤다.

1. else는 웬만하면 쓰지 마라 -> exception이 많이 발생
2. 같은 코드여도 보기 편하게 case를 나눠라

querySelectorAll은 #일때 .일때 상관없이 전부 querySelectorAll("#div")같은 형식으로 접근할 수 있어서 한 줄로 끝냈다. 그런데 오히려 querySelectorAll을 잘 모르는 다른사람이 읽었을때를 생각해서 if else로 나누는게 좋다고 한다.

else if (option === "static") {

            // # 이나 . 일때

            return document.querySelectorAll(selector);

 

↓

3. 한함수에서만 쓰는 함수면 내부함수로 쓰기

• 호출할때만 메모리에 올리니까 효율적임

위에서 나는 create 함수와 createEle함수를 나누었다.

하지만 create는 어차피 createEle함수에서만 사용하므로 createEle() 안에 create()를 정의하는 것이 좋다

 

 

4. undefined비교할때 typeof쓰기

 

if (selector !== "undefined")

 

                   ↓

 

if (typeof selector !== "undefined")

 

5. 데이터의 구조를 잘 생각해라

select하기 쉽도록 만들자.

obj = [{
        tagName : ""
        attribute : {
                class : ""
                id : ""
        }
},
{
        tagName : ""
        attribute : {
                class : ""
                id : ""
        }
}]