[JavaScript #17] Basic of JavaScript - 객체 순회(프로퍼티 열거)

객체 순회하기 = 프로퍼티 열거(enumeration)

• 객체에 있는 모든 키에 한번씩 접근해야하는 코드를 써야 한다면 객체 순회를 쓸 수 있다.
• 다만 배열(array)과 다르게 명확하게 정해진 순서가 없기 때문에 객체의 순회는 '순서가 보장되지 않은 순회'라고 부른다.
• 배열을 순회할 때 for문을 사용하는데, 배열은 length라는 키를 갖고 있고, 인덱스를 통해 각 배열 요소에 접근 할 수 있었기 때문! (객체는 length 키나 인덱스가 없기 때문에 for문 접근이 불가능하다.)
• 객체 반복문에서는 Object.keys(), for-in 문을 쓸 수 있다.

Object.keys()

• Object.keys() 메소드는 어떤 객체가 갖고 있는 키(key)들의 목록을 배열로 반환한다.

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

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

• 이렇게 배열로 리턴 후 반복문을 사용할 수 있다.

const keys = Object.keys(obj)

for (let i = 0; i < keys.length; i++) {
  const key = key[i] // 각각의 키 
  const value = obj[key] //키에 해당하는 각각의 값
}

Object.values(), Object.entries()

• ES6 문법에서는 Object 생성자의 메소드인 Object.values, Object.entries가 추가되었다.
• Object.values 는 객체의 키가 아닌 값(프로퍼티 값)으로 이루어진 배열을 리턴한다.
• Object.entries 는 객체의 키와 값의 쌍의 배열을 배열에 담아 리턴한다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 프로퍼티로 구성된다.

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

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

for...in 문

• 반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법이다.
• 객체 및 일반적인 배열을 순회할 때 모두 사용할 수 있다.
  for (변수선언문 in 객체/배열) {...}

//배열 순회
const arr = ['coconut', 'banana', 'pepper', 'coriander']

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

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

• for..in문은 for문의 조건문 (let i = 0; i < arr.length; i ++)을 생략할 수 있다.
• 인덱스의 값, 반복문의 순회 횟수를 자바스크립트 엔진 내부에서 자동으로 결정한다.

//객체 순회
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key];

  console.log(key) //name, weight, price, isFresh
  console.log(value) //melon, 4350, 16500, true
}

• 이렇게 객체 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열이 할당된다. (name, melon, weight, 4350, price, 16500, isFresh, true)

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,
}

// getExamResult 함수 만들기 
// 새로운 객체 만들기 
// 인자로 들어온 score 순회해보기
// 새로운 객체에 scores에 있는 key 값을 다 포함시키기
// 학점 문자열 숫자로 바꾸기
// requiredClass 배열 안에 있는데 scores 객체에 없는 값은 0점 처리
// required에 있는게 result에 없는지 확인
// requried 순회
// 순회한 값이 result에 없는지 확인
// 없으면 0점

// 첫번째 풀이
const getExamResult = (scores, requiredClasses) => {
  let result = {};
  const matchScores = {
  ['A+']: 4.5,
  'A': 4,
  ['B+']: 3.5,
  'B': 3,
  ['C+']: 2.5,
  'C': 2,
  ['D+']: 1.5,
  'D': 1,
  'F': 0
  };
  
  for (let key in scores) {
    result[key] = matchScores[scores[key]]; //key 값을 새로운 배열에 넣어 주기 = 인자 key를 숫자로 바꿔주기 
  }
  
  requiredClasses.forEach((el) => {
    if (result[el] === undefined) {
      result[el] = 0;
    }
  })  
 return result;
}

//두번째 풀이
const getExamResult = (scores, requiredClasses) => {
  let result = {};
  const matchScores = {
  ['A+']: 4.5,
  'A': 4,
  ['B+']: 3.5,
  'B': 3,
  ['C+']: 2.5,
  'C': 2,
  ['D+']: 1.5,
  'D': 1,
  'F': 0
  };
  
  const scoresKey = Object.keys(scores); //key값 배열로 가져오기
  //console.log(scoreKeys);
  //value 값 가져오기
  for (let i = 0; i < scoresKey.length; i++) {
  const name = scoresKey[i]; //key 배열 
  const score = scores[name]; //value 배열
  result[name] = matchScores[score]; //새로운 배열에 숫자로 변환해서 넣기
}
  
  for (let i = 0; i < requiredClasses.length; i++) {
    const className = requiredClasses[i];
    if (!result[className]) { // === undefiend //result에 값을 다 담아놨기 때문에 result를 확인하면 된다! 
      result[className] = 0;
    }
  }
 return result;
}

//console.log 확인을 위한 예시
const exampleScore = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}
getExampleResult(exampleScore)