예전에는 객체에 속성을 생성하려면 두 단계의 과정이 필요했지만, ES6의 등장으로 이 작업이 매우 간단해졌습니다. 이제 한 단계만으로 속성을 동적으로 생성할 수 있습니다. 지금부터 자세히 살펴보겠습니다.
기존 방식(2단계 과정)
예제
다음 예제에서는 속성을 객체 내부에 직접 선언하지 않고 객체 외부에서 별도로 선언하기 때문에 두 단계의 과정이 됩니다.
<html>
<body>
<script>
let person = 'name';
let student = { // 1단계
id: 1,
};
student[person] = 'nani'; // 2단계
document.write(JSON.stringify(student));
</script>
</body>
</html>
출력 결과
{"id":1,"name":"nani"}
먼저 객체를 생성한 뒤(1단계), 대괄호 표기법을 사용해 외부 변수를 키로 삼아 속성을 추가하는(2단계) 방식입니다. 코드가 길어지고 가독성이 떨어질 수 있다는 단점이 있습니다.
ES6 방식(1단계 과정)
예제
다음 예제에서는 객체의 속성을 객체 외부가 아닌 객체 리터럴 내부에 직접 선언하므로 한 단계로 처리됩니다. ES6에서 도입된 계산된 속성명(Computed Property Names) 문법 덕분입니다.
<html>
<body>
<script>
let person = 'name';
let student = {
id: 1,
[person] : "nani"
};
document.write(JSON.stringify(student));
</script>
</body>
</html>
출력 결과
{"id":1,"name":"nani"}
핵심은 [person]처럼 대괄호([]) 안에 변수나 표현식을 넣으면, 그 평가 결과가 곧바로 속성 키로 사용된다는 점입니다. 이를 통해 객체를 선언하는 시점에 동적으로 키를 결정할 수 있으며, 코드가 더 간결하고 직관적으로 바뀝니다.