[JavaScript] Class 문법

취업 후, 첫 포스팅이다. 그 동안 면접 보고 준비하느라 포스팅을 많이 못 했는데 내일부터 오전 스터디를 진행할 계획이다.

오늘은 Arrow function으로 배워 공부하지 않았던 Class 문법에 대해 알아보자.

📌Class

---

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

예를 들어, 게임 League of Legends (LoL) 캐릭터들의 정보를 object 자료형으로 정리한다고 가정하자. 비슷한 object 많이 만들일 있으면 class 만들어 사용한다. (예) object 100만개)

 let nunu = {
	q: 'consume';
	w: 'snowball';
}
 let garen = {
	q: 'strike';
	w: 'snowball';
}

위 처럼 nunu와 garen이라는 캐릭터 및 100개의 objects를 생성한다고 하자. 반복적이며 비효율적이고 유지보수에도 좋지 않다.

function 기계() {
	this.q = 'consume';
	this.w = 'snowball';
} //부모(상속)

let nunu = new 기계(); //object 뽑아쓰고 싶을 때 사용
let garen = new 기계();
//자식(상속)
// 위 처럼 사용하면 문제가 있지 q의 values는 다르잖아

nunu라는 변수에 new 기계()라고 하면 부모의 기계를 자식이 상속하는 개념이다. 하지만 여기서 문제가 있다. 첫 번째 코드 박스를 참조하면 nunu와 garen의 q 값은 서로 다르기 때문이다. 그렇다면 어떻게 해줘야할까?

function 기계(구멍) { 
	this.q = 구멍;
	this.w = 'snowball';
}
let nunu = new 기계('consume')
let garen = new 기계('strike');

반복되는 데이터를 '구멍'(마음대로 작명가능)으로 이름지어서 상속받고 new 기계('여기에 값을 넣어준다').

// ES6 class 문법

class Hero {
	constructor(구멍) {
		this.q = 구멍;
		this.w = 'snowball';
	}
}

new Hero()
let 변수 = new Hero();

Class 문법을 사용하면 이렇게 표기하면 된다.