[typescript] 객체 분해 할당과 프로퍼티 셋터/게터를 사용한 코드의 가독성 향상

12 Dec 2023

typescript

코드를 작성할 때 객체 분해 할당과 프로퍼티 셋터/게터를 활용하면 가독성을 향상시킬 수 있습니다. TypeScript를 사용하여 이러한 기능들을 보다 효과적으로 활용하는 방법을 살펴보겠습니다.

객체 분해 할당 (Object Destructuring)

객체 분해 할당은 코드를 간결하게 작성할 수 있도록 도와줍니다. 보다 읽기 쉽고 이해하기 쉬운 코드를 작성하려면 객체 분해 할당을 적극적으로 활용해야 합니다.

아래 예제에서는 객체 분해 할당을 사용하여 person 객체의 프로퍼티들을 추출하여 사용합니다.

// 객체 분해 할당을 사용하지 않은 코드
const person = { name: "John", age: 30 };
const name = person.name;
const age = person.age;
console.log(name, age);  // 출력: John 30

// 객체 분해 할당을 사용한 코드
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name, age);  // 출력: John 30

위의 예제에서는 객체 분해 할당을 사용함으로써 person 객체의 프로퍼티들을 보다 간결하게 추출하고 있습니다.

프로퍼티 셋터/게터 (Property Setters/Getters)

프로퍼티 셋터와 게터를 사용하면 객체의 프로퍼티를 설정하거나 접근하는 과정을 커스터마이징할 수 있습니다. 이를 통해 객체의 상태를 좀 더 안전하게 관리하고 다양한 로직을 쉽게 적용할 수 있습니다.

아래 예제에서는 프로퍼티 셋터와 게터를 사용하여 circle 객체의 반지름(r) 값을 읽기 전용 속성으로 만들고, 원의 넓이를 계산하는 코드를 살펴봅니다.

class Circle {
    constructor(radius) {
        this._radius = radius;
    }
    get radius() {
        return this._radius;
    }
    set area(value) {
        throw new Error("Cannot set the area of a circle explicitly.");
    }
    get area() {
        return Math.PI * this._radius ** 2;
    }
}

const circle = new Circle(5);
console.log(circle.radius);  // 출력: 5
console.log(circle.area);  // 출력: 78.54

위의 예제에서는 Circle 클래스에 프로퍼티 셋터와 게터를 사용하여 radius 값을 읽기 전용으로 설정하고, area 값을 계산하는 로직을 담고 있습니다.

결론

객체 분해 할당과 프로퍼티 셋터/게터를 적절히 활용하면 코드의 가독성을 높일 수 있습니다. 이러한 기능들을 사용하여 보다 간결하고 읽기 쉬운 코드를 작성할 수 있으므로, TypeScript를 활용하는 개발자들에게 유용한 팁이 될 것입니다.

참고 자료: