자바스크립트 완전 정복: 프로토타입, 클래스, 메서드 그리고 접근자 심층 분석

자바스크립트 객체 지향 프로그래밍의 핵심: 프로토타입과 클래스

자바스크립트는 강력한 객체 지향 프로그래밍 언어입니다. 그 중심에는 프로토타입 기반의 상속 메커니즘이 자리 잡고 있으며, ES6에서 도입된 클래스 문법은 이를 더욱 쉽고 직관적으로 사용할 수 있도록 도와줍니다. 이 글에서는 프로토타입, 클래스, 메서드, 접근자를 심층적으로 분석하여 자바스크립트 객체 지향 프로그래밍의 핵심을 완벽하게 이해할 수 있도록 안내합니다.

1. 프로토타입 기반 상속: 객체 공유의 마법

프로토타입이란 무엇인가?

자바스크립트에서 모든 객체는 [[Prototype]]이라는 숨겨진 속성을 갖습니다. 이 속성은 다른 객체를 참조하는 역할을 하며, 이를 통해 객체는 자신의 속성뿐만 아니라 프로토타입 객체의 속성과 메서드에도 접근할 수 있습니다. 이는 마치 가족 구성원이 유산을 공유하는 것과 유사합니다.

프로토타입 체인: 속성 검색의 경로

객체의 프로토타입이 또 다른 프로토타입을 참조하는 방식으로 연결되어 있는 것을 프로토타입 체인이라고 합니다. 자바스크립트 엔진은 객체의 속성에 접근하려고 할 때, 객체 자체에 해당 속성이 없다면 프로토타입 체인을 따라 상위 프로토타입에서 속성을 찾습니다. 이러한 메커니즘을 통해 코드 재사용성을 높이고 메모리 효율성을 개선할 수 있습니다.

프로토타입 기반 상속 예제

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(this.name + "이(가) 소리쳤습니다.");
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
    console.log(this.name + "이(가) 짖었습니다.");
};

const myDog = new Dog("코코", "푸들");
myDog.speak(); // "코코이(가) 소리쳤습니다." 출력
myDog.bark(); // "코코이(가) 짖었습니다." 출력
console.log(myDog.breed); // "푸들" 출력

위 예제에서 Dog 객체는 Animal 객체의 speak 메서드를 상속받아 사용할 수 있으며, 자신만의 bark 메서드를 추가하여 기능을 확장할 수 있습니다.

2. 클래스: 객체 정의의 새로운 지평

ES6 클래스: 프로토타입 기반 상속의 편리한 문법

ES6에서 도입된 클래스 문법은 자바스크립트에서 객체를 정의하고 생성하는 더욱 편리하고 구조화된 방식을 제공합니다. 클래스는 내부적으로 프로토타입을 사용하여 작동하지만, 개발자가 프로토타입을 직접 조작하는 대신 클래스 정의를 통해 객체를 쉽게 생성하고 관리할 수 있도록 해줍니다.

클래스 선언과 상속

class 키워드를 사용하여 클래스를 정의하며, extends 키워드를 사용하여 다른 클래스를 상속받을 수 있습니다. 상속받은 클래스는 부모 클래스의 속성과 메서드를 사용할 수 있으며, 자신만의 속성과 메서드를 추가하여 기능을 확장할 수 있습니다.

클래스 기반 상속 예제

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(this.name + "이(가) 소리쳤습니다.");
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    bark() {
        console.log(this.name + "이(가) 짖었습니다.");
    }
}

const myDog = new Dog("코코", "푸들");
myDog.speak(); // "코코이(가) 소리쳤습니다." 출력
myDog.bark(); // "코코이(가) 짖었습니다." 출력
console.log(myDog.breed); // "푸들" 출력

3. 메서드와 접근자: 객체의 행동과 속성 제어

메서드: 객체의 행동 정의

메서드는 객체의 특정 작업을 수행하는 함수입니다. 클래스 내부에서 정의되며, 객체의 인스턴스를 통해 호출할 수 있습니다.

접근자 (Getter/Setter): 속성 접근 제어

접근자는 객체의 속성에 대한 접근을 제어하는 특별한 메서드입니다. Getter는 속성 값을 읽을 때 호출되며, Setter는 속성 값을 설정할 때 호출됩니다. 접근자를 사용하면 속성 값에 대한 유효성 검사나 추가적인 처리를 수행할 수 있습니다.

메서드와 접근자 예제

class Circle {
    constructor(radius) {
        this._radius = radius; // 내부 속성
    }

    get radius() {
        return this._radius;
    }

    set radius(value) {
        if (value <= 0) {
            throw new Error("반지름은 양수여야 합니다.");
        }
        this._radius = value;
    }

    getArea() {
        return Math.PI * this._radius * this._radius;
    }
}

const circle = new Circle(5);
console.log(circle.radius); // 5 (Getter 호출)
circle.radius = 10; // Setter 호출
console.log(circle.getArea()); // 314.1592653589793

결론: 프로토타입과 클래스의 조화로운 활용

프로토타입과 클래스는 자바스크립트 객체 지향 프로그래밍의 핵심 개념입니다. 프로토타입 기반 상속을 통해 코드 재사용성을 높이고 유연한 객체 모델링이 가능하며, 클래스 문법을 통해 더욱 직관적이고 편리하게 객체를 정의하고 관리할 수 있습니다. 메서드와 접근자를 활용하여 객체의 행동과 속성을 효과적으로 제어함으로써 더욱 강력하고 안전한 프로그램을 개발할 수 있습니다. 이 세 가지 개념을 완벽하게 이해하고 활용하는 것은 자바스크립트 개발자의 필수적인 역량입니다.