Object

드디어 위코드 1주차가 끝났습니다. replit을 통해 자바스크립트의 기본적인 개념들을 정리하고 문제 풀이를 진행하였습니다. 약 5개월 동안 나름대로 독학을 한다고 했지만, 실제로 문제를 풀어보면서 개념을 다시 정리하니 머릿속에서 복잡하게 엉켜진 것들이 완벽하진 않지만 조금은 자리를 잡아가는 느낌이 들었습니다.

그러나 아직 부족하다고 생각하는 개념들인 Class, Scope, Array method, Object 중 객체에 대해 추가적으로 블로그에 정리하려고 합니다. 실제 replit 문제를 통해 살펴보도록 합시다.

Assignment

아래 설명을 읽고 getExamResult 함수를 구현하세요.

인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.

• 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'

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

인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.

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

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요.

1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

• A+ ⇒ 4.5
• A ⇒ 4
• B+ ⇒ 3.5
• B ⇒ 3
• C+ ⇒ 2.5
• C ⇒ 2
• D+ ⇒ 1.5
• D ⇒ 1
• F ⇒ 0

2. requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다. 위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면, 다음과 같은 객체과 리턴됩니다. 요소간 순서는 다를수 있지만, 채점에 무관합니다.

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

풀이 방법(1)

const getExamResult = (scores, requiredClasses) => {
  const obj = new Object();
  for (let key in scores) {
    const value = scores[key];
    if (value === 'A+') {
      obj[key] = 4.5;
    } else if (value === 'A') {
      obj[key] = 4;
    } else if (value === 'B+') {
      obj[key] = 3.5;
    } else if (value === 'B') {
      obj[key] = 3;
    } else if (value === 'C+') {
      obj[key] = 2.5;
    } else if (value === 'C') {
      obj[key] = 2;
    } else if (value === 'D+') {
      obj[key] = 1.5;
    } else if (value === 'D') {
      obj[key] = 1;
    } else {
      obj[key] = 0
    }
  }
  
  for (let i = 0; i < requiredClasses.length; i++) {
    const keys = Object.keys(obj);
    if (!keys.includes(requiredClasses[i])) {
      obj[requiredClasses[i]] = 0;
    }
  }
  return obj;
}

처음에 풀이를 진행했던 방식입니다. 객체를 순회하는 방식은 for...in 구문을 사용하였고, 과목명과 학점이 있는 객체에 접근하는 것은 key라는 변수를 이용하였습니다.

변수를 이용해서 객체에 접근할 때에는 dot notation이 아닌 bracket notation이 필요하기 때문에 const value = scores[key]로 값을 받아올 수 있도록 하였습니다. 다만, 복잡한 if문을 사용하면서 조금 껄끄러웠지만 더욱 좋은 방법이 생각이 나지 않아서 위와 같이 해결했었습니다.

그리고 아래의 코드는 Object.keys(obj)라는 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드를 이용하여 반복문을 통해 문제를 해결하였습니다. 이 부분은 다음 풀이 방법과 크게 다르지 않지만, 좀 더 간단한 방식으로 문제를 해결할 수 있는 부분을 위코드 세션을 통해 학습하여 공유드리려 합니다.

풀이 방법(2)

const getExamResult = (scores, requiredClasses) => {
  const obj = new Object();
  const gradeMap = {
    "A+":4.5,
    "A":4,
    "B+":3.5,
    "B":3,
    "C+":2.5,
    "C":2.0,
    "D+":1.5,
    "D":1,
    "F":0
  }
  
  for (let key in scores) {
    const grade = scores[key];
    obj[key] = gradeMap[grade];
  }
    
  for (let i = 0; i < requiredClasses.length; i++) {
    const className = requiredClasses[i];
    if (obj[className] === undefined) {
      obj[className] = 0;
    }
  }
  return obj;
}

한 눈으로 봐도 객체에 대한 개념들을 충분히 활용한 코드로 보입니다. 먼저 2번째 줄에서부터 gradeMap이라는 객체를 활용하여 각각의 영어 학점을 숫자 학점으로 바꿀 수 있게 해주었습니다.

이렇게 "a는 b다."라는 어떤 값을 바꾸어주고 싶다고 할 때에는 바로 객체(Object)를 활용!

for (let key in scores) {
  const grade = scores[key];
  obj[key] = gradeMap[grade];
}

그리고 풀이 1번과 동일하게 for...in 구문을 사용하였고, 다만 점수 형식을 바꾸어주는 코드는 위처럼 새롭게 만든 obj라는 객체의 값에 gradeMap에 할당한 새로운 값을 할당해주도록 하는 코드를 작성하였습니다.

for (let i = 0; i < requiredClasses.length; i++) {
  const className = requiredClasses[i];
  if (obj[className] === undefined) {
    obj[className] = 0;
  }
}

다음으로는 두 번째로 들어오는 인자의 과목이 새로운 객체에 포함되어 있지 않다면 키값을 0을 주는 코드를 작성해야합니다. 반복문을 사용한 것은 위의 풀이와 동일하지만, Object의 메소드나 includes 등을 사용하지 않고 간단하게 풀이하였습니다.

먼저 className(과목명)이라는 변수에 2번째 인자의 배열의 요소를 for문을 통해 변수에 할당해줍니다. 그리고 그 값이 새로운 배열(obj)에 값이 없다면, 바로 undefined라면 여기에 0을 할당해주는 것입니다.

이또한 객체에 대한 이해가 없다면 풀이를 할 수 없는 방법이라 생각합니다. []안의 내용을 계산, 검색, 평가된 후에 실행해주는 bracket notation이라는 객체의 개념을 이해할 수 있어야만 위와 같은 코드가 바로 나올 수 있을 것이라 생각합니다.

const orosy = {
  name: 'Orosy',
  gender: 'male',
  email: 'hanei7632@gmail.com'
}

orosy.name; // 'Orosy'

const mail = "e" + "mail";
orosy.mail // undefined
orosy[mail] // 'hanei7632@gmail.com'

이는 매우 중요하며, 왜냐하면 위의 예시처럼 변수를 통해서 접근이 가능하기 때문입니다. 이처럼 dot notation으로 orosy.mail에 접근하면 orosy라는 객체에 키가 mail이라는 밸류를 찾게 되지만, bracket notation을 사용하면 orosy[mail]을 통해 변수 mail에 접근할 수 있게 되기 때문에 동적으로 객체의 프로퍼티에 접근할 수 있게 만들어주게 되는 것입니다.

이렇게 문제 풀이를 통해서 객체에 대한 개념을 정리해보았습니다. 특히, 개인적으로 중요하다고 생각하는 부분은 "a는 b다"로 값을 바꿔줄 때 객체를 사용한다는 점과 동적으로 객체의 프로퍼티에 접근 가능하게 해주는 bracket notation을 잘 활용해야한다는 것을 꼽을 수 있겠습니다.

특히, 백엔드와 소통하면서 API를 주고 받으며, 객체 데이터를 자주 사용하게 되기 때문에 더욱 개념에 익숙해지고 잘 활용할 수 있어야겠습니다.🥸