[S2U2] JavaScript 객체 지향 프로그래밍

 

객체 지향

---

객체 지향 프로그래밍이란?

하나의 청사진을 만들고
그 청사진을 바탕으로, 즉 자바스크립트에서는 class를 바탕으로 하는
하나의 객체, 즉 instance를 만드는 프로그래밍 패턴을 의미한다.

 

✏️ 클래스와 인스턴스

클래스는 속성과 메소드를 정의하는 공간이고 인스턴스는 클래스에서 정의된 정보드를 가져와 이용하는 객체이다.

속성은 클래스에 포함되는 변수를 의미하고, 메소드는 클래스에 포함되는 함수를 의미한다.

 

클래스를 정의하는 데에는 2가지 방법이 있다.

• 함수로 정의 (ES5 문법)

function Introduce(name, age, favorite) {
    // 인스턴스 만들어질 때 실행되는 코드
}

• class 키워드로 정의 (ES6 문법)

class Introduce {
    constructor(name, age, favorite) {
        // 인스턴스가 만들어질 때 실행되는 코드
    }
}

여기서 constructor는 클래스가 인스턴스 객체를 생성할 때 객체를 초기화하는 메소드이다. 

 

constructor 메소드를 다음과 같이 사용한다면,

class Person {
    constructor() {
        this.name = 'subin';
    }
}

let sujin = new Person();

Person 클래스의 생성자 메소드의 this.name = 'subin'에 의해 sujin.name의 값은 'subin'으로 고정되는 것으로 초기화를 수행한다.

 

만약, constructor 메소드가 아래와 같이 사용되면

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

let sujin = new Person('sujin');

이번에는 첫 번째 예시와 다르게 construnctor 클래스 생성자에 name 속성을 부여했기 때문에, sujin.name은 인스턴스 객체를 생성하면서 설정한 속성값 'sujin'이 된다.

 

인스턴스는 생성할 때 new 키워드를 이용한다.

let myself = new Introduce('subin', 28, 'apeach');

Introduce라는 클래스를 만들었다고 가정하고, myself라는 인스턴스 객체를 만들고자 한다면 Introduce 클래스 명 앞에 new라는 키워드를 붙여 let myself = new Introduce();의 형태로 인스턴스를 만들 수 있다.

속성자 메소드에 정의된 속성이 존재한다면 인스턴스를 생성할 때 속성 정보를 함께 입력한다.

 

✏️ 클래스의 ES5와 ES6 문법 차이

위에서 클래스를 정의하는데 2가지 방법이 있다고 하였는데, 클래스 내에 메소드를 작성할 때 더 차이를 두드러지게 보여준다.

 

• ES5 문법

function Introduce(name, age, favorite) {
    this.name = name;
    this.age = age;
    this.favorite = favorite;
}

Introduce.prototype.study = function() {
    // 공부하는 시간을 알려주는 코드
}

Introduce.prototype.game = function() {
    // 게임하는 시간을 알려주는 코드
}

Introduce.prototype.sleep = function() {
    // 잠자는 시간을 알려주는 코드
}

 

위의 코드에서 볼 수 있듯이 함수로 정의한 Introduce 클래스 내에서는 속성에 대한 초기화만 해주고, 그 외 메소드는 전부 함수 바깥에서 prototype 키워드를 사용해 정의해준다.

• ES6 문법

class Introduce {
    constructor(name, age, favorite) {
        this.name = name;
        this.age = age;
        this.favorite = favorite;
    }
    study() {
        // 공부하는 시간을 알려주는 코드
    }

    game() {
        // 게임하는 시간을 알려주는 코드
    }

    sleep() {
        // 잠자는 시간을 알려주는 코드
    }
}

반면에 ES6 문법에서는 Introduce 클래스 내에 constructor 메소드와 함께 묶어서 다른 메소드를 정의하는 모습을 볼 수 있다.

 

 

객체 지향 프로그래밍

---

객체 지향 프로그래밍(Object Oriented Programming, OOP)이란?

하나의 청사진을 만들고
그 청사진을 바탕으로, 즉 자바스크립트에서는 class를 바탕으로 하는
하나의 객체, 즉 instance를 만드는 프로그래밍 패턴을 의미한다.

조금 더 덧붙이자면,
객체 지향 프로그래밍은 모든 것을 "객체"로 받아들이고 기존에 만들어 둔 객체를 재사용할 수 있다.

 

✏️ OOP의 4가지 특징

캡슐화(Encapsulation)

: 객체의 속성과 메소드를 하나로 묶는 것을 말한다. 특정 속성이나 메소드를 감출 수 있기 때문에 정보 은닉으로 사용할 수 있다.

 

대부분의 객체 지향 프로그래밍 언어는 클래스를 정의하고 그 클래스를 구성하는 속성과 메소드에 대해 public, private, protected와 같은 접근 제한자를 선언해 공개 범위를 한정할 수 있다.

public은 클래스 외부에서 참조 가능한 속성과 메소드, private는 클래스 외부에서 참조 불가능한 속성과 메소드, protected는 상속받는 객체에 한해서 참조 가능하게 하는 속성과 메소드를 의미한다.

 

자바스크립트에서는 문법적으로 접근 제한자를 제공하지는 않고 기본적으로 객체의 모든 속성과 메소드가 public하며, 속성이나 메소드 이름 앞에 언더 바(_)를 붙여 접근을 제한할 수 있다.

 

추상화(Abstraction)

: 다양한 속성과 메소드 중에서 필요한 것만 표현하는 것을 의미한다.

 

사람이라는 클래스가 있다고 하면 그 안에는 이름, 나이, 키, 몸무게, 직업 등의 다양한 속성과 메소드가 있다고 가정하자. 여기서 원하는 정보만 가져와 학생이라는 클래스를 새로 만들면 학생과 관련되어 있는 속성과 메소드만 추출해서 구성을 하게 된다.

 

이와 같이 필요한 정보만 가져와 구성하는 것을 추상화라고 한다.

 

상속(Inheritance)

: 어떤 객체의 속성과 메소드를 다른 객체가 그대로 사용할 수 있는 것을 의미한다.

 

동물이라는 클래스가 있다고 가정하자. 강아지, 고양이, 새 등은 본질적으로 동물의 파생이기 때문에 동물 클래스를 상속받아 작성할 수 있다. 상속받아 작성된 강아지, 고양이, 새 클래스는 기본 클래스인 동물 클래스의 속성과 메소드를 사용할 수 있다.

 

다형성(Polymorphism)

: 어떤 변수나 메소드가 상황에 따라서 다른 결과를 보여주는 것을 의미한다.

 

강아지, 고양이, 새는 전부 동물 클래스의 파생 클래스이지만 각 동물들의 울음소리는 전부 다르다. 동물 클래스에 울음소리()라는 메소드가 있다고 가정하면 파생 클래스에도 울음소리()라는 메소드가 존재하게 된다. 파생 클래스들의 울음소리() 메소드를 각 동물에 맞게 새로 작성하면 각 파생 클래스의 메소드를 실행함에 따라 다른 결과를 보여주게 된다.

 

 

프로토타입

---

프로토타입이란?

프로토타입은 원형 객체로, 어떤 객체의 부모 객체 역할을 하는 객체이다.

 

✏️ .prototype와 __proto__

prototype 속성은 함수 객체만이 소유하는 속성으로 생성자가 생성할 인스턴스의 프로토타입을, __proto__ 접근자 속성은 자신의 프로토타입에 간접적으로 접근할 수 있는 속성을 가리킨다.

prototype은 생성자 함수가, __proto__는 모든 객체가 사용 주체이다.

구분	소유	값	사용 주체	사용 목적
prototype	constructor	프로토타입의 참조	생성자	생성자 함수가 생성할 인스턴스의 프로토타입을 할당
__proto__	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근

 

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

    like() {
        console.log(`${this.name}은 ${this.favorite}을 좋아합니다.`);
    }
}

const subin = new Person('수빈', '어피치');

위와 같은 Person이라는 클래스가 있다고 하면

Person.prototype.constructor === Person; // true

Person 생성자 내의 객체를 생성하는 것은 Person() 생성자이다.

즉 Person.prototype.constructor는 class Person { ... }을 의미한다.

Person.prototype === subin.__proto__; // true

 

Person 생성자 내의 객체는 subin 인스턴스의 프로토타입과 같다.

즉 Person.prototype과 subin.__proto__는 Person 내의 객체인 {constructor: f, like: f}을 의미한다.

Person.prototype.like === subin.like; // true

Person 내의 객체와 subin 내의 객체는 동일하다.

즉 Person.prototype.like와 subin.like는 like() 메소드를 의미한다.

 

✏️ 프로토타입 체인

프로토타입 체인이란?

자바스크립트는 객체의 속성과 메소드에 접근할 때 해당 객체에 접근하고자 하는 속성과 메소드가 없을 경우 부모 역할을 하는 프로토타입의 속성과 메소드를 순차적으로 검색한다.
이것을 프로토타입 체인이라고 한다.

 

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

    like() {
        console.log(`${this.name}은 ${this.favorite}을 좋아합니다.`);
    }
}

const subin = new Person('수빈', '어피치');

subin은 Person에 의해 생성된 인스턴스이기 때문에 Person.prototype의 메소드인 like()를 사용할 수 있다.

이처럼 subin.like()가 가능한 이유가 바로 프로토타입 체인때문이다.

 

프로토타입 체인의 최상위에 존재하는 객체는 항상 Object.prototype이다. 이는 __proto__ 속성을 이용해서 확인할 수 있다.

subin.__proto__; // Person.prototype
subin.__proto__.__proto__; // Object.prototype
subin.__proto__.__proto__.__proto__; // undefined

 

subin.__proto__의 프로토타입은 Person.prototye이다.

Person.prototype의 프로토타입은 Object.prototype, 즉 프로토타입 체인의 종점이다.

여기서 .__proto__를 한 번 더 실행하면 더 이상 __proto__ 속성을 검색할 수 없기 때문에 undefined가 반환된다.