목차

1. 주제 선정 이유

2. 상속

• 2-1. 상속의 정의 및 종류
• 2-2. 프로토타입과 상속의 관계
• 2-3. 클래스와 상속의 관계

3. 요약 정리 및 면접형 QnA

번외. 별도의 IT용어

1. 주제 선정 이유

코딩을 하다보면, 종종 상속이라는 용어를 많이 들어봤을 것이다. 물론, 상속의 사전적인 개념인 '하위존재가 상위존재로부터 무언가를 물림받는다.' 는 것 정도는 유추할 수 있을 것이다.
하지만, 코딩이나 IT업계에서 언급하는 상속에 대해 제대로 알고 넘어가는 것이 실제로 프로젝트에 적용할 때, 보다 수월하고 익숙하게 사용할 수 있을 것이기에 선정했다.

2. 상속

2-1. 상속의 정의 및 종류

• 자바스크립트에서 사용되는 상속은 프로토타입 상속과 클래스 상속 크게 두 가지로 나뉜다.
• 프로토타입 상속 : 상속을 받든 객체가 상속을 해주는 객체의 프로퍼티나 메서드를 추가로 사용할 수 있게 해주는 체계를 의미한다.
• 클래스 상속 : 기존의 클래스를 확장시키는 개념으로 이해하면 좋다. 상속받은 기존의 클래스를 토대로 새로운 기능을 추가하는 시스템을 의미한다.

2-2. 프로토타입과 상속의 관계

• 프로토타입 (객체) : 다른 객체에 대한 참조 하는 대상을 의미한다. 모든 객체는 [[prototype]]이라는 내부 프로퍼티를 갖는다.
• [[prototype]]를 저장창고라고 이해면 좋다.
  예를 들어, 아래의 경우, 전부 객체로 이루어져있기에 객체의 프로토타입은, [[prototype]] : Object 즉, Object.prototype이다.그리고 상속받는 객체들이 [[prototype]]안으로 들어간다.
• __proto__ : 객체가 자신의 프로토타입에 접근하도록 해주는 접근자 프로퍼티이다. 일종의 다리(bridge)라고 이해하면 좋을 듯하다.
  해당 프로퍼티를 사용하여 상속받을 객체가 자신의 프로토타입에 들어갈 수 있도록 연결해준다.
• 즉, __proto__ 를 사용하여 상위(부모) 객체가 하위(자식) 객체의 프로토타입에 추가되는 과정을 상속이라고 한다.
  

Q. 그런데 왜 프로토타입 상속을 하는 것인가요??

• 우선은 한 사례를 통해 살펴보자
  
• 위 예시의 경우, food를 상속받은 pasta 객체가 cook이라는 메서드를 자유롭게 사용할 수 있는 사례이다.
  즉, pasta 객체에서 cook메서드를 더 만들지 않고 상속받아 편하게 사용할 수 있다는 것을 의미한다.
  이는 곧, 코드의 재사용성을 높이고 , 관리를 용이하게 해준다는 장점을 갖고 있다.

2-3. 클래스와 상속의 관계

• 클래스(class) : 하나의 생성자 함수를 여러개 찍어낼 수 있게 해주는 문법으로 흔히 붕어빵 틀에 비유한다.
• 먼저 상속을 할 부모 클래스를 생성한다.

class Food {
    constructor (name) {
        this.name = name;
        this.won = 0;
    }

    price(won) {
        this.won = won;
        console.log(`${this.name}의 가격은 ${this.won}원 입니다.`)
    }

    pay(){
        console.log(`${this.won}원을 지불하셨습니다.`)
    }
}

const food = new Food("음식");

• extends : 이를 상속받을 자식 클래스를 생성할 때, 자식 클래스명 옆에 작성한다.

class Pasta extends Food {
    tasty(){
        console.log(`${this.name} 맛있네요!`)
    }
}

const pasta = new Pasta("아라비따 파스타");

• 위 예시를 합치면

class Food {
    constructor (name) {
        this.name = name;
        this.won = 0;
    }

    price(won) {
        this.won = won;
        console.log(`${this.name}의 가격은 ${this.won}원 입니다.`)
    }

    pay(){
        console.log(`${this.won}원을 지불하셨습니다.`)
    }
}

const food = new Food("음식");


class Pasta extends Food {
    tasty(){
        console.log(`${this.name} 맛있네요!`)
    }
}

const pasta = new Pasta("아라비따 파스타");

• pasta클래스는 food 클래스를 상속받고 있다는 것을 의미한다. 그렇기에 food클래스의 메서드를 사용할 수 있다.

pasta.price(12000; // 아라비따 파스타의 가격은 12000원 입니다.
pasta.pay(12000);  // 12000원을 지불하셨습니다.
pasta.tasty();  // 아라비따 파스타 맛있네요!

Q. 그런데 왜 클래스 상속을 하는 것인가요??

• 프로토타입의 상속을 하는 이유와 유사하게, 상속을 주고 받기에, 작성해야할 코드의 양이 줄어든다. 특히, 클래스의 경우, 생성자 메서드등 작성해야할 내용이 많기에, 상속의 장점이 더욱 부각된다.
• 코드의 재사용성을 높이고 , 관리를 용이하게 해준다는 장점이 있기 때문에 사용한다.

3. 요약 정리 및 면접형 QnA

QnA : 자바스크립트에서 사용하는 상속은 무엇이고, 그 기능이 무엇인가요??

• 상속은 상속받는 자식요소가 상속해주는 부모요소의 프로퍼티나 메서드를 추가로 사용할 수 있도록 확장해주는 기능입니다.
• 자바스크립트의 경우, 프로토타입 상속, 클래스 상속, 이렇게 두 가지 유형의 상속이 있습니다.
• 프로토타입의 상속은, 객체 안의 [[prototype]]라는 내부 프로퍼티안에 __proto__라는 접근자 프로퍼티로 객체들을 상속받아 저장하여 사용합니다.
• 클래스 상속은, 부모 클래스를 extends라는 키워드를 사용하여 자식 클래스가 상속받아 사용합니다.
• 상속을 사용하는 이유는 코드의 재사용성을 높이고, 유지보수가 필요한 경우, 특정 부분만 수정해도 되기에 관리를 용이하다는 장점이 있기 때문입니다.