코드스테이츠 부트캠프 프론트엔드 44기
Section 2 Unit 2 : [JavaScript] 객체 지향 프로그래밍

1. 클래스와 인스턴스

클래스, 인스턴스, new 키워드, 생성자 함수(Constructor) 이런 것들, Python/C#에 익숙한 나로서는 지긋지긋할 정도로 잘 알고 있는 개념이다. 블로그에 상세히 적어봤자 시간 낭비일 뿐이다.

한편 ES5 이전까지는 JavaScript에 클래스라는 개념이 없었다. 그때는 함수(생성자 & 클로저)와 프로토타입을 이용해서 객체 지향 프로그래밍이 가능했기 때문이다. 하지만 학습 장벽 및 가독성 문제 때문에 ES6부터 클래스를 추가하게 되었고, 기존 생성자 함수에 비해 더 엄격하고 더 다양한 기능을 가지고 있다.

참고로 JavaScript에서의 클래스는 함수의 문법적 설탕(Symtactic Sugar)이다. 그러니까 함수-클래스가 서로 완전히 다른 개념이 아니라, 기존의 함수를 보기 좋게 개조해서 클래스를 만든 것이다.

class Person { }
console.log(typeof Person);  // function

그래서 클래스의 타입은 function이라고 나온다.

2. 객체 지향 프로그래밍

• 【캡슐화】
  인스턴스 안의 변수/함수를 밖에서 사용 못 하게 하는 것.

• 【추상화】
  person.hello()를 호출하면 인사하는 문자열이 출력된다고 쳐보자. 한번 기능을 구현해놓으면, 프로그래머/사용자는 person.hello()의 자세한 내부 로직을 몰라도 된다.

• 【상속】
  부모 클래스의 특징(속성/메서드 등)을 자식 클래스가 물려받는 것. 의외로 상당히 유용하다.

• 【다형성】
  만약에 Animal이라는 클래스에 다형성이 없다면, Cow든 Dog든 Chicken이든 다 '멍멍'하고 울 것이며, 울음소리를 달리하기 위해서는 수백 만 블록의 if문을 사용해야 할 것이다. 다형성을 적용하면 각 자식 클래스들은 Animal의 인터페이스를 상속받아 자신만의 울음소리를 집어넣으면 된다.

3. 프로토타입과 클래스

프로토타입은 프로토타입 객체를 말하며, 상속을 구현하기 위해서 사용된다.

• 【prototype】
  클래스에서, 인스턴스한테 물려줄 자신의 특징(속성/메서드 등)을 말한다.
• 【__proto__】
  인스턴스에서, 클래스로부터 물려받은 특징(속성/메서드 등)을 말한다. 참고로 EsLint에서는 __proto__ 접근자를 사용하지 말 것으로 규정하고 있다.

4. 프로토타입 체인

class Person {

}

class Student extends Person {

}

const waypil = new Student();

여기서 Person이 Student에게 프로토타입을 물려주고 Student는 Person에게 물려받은 몫까지 포함, waypil 인스턴스에 프로토타입을 물려주는데 이러한 연속 상속을 프로토타입 체인이라고 한다.

참고로 JavaScript의 모든 클래스는 Object를 상속받는다.

<주의 사항>

이 게시물은 코드스테이츠의 블로깅 과제로 제작되었습니다.
때문에 설명이 온전치 못하거나 글의 완성도가 낮을 수 있습니다.