JavaScript에서 배열의 문자열을 새 배열 내 객체의 키로 변환하는 방법

JavaScript로 개발하다 보면 문자열로 이루어진 배열을 각 문자열이 객체의 키(key)가 되는 새로운 배열로 변환해야 하는 경우가 종종 있습니다. 예를 들어 학생 정보를 다루는 코드에서 다음과 같은 배열이 있다고 가정해 보겠습니다.

var values = ['studentNames', 'studentMarks'];

이 배열을 각 요소가 빈 배열([])을 값으로 가지는 객체 키 형태로 바꾸고 싶다면, map() 메서드와 ES6의 계산된 속성명(Computed Property Names) 문법을 함께 사용하면 아주 간단하게 해결할 수 있습니다.

map()을 활용한 변환 방법

map()은 배열의 모든 요소를 순회하며 콜백 함수의 반환값으로 새로운 배열을 만들어 줍니다. 여기에 대괄호([])를 사용한 계산된 속성명 문법을 적용하면 각 문자열이 그대로 객체의 키가 됩니다.

var convertIntoNewArray = values.map(arrayObject => ({ [arrayObject]: [] }));

여기서 화살표 함수가 소괄호로 감싸진 객체를 반환하고 있다는 점에 주목하세요. 화살표 함수에서 객체 리터럴을 직접 반환할 때는 중괄호({})가 함수 본문으로 해석되지 않도록 반드시 소괄호로 묶어 주어야 합니다.

전체 예제 코드

실제 동작을 확인할 수 있는 전체 코드는 다음과 같습니다.

var values = ['studentNames', 'studentMarks'];
console.log(values);
var convertIntoNewArray = values.map(arrayObject => ({ [arrayObject]: [] }));
console.log(convertIntoNewArray);

프로그램 실행하기

위 프로그램은 Node.js 환경에서 실행할 수 있습니다. 터미널에서 다음 명령어를 입력하세요.

node fileName.js

여기서는 파일 이름이 demo281.js라고 가정하겠습니다.

실행 결과

프로그램을 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\javascript-code> node demo281.js
[ 'studentNames', 'studentMarks' ]
[ { studentNames: [] }, { studentMarks: [] } ]

결과 분석

출력 결과를 살펴보면 원래 배열 ['studentNames', 'studentMarks']가 [{ studentNames: [] }, { studentMarks: [] }]라는 새로운 배열로 변환된 것을 확인할 수 있습니다. 즉, 각 문자열 요소가 객체의 키가 되었고, 해당 키의 값으로는 빈 배열이 할당되었습니다.

이 패턴은 API 응답 데이터를 초기화하거나, 카테고리별 데이터 구조를 미리 만들어 둘 때 등 실무에서 매우 유용하게 활용됩니다. 필요에 따라 빈 배열([]) 대신 0, null, 또는 다른 기본값을 지정하는 것도 가능합니다.