<JavaScript> Object 객체(3)

🐥자바스크립트 기초 문제 풀이

학습 목표
객체의 key와 value에 접근하고 가공할 수 있다. 메소드를 이용해 객체 안의 프로퍼티들을 순회할 수 있다.

객체의 순회
객체 속 내용물도 배열처럼 처음부터 끝까지 순회할 수 있다! 다만 배열과 다르게, 순회할 때 정해진 순서는 없다.

Object.keys 메소드
Object.keys() 메소드는 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다.

 const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

obj라는 객체를 순회하기 위해 .keys메소드를 다음과 같이 사용할 수 있다.
Object.keys(obj)

메소드 사용시 이런 결과물이 출력된다!
['name', 'weight', 'price', 'isFresh']

객체 속 프로퍼티의 key들을 배열로 멋지게 리턴한것이다!

const keys = Object.keys(obj)
//obj의 key들을 순회해서 만든 배열을 keys라는 변수에 저장!

for (let i = 0; i < keys.length; i++) {
//그 key라는 변수 속 아이들을 처음부터 끝까지 훑는 조건으로 반복문 시작!
  const key = keys[i]
  //keys 속 각각의 키를 key라는 이름으로 저장한다
  const value = obj[key]
  //obj[key]와 같은 형식은 괄호 안 key의 value를 뽑을때 쓴다고 했었으니까,
  //이건 obj객체 속 각각의 key들의 value를 얻는 코드인거다!
  //그 value들을 value라는 이름으로 저장!
  
  console.log(value)
}

위 코드의 결과로는

'melon'
4350
16500
true`

라는 값이 출력된다!

자바스크립트 ES6에는 Object.values, Object.entries 와 같은 메소드들도 있다. Object.values는 객체의 value로 이루어진 배열을 리턴하고, Object.entries는 객체의 key와 value가 배열 형태로 들어가있고 그것을 감싸는 배열을 리턴한다.

const values = Object.values(obj)
//values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
//key와 value가 배열로 들어가있고, 또 그것을 감싸는 배열을 리턴한다는것이 
위와 같은 코드를 두고 한 얘기이다!

for-in문
객체를 순회할 때 쓰이는 JS ES6의 문법이다. 객체 말고도 배열을 순회할때도 사용이 가능하다.

const arr = ['coconut', 'banana', 'pepper', 'coriander']

for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
}

원래같으면 내용물의 처음부터 끝까지 순회하는 for문을 위와 같이 작성했을텐데,
let i = 0; i < arr.length; i ++부분을 축약하고있는 문법이 for-in문이다.
위 for문 코드는 아래 코드처럼 바꿔쓸 수 있다.

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

두가지 코드 모두

0
1
2
3
'coconut'
'banana'
'pepper'
'coriander'

라는 결과가 출력된다.

for in문은 객체에서도 작동한다!
객체에서 사용하는 코드를 살펴보자.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
//obj객체 안의 key들을 key라고 이름붙이는 for in문!
  const value = obj[key]
  //value라는 변수 안에 obj의 key에 대한 value값들을 저장해줌

  console.log(key)
  //이렇게하면 key값들이 나오고
  console.log(value)
  //이렇게하면 key값에 대한 value값들이 나온다!
}

Assignment

아래 설명을 읽고 getExamResult 함수를 구현하세요.
인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.
'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'

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

인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.
['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요.
scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.
A+ => 4.5
A => 4
B+ => 3.5
B => 3
C+ => 2.5
C => 2
D+ => 1.5
D => 1
F => 0

requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다. 위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면, 다음과 같은 객체가 리턴됩니다. 요소간 순서는 다를수 있지만, 채점에 무관합니다.
{
'생활속의회계': 2,
'논리적글쓰기': 3,
'독일문화의이해': 3.5,
'기초수학': 1.5,
'영어회화': 2.5,
'인지발달심리학': 4.5,
'공학수학': 0,
'컴퓨터과학개론': 0,
}

나의 답안

function getExamResult(scores, requiredClasses){
//제시해준 두가지 인자를 받는 함수를 선언하자!
  let result = {};
  최종적으로 return할 객체를 선언!
  const convertScores = {
  //알파벳점수를 숫자 점수로 대치시키는 객체를 선언하고
  //안에 아래와 같이 내용물을 넣는다!
    "A+" : 4.5,
    "A" : 4,
    "B+" : 3.5,
    "B" : 3,
    "C+" : 2.5,
    "C" : 2,
    "D+" : 1.5,
    "D" : 1,
    "F" : 0
  };
  
  for(let i in scores){
  //for in문을 사용해서 함수의 첫번째 인자로 받은 scores를 순회할것이다.
    result[i] = convertScores[scores[i]]
    //result객체의 key값에는 i를 할당해주고
    //value값에는 convertScores객체 속
    scores의 value값과 같은 값의 value을 할당해준다.
    //이 부분에대한 부가설명은 포스팅 맨 아래에서 이어서 하겠다!
  }
    
requiredClasses.forEach((el) => {
//두번째 인자로 들어오는 필수포함과목들은 forEach로 순회해볼것이다.
//추가과목 배열 속 아이들을 el이라는 이름으로 불러야지! 

  if(result[el] === undefined){
  //만약 result객체에 el이라는 값이 undefined라면
    result[el] = 0
    //result객체에 el이라는 변수이름으로 key를 생성하고 해당 value는 0으로 줘!
  }
})
  
  return result; 
}

const exScores = {
//score라는 인자에 시범으로 들어갈 exScores라는 객체를 만들잣!
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}
  const exRe = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];
  //두번째 requiredClasses 인자에 시범으로 들어갈 배열!

getExamResult(exScores, exRe);
//선언해놓은 임시데이터들을 인자로 넣어준 함수를 실행시키기!

중간에for(let i in scores)부분을 다시 살펴보자!

for(let i in scores){
  result[i] = convertScores[scores[i]]
}

우리는 scores인자로 받은 데이터(객체)의 value값(알파벳점수)를 얻어야하기때문에 for in문을 사용해서 함수의 첫번째 인자로 받은 scores를 순회하는것이다!

scores[i]라고 코드를 작성하면 scores로 받은 객체 속의 value값들이 호출된다. 이 scores의 value값들이 누구냐? 바로바로
저 알파벳점수들이다!

그러니 결국 convertScores[scores[i]] 라는 것은
convertScores[알파벳점수들]인 셈이고, convertScores[알파벳점수들]이라는 코드는 convertScores객체의 key에대한 value값을 호출하게된다.
결론적으로 convertScores[scores[i]]라고 코드를 입력하면 4.5, 4.0, 3.5 등의 숫자 점수가 출력되는것이다!

이렇게 객체명[key변수명] = value값공식을 사용해서
다음과 같은 결과를 return하는 코드를 짤 수 있었다!

몇가지 포인트를 짚어보면
1. 문제에서 제시해준 인자 두개를 받는 함수를 잘 만들자!
2. 그리고 임시로 그 두 인자 자리에 넣어 볼 데이터도 잘 구성해야함. 이름도 알아보기 쉽게!
3. 객체명[key변수명] = value값공식처럼 객체를 핸들하는 방법을 잘 익혀서 써먹어야한다.
4. 긴가민가 할 때는 한 줄 한 줄console.log찍어서구경하거나 for in 문으로 객체를 순회해본다. 뭐가 어떻게 돌아가는지..
5. 일단 문제를 읽고 해야할 일을 쭈욱 적어보고 거기서 더 쪼개면서 하나하나씩 해결해본다..

근데 아직도 뭔가 100퍼센트 이해하고 쓰는 포스팅은 아니다 라는 느낌.. 혹자는 코웃음 칠 수도 있겠지만 나는 이 문제를 일주일 넘게 들여다봤다. 객체를 보고있다가 배열을 보면.. 참 천사가 따로없구나 하는 생각이 든다. 순회하는것도 핸들링하는것도 key와 value값때문에 너무 헷갈린다. 객체 안에 key와 value를 넣어주는 방법 또한 어떻게보면 위에 언급한 공식처럼 간단하지만서두 온점사용법,대괄호+따옴표사용법,대괄호(변수)사용법 이렇게 세 가지나 있으니까 헷갈릴 만도 하다. 각각의 사용법이 어떻게 다른지에 대해서는 알고있지만 막상 쓰여진 코드를 해독할때는 당황해서 '.....?!'이렇게된다.. 내가 써놓고도 가끔 그렇게된다.ㅋㅋㅋㅋㅋㅋㅋㅋ
하여간 이 문제는 풀고 나서 시간이 지난 지금도 참 들여다보기 무서운 문제다.. 그래도 주기적으로 또 쳐다봐야지.

끙