[자바스크립트] 축약 속성 이름

축약 속성 이름(Shorthand property names)은 객체 리터럴을 생성할 때 변수 이름과 프로퍼티 이름이 동일한 경우, 반복적인 코드를 줄여 간결하게 표현하는 방법입니다. 즉, 변수 이름을 한 번만 작성해도 해당 변수의 값이 프로퍼티의 값으로 자동 할당됩니다.

왜 축약 속성 이름을 사용해야 할까요?

• 코드 가독성 향상: 중복되는 코드를 줄여 코드를 더 깔끔하게 만들 수 있습니다.
• 개발 생산성 향상: 반복적인 코드 작성을 줄여 개발 속도를 높일 수 있습니다.

축약 속성 이름 사용 예시

// 일반적인 방법
const name = '홍길동';
const age = 30;
const person = {
  name: name,
  age: age
};

// 축약 속성 이름 사용
const name2 = '홍길동';
const age2 = 30;
const person2 = { name2, age2 };

// 더 간결하게
const name3 = '홍길동';
const age3 = 30;
const person3 = { name3, age3 }; // 축약 속성 이름 사용

다양한 활용 예시

1. 간단한 객체 생성

const name = '홍길동';
const age = 30;

// 일반적인 방법
const person = {
  name: name,
  age: age
};

// 축약 속성 이름 사용
const person2 = { name, age };

2. 배열 내에서 객체 생성

const numbers = [1, 2, 3];
const squaredNumbers = numbers.map(num => ({ num, squared: num * num }));

3. 함수의 매개변수와 함께 사용

function createPerson(name, age) {
  return { name, age };
}

4. 객체 병합

const person1 = { name: '홍길동' };
const person2 = { age: 30 };
const combinedPerson = { ...person1, ...person2 };

5. 메서드와 함께 사용

const person = {
  name: '홍길동',
  age: 30,
  greet() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

6. 계산된 프로퍼티 이름과 함께 사용

const prefix = 'user_';
const id = 123;
const obj = {
  [prefix + id]: 'value'
};

7. 비구조화 할당과 함께 사용

const options = {
  width: 800,
  height: 600,
  color: 'blue'
};

const { width, height, color: backgroundColor } = options;

8. 클래스에서 사용

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('홍길동', 30);

9. 함수 표현식에서 사용

const greet = (name) => ({ message: `Hello, ${name}!` });

10. 조건부 프로퍼티

const condition = true;
const obj = {
  name: '홍길동',
  ...(condition && { age: 30 })
};

축약 속성 이름의 장점

• 간결한 코드: 중복되는 코드를 줄여 코드를 더욱 간결하게 만들 수 있습니다.
• 가독성 향상: 코드의 의도를 명확하게 전달할 수 있습니다.
• 생산성 향상: 반복적인 작업을 줄여 개발 효율을 높일 수 있습니다.

주의할 점

• 변수 이름과 프로퍼티 이름이 동일해야 함: 변수 이름과 프로퍼티 이름이 다르면 축약 속성 이름을 사용할 수 없습니다.
• 동적 프로퍼티 이름: 동적으로 생성되는 프로퍼티 이름은 축약 속성 이름으로 사용할 수 없습니다.