[JavaScript] ES6 객체 리터럴 단축 표기법(Object Property Shorthand)

 

const title = 'File Title';
const value = 'value';

const result = { title, value };

console.log(result);  // { title: 'File Title', value: 'value' }

 

코드에서 { title, value}를 push 했는데 변수명까지 자동으로 객체 키로 들어가는 이유가 궁금했다.

이는 ES6의 '객체 리터럴 단축 표기법(Object Property Shorthand)' 때문이다.

 

 

 

 

객체 리터럴 단축 표기법이란?

일반적으로 객체를 만들 때 key: value 형태로 작성하는데 ES6부터는 변수명을 키로 자동 설정하는 단축 문법이 추가됐다.

 

const title = "document_2024.pdf"; 
const value = "123456"; 

// 일반적으로 사용하는 객체 생성 방법
const obj1 = { title: title, value: value }; 
console.log(obj1); // { title: "document_2024.pdf", value: "123456" } 

// 객체 리터럴 단축 표기법 사용
const obj2 = { title, value }; 
console.log(obj2); // { title: "document_2024.pdf", value: "123456" }

 

obj1 : 직접 키 값을 지정한 방식

obj2 : 단축 표기법을 사용한 방식

 

결과적으로 두 개가 동일하게 동작한다.

{ title, value}라고만 써도 내부적으로 {title: title, value: value}로 처리된다.

 

 

 

 

만약 변수명과 키를 다르게 하고 싶다면?

result.push({ fileName: title, fileID: value });

 

위처럼 단축 문법을 쓰지 않고 직접 키를 설정하면 된다.