자바스크립트를 사용하다 보면 프레임워크나 라이브러리의 문법인지, 순수 자바스크립트 문법인지 헷갈리는 경우가 많다. 그 중에서도 computed property name은 ES6+의 문법임에도 나는 React 문법으로 생각하고 있었다.
Computed Property Name이란? 🤔
객체의 속성 이름을 동적으로 생성할 수 있는 문법이다. 대괄호([])를 사용하여 표현식의 결과값을 속성 이름으로 사용할 수 있다.
// 기본 예시
const key = 'name';
const value = 'jun';
// ❌ 예전 방식
const user = {};
user[key] = value;
// ✅ Computed Property Name 사용
const user = {
[key]: value // { name: 'jun' }
};실용적인 예시 💫
// 1. 메서드 이름 동적 생성
const actionType = 'GET_USER';
const handlers = {
[actionType]: function() {
return 'Getting user...';
}
};
console.log(handlers.GET_USER()); // 'Getting user...'
// 2. 접두사가 있는 속성 생성
const prefix = 'user';
const userData = {
[`${prefix}Name`]: 'John', // userName
[`${prefix}Age`]: 20, // userAge
[`${prefix}Email`]: 'john@example.com' // userEmail
};
// 3. Concise Method와 함께 사용
const methodName = 'sayHello';
const person = {
[methodName]() { // computed property name + concise method
return 'Hello!';
}
};
console.log(person.sayHello()); // 'Hello!'주의할 점 ⚠️
- 대괄호 안에는 모든 유효한 자바스크립트 표현식을 사용할 수 있다
- 표현식의 결과값은 문자열로 변환된다
- 심볼도 속성 이름으로 사용할 수 있다
// ⚠️ 표현식 예시
const obj = {
[1 + 2]: 'three', // { '3': 'three' }
[true && 'key']: 'value', // { 'key': 'value' }
[Date.now()]: 'current' // { '1621234567890': 'current' }
};이처럼 Computed Property Name은 순수 자바스크립트의 강력한 기능 중 하나다. React나 Vue의 문법이 아닌 ES6+에서 제공하는 표준 문법이라는 점을 기억하자 💪
Hello