클래스(class)는 자바(Java), C++. C# 등 객체지향형 프로그래밍 언어에서 사용되는 방식입니다. 자바스크립트도 클래스 사용이 가능한데요. 정통 클래스에는 미치지 못하나 클래스를 표방한 개념을 사용하는 사례가 많습니다. ( node.js, react 프레임워크 등 )
클래스란 무엇일까요?개념은 간단합니다. 설계도입니다.
하지만 능숙히 사용하려면 어느정도 숙련된 기술을 필요로 합니다.
예를 들어 컴퓨터를 만들 수 있는 설계도가 있다고 칩시다. 이 설계도가 바로 클래스입니다.
그리고 설계도를 이용해 만들어낸 컴퓨터는 오브젝트가 됩니다.
컴퓨터의 설계도는 1개지만 그로 인해 컴퓨터 오브젝트는 무한으로 만들어낼 수 있습니다.
클래스는 2단계로 나뉘어 선언을 하는데요.
첫번째는 설계도에 해당하는 클래스를 선언하는 것이고,
두번째는 클래스로 오브젝트를 선언하는 것입니다.
클래스 표준 사용법은 보통 아래와 같은데요.
| class 클래스이름 { constructor() { this.속성=값; } 함수이름(파라미터, 파라미터, ...) { 실행할 코드 } } |
| let 변수=new 클래스이름(); |
실제 사용 예를 들어보도록 하겠습니다. 먼저 동물(Animal)이라는 빈 클래스를 선언합니다.
| class Animal { } |
동물이라는 클래스는 설계도일 뿐 오브젝트가 아니기 때문에 아직 존재하지 않습니다.
이 설계도로 오브젝트를 만드는 방법은 아래와 같습니다.
| let Fish = new Animal(); |
클래스 Animal 로 오브젝트 Fish 를 만드는 방법인데요.
비록 아무 내용도 없긴 하나 Fish는 오브젝트이기 때문에 오브젝트에 바로 속성을 추가할 수도 있고 함수도 추가할 수 있습니다. 하지만 이런 방법은 클래스 방식이 아닙니다.
| Fish.abc = function(){ console.log("abc"); }; |
클래스 방식으로 함수를 추가해보겠습니다.
| class Animal { setInfo(animalType, name, age) { this.animalType=animalType; this.name=name; this.age=age; } showInfo() { switch(this.animalType) { case 1: console.log("동물 유형 : 육축"); break; case 2: console.log("동물 유형 : 물고기"); break; case 3: console.log("동물 유형 : 새"); break; default: console.log("동물 유형 : 알수없음"); } console.log("동물 이름 : " + this.name ); console.log("동물 나이 : " + this.age ); } } |
추가된 함수는 2가지인데요. 하나는 setInfo()이고, 하나는 showInfo() 입니다.
setInfo() 함수는 동물의 유형, 이름, 나이를 설정하는 함수이고,
showInfo() 함수는 동물의 정보를 보여주는 함수인데요.
클래스에서 함수를 선언했지만 아직 함수를 사용할 수는 없습니다.
| Animal.setInfo(2, "고등어", 2); ( X ) |
함수는 오브젝트에서만 사용해야 합니다. 아래와 같이 말이지요.
Fish(물고기) 오브젝트를 선언, 정보를 설정하고 보여주는 부분입니다.
| let Fish = new Animal(); Fish.setInfo(2, "고등어", 2); Fish.showInfo(); |
| 출력결과 동물 유형 : 물고기 동물 이름 : 고등어 동물 나이 : 2 |
클래스의 유용한 점은 이제부터 시작입니다.
Animal 이란 클래스가 있기 때문에 아래 코드를 실행하면 또 하나의 오브젝트가 생겨나는데요.
이 번에는 Animal 클래스로 Cow(소) 오브젝트를 선언, 정보를 설정하고, 보여주었습니다.
| let Cow = new Animal(); Cow.setInfo(1, " 소", 10); Cow.showInfo(); |
| 출력결과 동물 유형 : 육축 동물 이름 : 소 동물 나이 : 10 |
아마도 오브젝트 방식이었다면 Fish와 Cow 각각 함수를 제작해야 했을 것입니다.
여기서 더 나은 방법이 있습니다. 현재 setInfo() 함수는 오브젝트 생성 후 항상 호출하고 있는데요. 생성자(constructor) 함수를 사용하면 초기화 부분을 생략할 수 있습니다.
그래서 오브젝트 생성 후 초기화를 매우 간결하게 할 수 있습니다. 코드는 아래와 같습니다.
| class Animal { constructor(animalType, name, age) { this.animalType=animalType; this.name=name; this.age=age; } : |
| let Cow = new Animal(1, " 소", 10); |
constructor 함수는 클래스를 이용, 오브젝트를 선언할 때 자동 실행이 되는데요.
오브젝트 선언시 주어지는 파라미터가 순서대로 각각 입력됩니다.
그래서 오브젝트 선언할 때 코드를 간결하게 사용할 수 있습니다.
| let Fish = new Animal(2, "고등어", 2); Fish.showInfo(); |
| 출력결과 동물 유형 : 물고기 동물 이름 : 고등어 동물 나이 : 2 |
| let Cow = new Animal(1, " 소", 10); Cow.showInfo(); |
| 출력결과 동물 유형 : 육축 동물 이름 : 소 동물 나이 : 10 |
필요하신 분에게 도움이 되시길 바랍니다. 그러면 이만 :)
도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
