JavaScript push() 사용 시 변수 이름을 리터럴이 아닌 키로 활용하는 방법

JavaScript에서 객체의 속성(키)으로 변수의 값을 사용하려면 대괄호([]) 표기법을 활용해야 합니다. 중괄호({}) 안에 변수 이름을 그대로 작성하면, 변수에 저장된 값이 아닌 변수 이름 자체가 문자열 리터럴로 처리되어 버립니다.

아래 예제를 통해 두 방식의 차이를 확인해 보겠습니다.

예제 코드

var name = "David"
var putTheAllData = []
putTheAllData.push( { name: "The name is name will remain same" } )
putTheAllData.push( { [name]: "The name is David will be changed [name]"} )
console.log(putTheAllData);

위 프로그램을 실행하려면 다음 명령어를 입력합니다.

node fileName.js

출력 결과

여기서는 파일 이름이 demo166.js라고 가정합니다. 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\javascript-code> node demo166.js
[
    { name: 'The name is name will remain same' },
    { David: 'The name is David will be changed [name]' }
]

핵심 정리

첫 번째 push() 호출에서는 name이라는 단어 자체가 키로 사용되었습니다. 반면 두 번째 push() 호출에서는 대괄호 [name]을 사용했기 때문에, 변수 name에 저장된 값인 "David"가 실제 키로 적용된 것을 확인할 수 있습니다.

이처럼 ES6에서 도입된 계산된 속성명(Computed Property Names) 문법을 사용하면 변수의 동적인 값을 객체의 키로 자유롭게 활용할 수 있으며, 배열에 데이터를 추가할 때도 유연한 키 구조를 만들 수 있습니다.