20201001 Obejct문제 리팩토링

2020 10 02 스터디를 위한 블로그 게시물입니다.

Object(3)문제 리팩토링하기.
최대한 for in, forEach를 사용했고, 기존 사용하던 switch문을 제거하는 방향으로 진행.

처음에 작성한 코드

const getExamResult = (scores, requiredClasses) => {
  const result = {}
  for(let i=0;i<requiredClasses.length;i++){
    result[requiredClasses[i]] = 0;
  }
  for(key in scores){
    const value = scores[key];
    switch(value){
      case 'F':
        result[key] = 0;
        break;
      case 'D':
        result[key] = 1;
        break;
      case 'D+':
        result[key] = 1.5;
        break;
      case 'C':
        result[key] = 2;
        break;
      case 'C+':
        result[key] = 2.5;
        break;
      case 'B':
        result[key] = 3;
        break;
      case 'B+':
        result[key] = 3.5;
        break;
      case 'A':
        result[key] = 4;
        break;
      case 'A+':
        result[key] = 4.5;
        break;
      default:
        result[key] = 0;
    }
  }
  return result;
}

switch문으로 인해 길이가 길어짐.
그리고 문제를 분리해서 푼 것이 아니라, 1번과 2번을 합쳐 뭔가..
야매로운 풀이가 되어서 좀 더 간결한 방식은 없을까 고민

1차 리팩토링 코딩 결과

const grades = ['A+','A','B+','B','C+','C','D+','D','F'];
const scores = [4.5,4,3.5,3,2.5,2,1.5,1,0];

const subjects = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
};

const requiredSubjects = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];

const newSubjects = Object.entries(subjects);
for(let i in grades){
  newSubjects.forEach(subj=>{
    if(subj[1] == grades[i]){
      subj[1] = scores[i]
    }
  })
} 

const entries = new Map(newSubjects);
const obj = Object.fromEntries(entries);

문제 전체를 푼 건 아니고, 1번 문제만 푼 결과이다.
entries라는 인스턴스를 제작했고, fromEntries라는 메소드를 사용해 객체로 변환시켰다.
코드의 길이는 짧아졌지만, Map이라는 클래스를 모를 경우 이게 무엇인지 알 수 없다는 단점이 존재.
아직까지의 과정에서는 해당 클래스를 학습하지 않았기 때문에,
다른 방식으로 코드를 다시 짜보기로 결정.

2차 리팩토링 결과

const grades = ['A+','A','B+','B','C+','C','D+','D','F'];
const scores = [4.5,4,3.5,3,2.5,2,1.5,1,0];
const subjects = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
};
const requiredSubjects = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];

for(let sub in subjects){
  grades.forEach((grade,index)=>{
  // forEach를 쓴 이유는 index가 필요해서!
  // indexOf를 대신 사용할 수 있다 근데 한 번의 더 과정을 거쳐야하는 단점이 있긴 할듯..
    if(subjects[sub] == grade){
      subjects[sub] = scores[index]
    }
  })
};

requiredSubjects.forEach(require=>{
  const subjectKeys = Object.keys(subjects);
  if(!subjectKeys.includes(require)){
    subjects[require] = 0;
  }
});

switch문에 비해 직관성은 떨어졌을지도 모른다는 생각이 들었다.
하지만 해당 챕터에서 학습한 for in, forEach, Object.keys와 object에 존재하지 않는 key, value pair을 삽입하는 방법 등을 이용했기 때문에 매우 만족한다. :)

최종 결과물

const getExamResult = (subjects,requiredSubjects) =>{
  const scores = [4.5,4,3.5,3,2.5,2,1.5,1,0];
  for(let sub in subjects){
    grades.forEach((grade,index)=>{
    // forEach를 쓴 이유는 index가 필요해서!
    // indexOf를 대신 사용할 수 있다 근데 한 번의 더 과정을 거쳐야하는 단점이 있긴 할듯..
      if(subjects[sub] == grade){
        subjects[sub] = scores[index]
      }
    })
  };

  requiredSubjects.forEach(require=>{
    const subjectKeys = Object.keys(subjects);
    if(!subjectKeys.includes(require)){
      subjects[require] = 0;
    }
  });
  
  return subjects;
}

console.log(getExamResult(subjects,requiredSubjects))
/*
{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0
}
*/

오늘의 느낀점

세상에 존재하는 코드는 다양하고, 이 코드가 맞다 저 코드가 맞다 라고 생각할 필요가 없다고 생각하게되었다.
이전에 jQuery를 (용량적 부분에서) 사용하는것이 맞는가 틀린가 등에 대해 인터넷의 속도가 발전된 한국에서는 사실상 큰 차이가 없다! 라고 해주신 말씀이 떠올랐다.
실제로 인터넷의 속도가 빠르지 않은 경우라면 모를까, 일반적 경우라면 리액트를 사용하는것이 훨씬 용량이 커지기 때문에..?
이런 방법으로 저런 방법으로 리팩토링을 진행하고, 스터디 내용을 어떻게 더 자세하고 쉽게 설명해줄 수 있을까 하고 고민하는 과정이 매우 즐거웠다 :)
비록 내 추석과 가족과의 추억은 조금 사라져버렸지만, 이건 이대로 또 즐거운 추억이 될 수 있을 것 같다.
우리 13기 똑순이 스터디 힘퐁힘 합시다♥

재수정 코드

const grades = ['A+','A','B+','B','C+','C','D+','D','F'];
const scores = [4.5,4,3.5,3,2.5,2,1.5,1,0];
const subjects = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
};
const requiredSubjects = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];
function getExamResult(subjects,requiredSubjects){
  for(let sub in subjects){
    grades.forEach((grade,index)=>{
    // forEach를 쓴 이유는 index가 필요해서!
    // indexOf를 대신 사용할 수 있다 근데 한 번의 더 과정을 거쳐야하는 단점이 있긴 할듯..
      if(subjects[sub] == grade){
        subjects[sub] = scores[index]
      }
    })
  };

  requiredSubjects.forEach(require=>{
    if(!(require in subjects)) subjects[require] = 0;
  })
    return subjects;
  }
console.log(getExamResult(subjects,requiredSubjects))

requiredClass의 el이 subjects에 있는지 없는지 확인하는 로직을 조금 수정했다.
in operator를 사용하면 좀 더 빠르고 쉽게 체크할 수 있었다.