[JavaScript] Class 문법이란?

많은 언어에서 사용하는 객체지향 프로그래밍을 익히기 전에는 필수적으로 class 문법을 정확히 알고 넘어갈 필요가 있다.
정확한 class 문법 사용 전, 간단하게 사용 이유와 형태를 알아보자.

 

Class 문법?

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

 

LoL 게임을 빗대어 JavaScript의 Class 문법을 학습할 수 있다.

const nunu = {
	q: 'consume',
	w: 'snowball'
}

const garen = {
	q: 'strike',
	w: 'courage'
}

다음과 같이 캐릭터 별로 q, w 스킬을 object 자료형으로 저장할 수 있다.

하지만, 모든 캐릭터별로 위와 동일한 형태의 object를 사용하는 것은 데이터 낭비가 될 수 있다.

따라서, 위와 같이 비슷한 object를 많이 만드는 상황이 온다면, class를 활용하는 것이 좋다.

 

ES6 이전의 문법으로 class 객체 만들기

// ES6 이전의 Class 문법
function 캐릭터(qSkill, wSkill) {
	this.q = qSkill; // 새로 생성되는 캐릭터라는 object에 {q: qSkill}을 추가 하라는 의미
   	this.w = wSkill; // 새로 생성되는 캐릭터라는 object에 {w: wSkill}을 추가 하라는 의미 
}
// 여기서 this란 캐릭터라는 class로부터 생성되는 instance이다.

// object 뽑아서 사용하기
const nunu = new 캐릭터('consume', 'snowball');
const garen = new 캐릭터('strike', 'courage');

 

ES6 이후 새로운 문법으로 class 객체 만들기

// ES6 이후 새로운 문법으로 class 생성
class 캐릭터 {
	constructor() {
		this.q = qSkill; // 새로 생성되는 캐릭터라는 object에 {q: qSkill}을 추가 하라는 의미
		this.w = wSkill; // 새로 생성되는 캐릭터라는 object에 {w: wSkill}을 추가 하라는 의미 
    }
}
// 여기서 this란 캐릭터라는 class로부터 생성되는 instance이다.

// object 뽑아서 사용하기
const nunu = new 캐릭터('consume', 'snowball');
const garen = new 캐릭터('strike', 'courage');

 

아주 간단히 표현했지만 이것이 객체 지향 프로그래밍의 시작이라 할 수 있다. 

👉 정확한 class 문법 사용 알아보기

 

 

 

 

 

 

 

 

해당 자료는 유튜브 코딩애플의 자료를 토대로 작성되었습니다.
https://www.youtube.com/watch?v=dHrI-_xq1Vo