JS에서 OOP

이제 객체지향프로그래밍은 실제로 어떻게 하는 것인지 알아보자.

우선 객체가 클래스의 인스턴스라고 했으니 클래스를 알아보자.

CLASS

: 객체를 생성하기 위한 템플릿,
데이터와 데이터를 조작하는 코드를 하나로 추상화한다.
(출처 MDN)

나는 이전에 동물과 강아지를 Class 와 Object에 비유된 설명을 올려놨었는데,

어느정도 이해되나 싶더니 갑자기 템플릿이란 용어가 나온다.
템플릿은 많이들 알겠지만, 보틍은

'이미 만들어 둔 형식 문서들'

을 가르킨다.

그럼 객체를 생성하기 "위한" 템플릿이란 것은.

이전 예시로 돌아가면,

강아지는 동물의 인스턴스가 된다. 까지 기억한다면,
이제 우리는 그 개념만 이해하는게 아닌, 그래서 어떻게 구현하는가에 대해 보고 있는 것이다.

강아지라는 객체를 생성하기 위해서, 동물이라는 클래스를 '선언'해 주고,
동물 클래스를 통해서, 강아지 객체를 만들어 준다고 생각하면 된다.

1줄 요약.

'객체를 만들어주기 위해, 클래스부터 만든다'

Class 선언

class Animal {
  constructor(leg) {
    this.leg = 4;
  }
}

js 문서에 class 키워드로 시작해서 원하는 이름을 짓는다.
여기서 함수표현식과 비슷하다고해서 함수처럼 사용하면 안되는 부분이 클래스는
Hoisting때 초기화되지 않는다. Hositing 개념은 나중에 더 깊게 알아보고,

단순하게 말하면



"선언하기 전에 사용될 수 없다."




함수는 사용해놓고 그 다음 선언을 해도 문제가 없지만,
클래스는 변수 처럼 이전에 있지 않으면 ReferenceError 가 발생한다.

Class 표현

Class 표현식은 class를 정의하는 또 다른 방법 중 하나로,
이때 class 표현식은 이름을 가지지 않을 수도 있다.

///출처 : MDN 
// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle2"

보면 Rectangle 이라는 변수를 선언하고,
할당 값에 class 키워드로 시작해서 표현식으로 나타나는데,
실제로 사용할때, 나는 선언식만 쓴다.

클래스 표현식을 그대로 쓰는 것보다 직관적으로 보기 편하다.

Constructor (생성자)

위 코드를 보면 , 클래스 안에

constructor(){}

가 있다.

이 생성자가 바로 새로운 객체를 생성하고 초기화 해주는 Method이다. Method를 모른다면 일종의 함수라고 생각해두자.

여기서 바로 생성될 객체의 속성(properties) 와 행위(behavior:Method)를 정의한다.

이것도 또한 실제 예를 보면 쉽게 이해가 된다.

class Bird {
  constructor(name, color) {
  	this.name = name;
  	this.color = color;
  	this.numLegs = 2;
  }
};

let swan = new Bird("Carlos", "white");

console.log(swan.name); // Carlos

우선 Bird 라는 Class 를 만들어서 그 안에 생성자를 통해
이름, 색 그리고 다리 개수를 할당한 상황이다.

this.~ = ~ ; 으로 표현된 코드는, 영어 그대로

"이것의 ~는 ~입니다"

라고 보면 정말 쉽다.

constructor(name,color){...}

생성자의 인자값(arguement)을 보면 name 과 color 가 필요하다.
그래서 swan이라는 객체를 생성할 때,

let swan = new Bird("Carlos", "white");

new 키워드로 시작해 Bird를 할당하고 인자값으로

name 에는 "Carlos",
color 에는 "white"

를 선언해 주었다.

그러면 생성자(constructor)를 통해

this.name = "Carlos",
this.color = "white"

로 속성들이 초기화되면서

"swan"이라는 개체가 클래스 Bird의 속성을 물려받으면서, 인자값을 통해 새로 할당되어 지는 것이다. 당연히 swan의 다리개수 2개도 그대로 가져온다.

단 클래스에서는

기본적인 규칙으로는

클래스 안에는 1개의 Constructor 생성자만 존재가 가능하다.

오늘의 3줄 요약.

1. 객체를 생성하기 위해서는 "클래스"부터 만들어 준다.
2. 클래스를 만들때는 선언/표현식이 있으며, 생성하기 전에 사용할 수 없다.
3. 클래스의 생성자는 1개만 있을 수 있다.

그러면 다음 주제는 JAVASCRIPT PROTOTYPE이다.

소위 '자바스크립트는 프로토타입 기반 언어이다.' 라고 할 정도로 중요한데, 그전에 클래스에 대한 기본적인 이해가 필요했다.

사실 포스팅에서 안다룬 클래스의 여러가지 문법들이나 특성이 더 많지만, 클래스를 선언하는 정도에서 마치고, 나머지 내용들은 더 깊게 봐야하기 때문에 따로 올리는게 좋을 것 같다.