단축 속성명

단축 속성명

단축 속성명(Shorthand Property Names)은 ECMAScript 2015 (ES6)에서 도입된 JavaScript 문법으로, 객체 리터럴(object literal)을 정의할 때 객체의 속성 이름(key)과 그 속성에 할당하려는 변수(또는 상수)의 이름이 동일한 경우 코드를 더 간결하게 작성할 수 있게 해주는 기능입니다.

핵심 규칙:

객체 리터럴 내에서 { 속성명: 변수명 }과 같이 작성해야 할 때, 만약 속성명과 변수명이 같다면, 간단히 { 변수명 } 이라고만 작성할 수 있습니다.

// ES6 이전
let x = 10;
let y = 20;

let point1 = {
  x: x, // 속성명 'x'와 변수명 'x'가 같음
  y: y  // 속성명 'y'와 변수명 'y'가 같음
};

console.log(point1); // { x: 10, y: 20 }

// ES6+ 단축 속성명 사용
let x = 10;
let y = 20;

let point2 = {
  x, // { x: x } 와 동일
  y  // { y: y } 와 동일
};

console.log(point2); // { x: 10, y: 20 }

 

 

주요 특징

1. 간결성 (Conciseness): 코드의 길이를 줄여줍니다. 속성명: 변수명 반복을 피할 수 있어 타이핑이 줄어듭니다.
2. 가독성 (Readability): 변수 이름이 해당 속성의 의미를 잘 나타낼 때, 코드가 더 깔끔하고 이해하기 쉬워질 수 있습니다. 불필요한 중복이 제거됩니다.
3. 객체 리터럴에서만 사용: 함수 정의나 다른 문맥이 아닌, 객체를 {}를 사용해 직접 생성할 때 적용됩니다.
4. 다른 속성과 혼용 가능: 일반적인 키: 값 형태의 속성과 함께 사용할 수 있습니다.

let name = "구름";
let type = "강아지";

let pet = {
  name,      // 단축 속성명 사용: { name: name } 과 동일
  type,      // 단축 속성명 사용: { type: type } 과 동일
  age: 3,    // 일반적인 속성 정의
  greeting: function() { // 메소드 정의 (단축 메소드명도 ES6 기능)
    console.log(`멍멍! 내 이름은 ${this.name}이야.`);
  }
};

console.log(pet);
// 출력:
// {
//   name: '구름',
//   type: '강아지',
//   age: 3,
//   greeting: [Function: greeting]
// }

pet.greeting(); // 출력: 멍멍! 내 이름은 구름이야.

 

JavaScript의 단축 속성명은 객체 리터럴을 만들 때 속성 이름과 변수 이름이 같다면 변수 이름만 적어서 { 변수명: 변수명 }을 대체하는 편리한 ES6+ 문법입니다. 코드의 간결성과 가독성을 높이는 데 도움이 됩니다.