JavaScript 입문 : 클래스 기본 구조

지난시간 this에 대해 textRPG에 적용을 해보았습니다. 아울러 복잡한 코드를 좀 더 간편하게 할 수 있는 방식으로 클래스를 이용하여 코드를 재세팅하고자 할려고 했습니다. 그러기 위해서는 기본적으로 클래스가 무엇인지 개괄적인 내용을 공부하고 textRPG에 클래스를 적용해 보도록 하겠습니다.  

 

1. 클래스 정의

 

자바스크립트에서 Class(클래스)는 객체를 생성하기 위한 템플릿입니다. 따라서 데이터와 이를 조작하는 코드를 하나로 추상화 한다고 합니다.

 

2. 클래스 선언

 

클래스 문법을 활용하기 위하여 클래스 선언을 해야합니다. 이는 일종의 함수식이기 때문에 중괄호를 통하여 함수식을 표시하며 호출방식은 해당 클래스 이름에 new를 붙혀 호출합니다. 이때 둘다 이름은 대문자로 표시하는 것을 암묵적인 약속으로 하고 있습니다. 

 

따라서 클래스 호출시 class 대문자이름과 중괄호안에 생성자인 constructor(  ) 메소드를 사용합니다. 

 

3. 클래스 형태

 

다음 이름과 나이를 콘솔에 프린팅하는 예제를 보겠습니다. 

 

 

 

상기 그림을 기준으로 보면 ①번은 클래스명 Person으로 단어의 첫글자를 대문자로 선언합니다. 객체내 생성자인 ②번 constructor를 사용하여 name과 age를 매개변수로 설정하고 함수식 밖에서 실행코드인 ③번 new Person(  )으로 트리거 시킵니다. 

 

결과값은 다음과 같이 나오겠지요. 

 

 

그런데 단지 이러한 결과값을 얻고자 클래스 문법을 사용하는것이 아닙니다. 클래스 하나를 한 묶음으로 봤을때 해당 Person 클래스의 공통된 함수를 사용하고자 하고 나만의 내용은 별도로 하는 내용을 풀고자 하면 클래스를 extend 시키면 됩니다. 

 

예를 들어 Student라는 클래스를 만들고 이름과 나이에 대한 함수식은 부모클래스인 Person에서 가져오고 부모클래스에 없는 키와 성별만 Student 클래스에서 처리하고자 하면 다음과 같이 사용할 수 있습니다. 이때는 부모클래스 매개변수를 상속받아야 하는데 이때 사용하는 메소드가 super(  ) 메소드입니다. 

 

맨 위 class Person도 있고 다음 코딩을 같이 하면 결과값은 다음과 같이 나옵니다. 

 

 

 

결과값은 

 

 

 

우선 이러한 기본구조를 익히고 지속적으로 클래스 연습을 하면서 어떤 코딩방식이 자신에게 맞는지 스스로 판단해야 될 듯 합니다.