[자바스크립트] class 문법 이해하기

class에 대해서 알아보겠다. 

무언가를 배울 때는 이것이 어떤 상황에서 사용될 지 가정하면서 만들면 

이해하는데에 한 층 더 도움이 된다. 

 

헬스장에서 사람들을 관리하는 상황이라고 가정을 해보자. 

사람들에 대한 정보를 관리해야 한다. 

그리고 우리는 js 자료형에다가 먼저 정보들을 담아두어야 겠다고 생각하고 있다. 

 

헬스장에 철수와 병철이가 왔다. 

var 철수 = {
키: 175,
몸무게: 70,
}

var 병철 = {
키 : 180,
몸무게: 85,
}

이런식으로 저장을 했다고 하자. 

 

그런데, 영희와 수진이가 또 헬스장에 등록을 하러 왔다. 

var 영희 = {
키 : 165,
몸무게 : 50,
}

...

계속 이런식으로 일일이 사람들의 정보를 쭉 정리해나가면, 

반복된 노동이 너무 많아진다. 

 

이런 상황에서 유용하게 사용될 수 있는 것이 바로 class다. 

이 class는 object를 뽑아내는 기계라고 생각하면 된다. 

 

옛날문법부터 배워보자. 옛날에는 func 키워드로도 class를 만들 수 있었다. 

function 등록기계() {
this.키 = 170;
this.몸무게 = 65;
}

this라는 것이 존재하는 이상, 이것은 더이상 단순한 func이 아니다. 

지금 이제 등록기계를 하나 만들었다. 여기서 this는 기계로부터 새로 생성되는 object라고 보면 된다. 멋진말로 instance라고 부를 수 있다. 

this.키 = 170

이것이 무슨 말이냐? 조금 더 설명을 해보자면 다음과 같다. 

새로 생성되는 object에 {키 : 170}을 추가해달라. 라는 말을 하고 있는 것이다. 

이제 등록기계를 다 만들었다. 

이것을 사용해보자. 

 

var 철수 = new 등록기계();

이렇게 만들면 된다. 이렇게 만든 코드의 의미는 무엇이냐? 

var 철수 = {
키: 170,
몸무게: 65,
}

이 코드와 똑같은 코드가 되는 것이다. 

 

이런 편리함을 위해서 사용하는 문법이 바로 클래스 객체지향 문법이다. 

철수를 콘솔로 출력해보면 키와 몸무게 값을  잘 가지고 있는 것을 확인할 수 있다. 

이제 병철이도 생성해보자. 

var 병철 = new 등록기계();

이렇게 쉽고 짧게 코드를 작성할 수 있다. 

 

그런데, 아직 해결되지 않은 문제점이 있는데, 철수와 병철이의 키와 몸무게가 똑같다.

어떻게하면 이 둘을 다르게 생성할 수 있을까? 

 

등록기계에 구멍을 뚤어서 다른 값을 넣어주면 된다. 우리는 이 구멍을 파라미터라고 부른다. 

function 등록기계(구멍) {
this.키 = 구멍; 
this.몸무게 = 60
}

이렇게 기계에 구멍을 내면 등록기계로 회원정보를 생성할 때, 각각 다른 값을 넣어줄 수 있다. 

 

var 철수 = new 등록기계(170);
var 병철 = new 등록기계(180);

이렇게 생성하면, 철수.키는 170이 되고, 병철.키는 180이 될 것이다. 

 

이제 이와 동일하게 클래스 문법을 사용하면, 

class 회원등록기계 {
 constructor(){
this.키 = 구멍;
this.몸무게 = 60
}
}

이렇게 만들면 위에서 함수를 통해 만든것과 똑같다. 

이제 이 클래스로부터 나오는 것이 인스턴스이고,

여기서부터 부모 자식간의 관계가 탄생한다.