16-2. 자바스크립트 특징 / 자바스크립트 객체 형태, JS의 OOP 구현 방법, prototype 형태/연결

JS 객체 형태

Object 오브젝트 형태
```
  var book = {
      read: function (param) {}
  }
```
- 빌트인 Object 오브젝트로 Object 오브젝트를 만드는 형태
- 인스턴스를 생성할 수 없음

Function 오브젝트 형태
```
  function readBook (param) {}
```
- 빌트인 Function 오브젝트로 Function 오브젝트를 만드는 형태
- 객체이지만, OOP의 객체라고 하기에는 부족
- 객체에 메소드가 하나 있는 모습

Function 오브젝트 형태는 OOP의 객체라고 부르기엔 부족합니다.
OOP의 객체는 개념적인 것으로 이것을 우리는 CLASS라고 부른다고 했습니다.
그리고 CLASS 안에는 0개 이상의 메소드가 있게됩니다.

그런데 Function은 오직 하나의 메소드만 있습니다.
그래서 OOP의 객체라고 하기엔 조금 작습니다.

prototype

JS의 OOP 구현 방법
- prototype에 메소드 연결
- prototype 형태

개발자 도구 열기 (Ctrl + Shift + I)
브라우저 새로고침 실행 (F5)
debugger 위치에서 실행 멈춤
debugger 종료 (F8)

자바스크립트는 이와 같이 prototype에다가 객체지향에서 말하는 메소드를 연결합니다.
구조 자체가 다릅니다.
그래서 다른 언어의 객체지향 구현 방법과 자바스크립트를 비교하는 것은 안됩니다.
OOP를 구현하는 방법 자체가 다르기 때문에 그렇습니다.

함수와 메소드를 구분하자는 이유가 이러한 이유도 있었던 것입니다.

prototype에 연결하여 작성
```
  var Book = function () {};
  // Function을 만들 때 Book.prototype은 자동으로 만들어집니다.
  // getBook은 메소드 이름이 됩니다.
  Book.prototype.getBook = function () {
      return "JS북";
  }
```
1. Book 함수 작성
2. Book.prototype에 getBook 메소드 연결
3. prototype이 오브젝트이므로 {이름 : 메소드} 형태로 연결할 수 있습니다.
위와 같이 만들면 됩니다.
심플하죠?
다만 우리는 위에처럼 prototype을 쓴다라는 겁니다.

위의 함수가 어떻게 연결되는지 확인해보겠습니다.

개발자 도구 열기 (Ctrl + Shift + I)
브라우저 새로고침 실행 (F5)
debugger 위치에서 실행 멈춤
debugger 종료 (F8)

이와 같이 자바스크립트는 prototype에 메소드를 연결하여 객체지향 형태를 만듭니다.

우리는 이와같이 Function 오브젝트를 2개의 형태로 활용할 수 있습니다.

prototype에 연결 안하고 단일 기능으로 사용하겠다. 또는
prototype에 연결해서 다수 기능으로 사용하겠다. (CLASS 개념)

CLASS 개념으로 쓸 때 위의 코드처럼

// 개발자들간의 시맨틱
// 함수 이름 첫글자를 대문자로 쓰면 이 함수는 CLASS 개념으로 사용하겠다는 의미
// 소문자면 단일 Function으로.. prototype에다가 메소드를 연결하지 않고 하나의 Function 오브젝트로 사용할거다라는 의미
var Book = function () {};
// Function을 만들 때 Book.prototype은 자동으로 만들어집니다.
// getBook은 메소드 이름이 됩니다.
Book.prototype.getBook = function () {
    return "JS북";
}

이런식으로 prototype에 연결하면 된다는 겁니다.

개발자들간의 시맨틱
함수 이름 첫글자를 대문자로 쓰면 이 함수는 CLASS 개념으로 사용하겠다는 의미
소문자면 단일 Function으로.. prototype에다가 메소드를 연결하지 않고 하나의 Function 오브젝트로 사용할거다라는 의미
이는 개발자들 사이에서 내려오는 일종의 관례라고 할 수 있습니다.
그래서 String, Number 등등 봐도 첫글자가 다 대문자입니다.

다른 언어는 class 안에
- 메소드와 프로퍼티를 작성하지만

자바스크립트는 prototype에
- 메소드를 연결하여 작성합니다.
- ES6에서 class에 메소드를 작성
```
  class Book {
      constructor (title) {
          this.title = title;
      }
      getBook() {
          return this.title;
      }
  }
```
  일반적인 객체 개념입니다.
  객체지향 언어는 위와 같이 class라는 단어를 씁니다.
  - class Book = var Book
- 하지만, 위와 같이 작성하더라도 자바스크립트 내부에서 prototype에 연결합니다.
```
  class Book {
      constructor (title) {
          this.title = title;
      }
      getBook() {
          return this.title;
      }
  }
```
  위의 코드를 아래와 같이 만들어 버립니다.
  코드를 위와 같이 작성하더라도 내부에선 아래처럼 만든다는 겁니다.
  그러니까 아래와 같은 prototype 개념을 이해하실 필요가 있습니다.
```
  var Book = function () {};
  Book.prototype.getBook = function () {
      return "JS북";
  }
```

prototype의 발전된 형태가 class이지만 구조적으로는 prototype으로 만들어진다는 겁니다.

LHJ

16-2. 자바스크립트 특징 / 자바스크립트 객체 형태, JS의 OOP 구현 방법, prototype 형태/연결