210823 개발기록: javascript 로직 변경으로 코드 줄이기

이걸 리팩토링이라 부르는지 모르겠지만 (오히려 클린코드에 가깝나?),

백엔드 로직 처리 코드를 대량으로 줄였다.

 

 

☑️ Old way

여기서 코드가 길어진 이유는, MBTI 형식으로 데이터를 리턴하기 위해 "E, I", "N, S", "F, T", "P, J" 순서로 데이터를 정렬하기 때문이다. 여기서는 정렬 대신, resultObj 라는 객체를 만들어, MBTI 순서를 하드코딩 하는 형식으로 구현했다.

// old way
saveAnswers(resultArray) {

    let mbti = {}
    resultArray.forEach(result => {
      mbti[result] = (mbti[result] || 0) + 1
    })

    const resultObj = {
      "IE": '',
      "SN" : '',
      "TF" : '',
      "JP" : ''
    }

    const switchResult = (key) => {
      switch (true) {
        case ["I", "E"].includes(key):
          resultObj.IE = key
          break
        case ["S", "N"].includes(key):
          resultObj.SN = key
          break
        case ["T", "F"].includes(key):
          resultObj.TF = key
          break
        case ["J", "P"].includes(key):
          resultObj.JP = key
          break
      }
    }
    
    for (let key in mbti) {
      if (mbti[key] > 1) {
        switchResult(key)
      }
    }
  }

 

 

✅  New way

개선된 코드에서는, MBTI 유형별 순서대로 정렬된 배열을 미리 하드코딩 해뒀다. 위 방법의 객체형식 대신이라고 생각하면 된다.

이 과정에서 javascript 의 set() 자료형을 사용했다. 평소 안쓰던 자료형이지만 효과는 강력했고, 덕분에 코드의 양을 확 줄일 수 있었다.

// new way
saveAnswers(resultArray) {
    const MBTI = ["E", "I", "N", "S", "F", "T", "P", "J"]
    const countElements = (array, x) => array.filter(arr => x === arr).length
    const data = new Set(resultArray.filter(result => countElements(resultArray, result) > 1))
    let finalResult = ''
    MBTI.forEach(type => {
      if (data.has(type)) {
        finalResult += type
      }
    })
}

 

처음 old way 방식으로 코드를 짠 후, 코드가 기능에 비해 길다는 느낌이 계속 들었다. 요즘 switch(true) 방식에 꽂혀 자꾸 사용하려다 보니 이렇게 된 것 같다. 코드를 줄일 궁리를 하면서 set() 을 도입하였고, mbti 순서를 세팅하기 위해 미리 하드코딩으로 MBTI 배열을 만들어 코드양을 줄일 수 있었다.