JavaScript에서 계산된 속성(Computed Property)에 값 할당하기

JavaScript에서는 slice()와 map() 메서드를 조합하여 계산된 속성에 손쉽게 값을 할당할 수 있습니다. 이번 글에서는 객체 배열의 특정 요소를 추출하고, 각 객체의 키(key)와 값(value)을 분리해 새로운 구조로 변환하는 방법을 알아보겠습니다.

예제 데이터

먼저 아래와 같은 고객 정보 객체 배열이 있다고 가정해 보겠습니다.

const customerDetails = [
    { customerFirstName: "David" },
    { customerLastName: "Miller" },
    { customerCountryName: "US" },
    { customerAge: "29" },
    { isMarried: false },
    { customerCollegeName: null }
];

이 배열에서 인덱스 2부터 3까지의 요소와 마지막 요소를 추출한 뒤, 각 객체를 'propertyKey'와 'propertyValue' 형태로 재구성하는 예제입니다.

코드 예제

const customerDetails = [
    { customerFirstName: "David" },
    { customerLastName: "Miller" },
    { customerCountryName: "US" },
    { customerAge: "29" },
    { isMarried: false },
    { customerCollegeName: null }
];

const newCustomerDetails =
  customerDetails.slice(2, 4).concat(customerDetails[5]).map(obj => ({
    propertyKey: Object.keys(obj)[0],
    propertyValue: Object.values(obj)[0]
  }));

console.log(newCustomerDetails);

코드 설명

위 코드의 동작 방식을 단계별로 살펴보면 다음과 같습니다.

1. slice(2, 4): 배열에서 인덱스 2('customerCountryName')부터 인덱스 3('customerAge')까지의 요소를 잘라냅니다.

2. concat(customerDetails[5]): 잘라낸 배열에 인덱스 5('customerCollegeName') 요소를 추가합니다.

3. map(): 결과 배열의 각 객체에 대해 Object.keys()로 첫 번째 키를, Object.values()로 첫 번째 값을 가져와 'propertyKey'와 'propertyValue'라는 계산된 속성으로 새로운 객체를 생성합니다.

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo135.js라고 가정합니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo135.js
[
    { propertyKey: 'customerCountryName', propertyValue: 'US' },
    { propertyKey: 'customerAge', propertyValue: '29' },
    { propertyKey: 'customerCollegeName', propertyValue: null }
]

출력 결과를 보면 원래 객체의 키-값 쌍이 'propertyKey'와 'propertyValue'라는 일관된 구조의 객체로 성공적으로 변환된 것을 확인할 수 있습니다. 이러한 기법은 API 응답 데이터를 정규화하거나 동적인 폼 필드를 처리할 때 특히 유용하게 활용됩니다.