객체의 키값 동적생성

let users2 = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' },
];

// 나이의 빈도수를 출력하는 함수를 만들어보자
// reduce의 목적 : 배열 데이터를 갖고 특정 값을 추려내 한 차원 낮은 데이터로 원본 배열 데이터를 축약한다

let groupByAge = users2.reduce((acc, it) => ({ ...acc, [it.age]: (acc[it.age] || 0) + 1 }), {});
console.log(groupByAge);

특정 키의 빈도를 포함하는 객체를 만드는 코드이다.
이 코드에서 [it.age] 부분과 acc[it.age]||0의 부분이 이해가 되지 않았다.

객체의 키값을 동적으로 생성하는 방법

[it.age]는 객체 프로퍼티의 이름 즉, 키값을 동적으로 생성하는 방법이다.

먼저 스프레드로 기존의 배열을 풀어쓴 뒤, 추가하려는 프로퍼티를 뒤에 넣어주게되는데 이때 키의 값은 정적이 아니라 동적으로 결정되므로 [object.key]의 형식으로 사용하게 되었다.

단축평가

acc[it.age]||0에서 acc[it.age]가 false이면 단축평가에 의해서 0이 리턴되고 +1이 추가된다.

만일 acc[it.age]가 false 즉, 0이 아니라면 (최소한 하나라도 있으면) 단축평가에 의해서 acc[it.age]가 리턴되고 value값에 1이 추가된다.

응용

function printOptionFrequency(users, option) {
  return users.reduce((acc, user) => ({ ...acc, [user[option]]: (acc[user[option]] || 0) + 1 }), {});
}

option을 전달해서 해당 옵션에 대한 빈도수를 출력하는 함수로 응용했다.