• 학습일 : 2024.02.01
• 참고 URL
  • https://ko.javascript.info/keys-values-entries

학습 내용

1. 객체엔 다음과 같은 메서드를 사용할 수 있음

• Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
• Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
• Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.

1. Object.keys, values, entries는 심볼형 프로퍼티를 무시
2. 객체엔 map, filter 같은 배열 전용 메서드를 사용할 수 없음

• 해결 방법
  • Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻습니다.
  • 위에서 만든 배열에 map 등의 배열 전용 메서드를 적용합니다.
  • 위에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌립니다.

실습 코드

let user = {
    name: "Violet",
    age: 30
  };
  
  // 값을 순회합니다.
  for (let value of Object.values(user)) {
    console.log(value); // Violet과 30이 연속적으로 출력됨
  }

과제

→ 1번

/* 프로퍼티 값 더하기
급여 정보가 저장되어있는 객체 salaries가 있습니다.
Object.values 와 for..of 반복문을 사용해 모든 급여의 합을 반환하는 함수 sumSalaries(salaries)를 만들어보세요.
salaries가 빈 객체라면, 0이 반환되어야 합니다.

=======================================================
예시:

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

console.log( sumSalaries(salaries) ); // 650
*/
//=======================================================
// 내가 작성한 코드(정답)
function sumSalaries(salaries){
    let sumVal = 0;
    for (let value of Object.values(salaries)){
        sumVal += value;
    }
    return sumVal
}

let salaries = {
    "John": 100,
    "Pete": 300,
    "Mary": 250
  };

console.log( sumSalaries(salaries) ); // 650

//=======================================================
// 해답 코드
// reduce는 급여 정보가 저장되어있는 배열을 순회해
// 급여의 총합을 만들고
// 그 결과를 반환합니다.
function sumSalaries2(salaries) {
    return Object.values(salaries).reduce((a, b) => a + b, 0) // 650
}

console.log( sumSalaries2(salaries) ); // 650

• 확실히, 내가 작성한 코드보다 해답 코드가 짧다. 나는 우선, reduce() 메서드를 사용해야겠다는 생각을 못했다.
• 일반적인 덧셈 방식으로 객체 안의 값들을 더한 것을 return 하도록 짰다.

→ 2번

/* 프로퍼티 개수 세기
객체 프로퍼티 개수를 반환하는 함수 count(obj)를 만들어보세요.

let user = {
  name: 'John',
  age: 30
};

alert( count(user) ); // 2
가능한 짧게 코드를 작성해 보세요.

주의: 심볼형 프로퍼티는 무시하고 ‘일반’ 프로퍼티 개수만 세주세요.
*/
// 내 풀이(=해답)
function count(user){
    return Object.keys(user).length;
}

let user = {
    name: 'John',
    age: 30
};

console.log(count(user));

• 내가 풀이로 한 것이 해답 예시로 나온 것과 동일했다.
• 배열에서도 length 메서드가 있는 것처럼, 객체에도 있을 것이라 판단하고 keys() 메서드에 연결해서 length 메서드를 찍어봤는데 실행이 됐다. (운이… 좋은 것이랄까?)

느낀점

객체에 사용하는 것과 배열에 사용하는 것이 매우 비슷하다고 느껴졌다. 크게 어렵지는 않았다.

결국, 키를 메인으로 할 것인가 / 값을 메인으로 할 것인가 / 키와 값 모두를 메인으로 갈 것이냐의 관점에 따라 다르게 구성될 뿐이라고 생각한다.