📝과제

아래 설명을 읽고 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,
}

문제를 아무리 읽어도 어쩌면 좋을지 엄두도 안났다..ㅎ
다행히 Q&A 시간이 있어서 멘토님께 질문하고 해답을 얻었는데, 해답을 얻었던 과정들을 적어보려고한다.

문제 쪼개기 = 분할 정복하기!

우선 문제를 작은 단위로 쪼개서 나열해보았다.
1. 학점을 숫자로 변환한다.
2-1. requiredClasses 함수 안에 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면
⇒ 항목 검사
2-2. 2-1에 포함되는 요소들은 새로운 객체의 키가 된다
2-3. 2-2에 존재하지 않는 항목의 값들은 value로 0을 가진다.

문제가 원하는게 뭔지 파악하기

쪼갠 문제들을 기준으로 차근차근 구현을 해본다.

🍋기본 틀

1. getExamResult 함수를 구현하기
2. getExamResult 는 인자 2개를 받는다.

• a. 인자 scores 는 다음과 같은 객체
• b. 인자 requiredClasses 는 다음과 같이 문자열로 된 배열

function getExamResult(scores, requiredClasses){

}

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

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

3. getExamResult 함수는 조건을 만족하는 객체를 리턴하도록 구현한다.

function getExamResult(scores, requiredClasses){
	const result = {} // 객체

	return result; // 객체 리턴
}

🍋조건 구현의 시작

🚩 조건 1 문제 시작

4. scores 객체가 가지고 있는 키들은 새로운 객체에 포함
4-1. 학점을 숫자로 변환한다.

function convertGrade(grade){
  if(grade==="A+") {
    return 4.5;
  }

  if(grade==="A") {
    return 4;
  }

  if(grade==="B+") {
    return 3.5;
  }

  if(grade==="B") {
    return 3;
  }

  if(grade==="C+") {
    return 2.5;
  }

  if(grade==="C") {
    return 2;
  }

  if(grade==="D+") {
    return 1.5;
  }

  if(grade==="D") {
    return 1;
  }

  if(grade==="F") {
    return 0;
  }

}

console.log(convertGrade("A+")) // 4.5

4-2. 리팩토링
if로 적기 너무 귀찮다. 리팩토링 해보자

A+ = 4.5
A = 4

결국 이 양식은 객체이다.

A+ : 4.5,
A : 4,

function convertGrade(grade){
  const convert = {
    "A+" : 4.5,
    A : 4,
    "B+" : 3.5,
    B : 3,
    "C+" : 2.5,
    C : 2,
    "D+" : 1.5,
    D : 1,
    F : 0,
  }

  return convert[grade]
}

4-3. getExamResult 함수에 조건 1 적용하기
convertGrade 가 scores object를 돌면서 key값을 전부 number로 다 바꿔줘야 한다.

🤔 객체는 어떻게 한바퀴 돌 수 있을까?

4-3-0. object(객체)를 loop하는 법 구글링
🔎 구글링 “how to loop object in javascript”
Tip. 첫번째 나오는 게시물을 봐도 되지만 MDN(공식문서)가 있다면 공식문서를 먼저 보자

💡 구글링을 통해 알게 된 사실
공식문서의 정의 이해안되니까 예시코드 살펴보자

property 로 key값을 얻을 수 있고, object[property]로 value값을 얻을 수 있다.
👉🏻 따라서 for(const property in object)을 사용해서 scores[property] 로 value인 학점을 얻을 수 있다.
만들어놓은 getExamResult함수에 scores객체의 학점을 convertGrade함수로 숫자로 바꿔서 새로운 객체의 value로 넣어보자.

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

function getExamResult(scores, requiredClasses){
	const result = {}
  
  for(const property in scores){
    result[property] = convertGrade(scores[property])
  }
  
	return result;
}

중간점검 해본다.

학점이 숫자로 바뀌었다🤩

✅ 조건 1 문제 해결!!

🚩 조건 2 문제 시작

5. requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면 ⇒ 항목 검사 후
5-1. 배열의 요소로는 존재 → 배열을 한바퀴 돌면서 확인해야될 듯 하다. 배열을 loop한다.
5-2. 키로는 존재하지 않는 항목
5-2-0. 키로 존재하지 않는 항목을 찾는 방법 구글링

🔎 구글링 “javascript how to check if exists in object ”
💡 구글링을 통해 알게 된 사실

key !== undefined 사용하지 말아라 ! (5000표나 받았네)

🤔 undefined를 시도한 이유는 뭘까?

→ 없는 key 값에 접근하면 undefined가 나온다.

🤔 왜 쓰지 말라는걸까?

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

→ key값이 undefined인 경우가 있을 수 있기 때문이다.

undefined말고 in을 사용해라!

scores 객체에 in을 사용해봤다.

없는 key값인 “공학수학”이 false로 나오는 걸 볼 수 있다.

📌 key로는 존재하지 않는 항목 검사는 (key in obj)를 사용하면 되겠다

5-2-1. key가 있는지 없는지를 체크하는 loop 함수인 checkRequiredClass를 만들자

key값을 체크해서 새로운 배열로 담아내야 하니까. 새로운 배열을 반환해주는 .map() 을 사용할 것이다.

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

function checkRequiredClass(){
  return requiredClasses.map(checkScoresKey)
}

requiredClasses 배열을 돌면서 checkScoresKey 함수의 결과값을 새로운 배열로 return 해줄 것이다.

5-2-2. key값이 scores 의 key값과 같은지를 확인해서 키로 존재하지 않는 항목을 골라내는 함수인 checkScoresKey 를 만들자.

✅ checkRequiredClass 함수 확인해보기

🙅🏻‍♀️ 뭐가 잘못됐지...???????????????????????
console.log() 로 확인해보자.

scores 객체의 key 값은 제대로 들어온다.
그럼 이제 if 안에도 key 값이 제대로 들어오는지 보자

key in은 있는데 key out이 없다.
key out 조건 밖에서 console.log 를 확인해보니 true false값이 제대로 나온다.

⚡ !(not) 연산자 사용할 때 주의해야될 것!
(!key in scores) → key를 not으로 만들 것이다.
key값이 아닌 검사한 결과(false)를 not으로 만들고 싶은 것이다.
( !(key in scores) ) → 전체를 괄호로 묶고 not연산자를 사용해준다.
⇒ scores 객체 안에 key가 false면 true로 바꾸고 return key 조건을 실행한다.

✅ checkRequiredClass 함수 확인 완료

scores 객체의 key와 requiredClasses 배열의 값을 비교해서 새로운 배열로 반환 성공!!🤩

6. 키로 존재하지 않는 항목들은 새로운 객체의 키가 된다.
→ checkRequiredClass로 찾아낸 없는 키 요소들을 새로운 키로 만들고 싶다

undefined를 없애면 깔끔할 것 같은데🤔

6-0. 배열의 undefined 없애는 법 구글링
🔎 구글링 “javascript array undefined remove”
💡 구글링을 통해 알게 된 사실

filter() 를 사용하는구나?

근데 filter()가 뭔지 모르겠다.
🔎 구글링 “mdn filter”

한글 설명이 이해가 안되면 예시 코드를 보면 된다.

false와 falsy값인 undefined는 [] 빈 배열을 return해주는걸 볼 수 있다.
filter()에 맞는 조건인 것들이 배열로 나오니까 key값이 undefined가 아닌 것들만 새 배열로 나오도록 하면 되겠다.

function checkRequiredClass(){
  return requiredClasses.map(checkScoresKey).filter((key) => key !== undefined);
}

✅ undefined를 없애기 성공
이제 포함되지 않은 과목들만 배열로 나왔다. getExamResult 함수의 key값으로 넣어줘야한다.
💡객체에 key값을 추가하는 법

7. 포함되지 않은 과목의 key 값들은 value로 0을 가진다.
어쩌다보니 key로 넣고 value에 0 값 넣는 것 까지 알았다.

✅ 조건 2 문제 해결!!

8. getExamResult 함수 안에 조건 2를 적용시키자

requiredClasses 배열을 .map()돌면서 scores 객체의 key값이랑 비교했을 때 false일 경우 true로 변환해서 result[key] = 0 으로 반환한다.

🎉 최종코드

function getExamResult(scores, requiredClasses){
	const result = {}
  
  for(const property in scores){
    result[property] = convertGrade(scores[property])
  }
  
  requiredClasses.map(key=>{
    if(!(key in scores)){
      result[key] = 0
    }
  })
  
	return result;
}

//  1. 학점을 숫자로 변환
function convertGrade(grade){
	const convert = {
		"A+" : 4.5,
		A : 4,
		"B+" : 3.5,
		B : 3,
		"C+" : 2.5,
	  C : 2,
		"D+" : 1.5,
		D : 1,
		F : 0,
	}
  
  return convert[grade]
}

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

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

console.log(getExamResult(scores,requiredClasses))

---

😢 객체[key값] = value 이해하는데 오래걸렸다.. 그래도 처음 문제 봤을때는 멘붕이었는데, 풀다보니 풀리긴해서 신기하다.. test 통과하는게 이렇게 짜릿할줄이야!!