계산된 속성

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 44번째.

계산된 속성(Computed properties)은 단순히 저장된 데이터를 반환하는 대신 값을 계산하고 반환하는 게터(getters)입니다. 이들은 일반적인 속성처럼 보이지만 필요할 때 즉석에서 값을 계산합니다.

예제를 살펴보겠습니다. 일반적인 프로퍼티를 가진 객체가 있습니다:

const circle = {
  radius: 5
};

이제 getter를 사용하여 계산된 프로퍼티를 추가합니다:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

다음은 계산된 속성에 접근하는 방법입니다:

console.log(circle.diameter); // 출력: 10

반지름(radius)을 업데이트하면 지름(diameter)도 자동으로 업데이트됩니다:

circle.radius = 10;
console.log(circle.diameter); // 출력: 20

계산된 속성은 속성의 값이 다른 속성에 의존하거나 계산이 필요할 때 유용합니다.

챌린지

width와 height 속성을 가진 Rectangle 클래스가 주어집니다. 여러분의 작업은 area와 perimeter를 위한 계산된 속성(computed properties)을 추가하는 것입니다.

계산된 속성 <strong>area</strong> - width × height를 반환합니다
계산된 속성 <strong>perimeter</strong> - 2 × (width + height)를 반환합니다

치트 시트

계산된 속성(Computed properties)은 단순히 저장된 데이터를 반환하는 대신 값을 계산하여 반환하는 게터(getters)입니다. 이들은 필요할 때 즉석에서 값을 계산합니다.

get 키워드를 사용하여 계산된 속성을 정의합니다:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

계산된 속성은 일반 속성처럼 접근합니다 (괄호 없이):

console.log(circle.diameter); // Outputs: 10

계산된 속성은 의존하는 속성이 변경될 때 자동으로 업데이트됩니다:

circle.radius = 10;
console.log(circle.diameter); // Outputs: 20

직접 해보기

import { Rectangle } from './rectangle.js';

// 테스트 코드 - 수정하지 마세요
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // "Area: 50"이 출력되어야 함
console.log(`Perimeter: ${rect.perimeter}`); // "Perimeter: 30"이 출력되어야 함