클래스는 초심자에게 사실 어려운 문법입니다. 여기부터는 기본 사항이 아니니 추가적인 공부를 하고 싶은 분들만 보시기 바랍니다.

클래스는 조금 특별한 기능을 수행하는 함수입니다.

보통 클래스는 붕어빵 틀에 비교합니다. 한 가지 붕어빵 틀에 팥을 부으면 팥붕어빵이 되고, 슈크림을 부으면 슈크림 붕어빵이 되듯이, 일단 클래스라는 붕어빵 틀을 만들면 조금씩 달라지는 붕어빵들을 계속해서 찍어낼 수 있습니다.

클래스의 문법은 다음과 같습니다.

class MyClass {
  constructor() { ... } //클래스를 호출했을 때, 맨 처음 실행되는 함수입니다.
	//여러 메서드(함수)를 추가로 정의할 수 있고, 
	//메서드는 처음 함수를 호출했을 때에는 실행되지 않습니다.
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
};

여기서 constructor는 class가 처음 실행될 때 사용되는 함수입니다. 즉, 다른 말로 class라는 함수를 호출 할 때의 매개변수는 constructor가 담당합니다.

아래의 예제를 살펴봅시다.

class MyClass {
	constructor(name) {
		this.myName = name;
	};
	method1() {...}
};

const a = new MyClass("Nicolas"); //new키워드를 사용해서 호출

먼저 MyClass라는 클래스는 new 키워드를 사용해서 호출합니다. 그리고 그 클래스를 const a에 저장했죠.

이때 MyClass를 호출할 때 “Nicolas”는 무엇인가요? 함수에서의 인수와 정확히 일치합니다. 아래를 보겠습니다.

function consoleName(name) {
	const myName = name;
	console.log(myName);
};

const a = consoleName("Nicolas");

바로 consoleName(”Nicolas”)와 정확히 일치한다는 것이죠. 그럼 이 인수를 받는 함수에서의 매개변수 consoleName(name)의 역할은 어디가 담당할까요?

바로 constructor(name)이 담당합니다. 이는 class를 호출 했을 때 맨 처음 default로 실행되는 부분이 constructor이기 때문입니다.

class MyClass {
	constructor(name) {
		this.myName = name;
	};
	method1() {...}
};

const a = new MyClass("Nicolas");

하지만 이제 여기 this의 의미가 궁금해집니다. this는 자기 자신 즉, 이 경우 MyClass를 지칭합니다. this.myName = name;이라는 구문은 MyClass내에서 myName이라는 저장소를 만들 것이고, 그 저장소에 name을 넣겠다라는 의미입니다.

그렇다면 이제 호출한 MyClass를 const a에 담았으니 이 사용법을 알아봅시다.

class MyClass {
	constructor(name) {
		this.myName = name;
	};
	nameprint() {
		console.log(`내 이름은 ${this.myName} 입니다.`);
	};
};

const a = new MyClass("Nicolas");

a.nameprint(); //내 이름은 Nicolas 입니다.

다음과 같이 MyClass 내부에 정의된 nameprint()라는 메서드를 호출해서 사용할 수 있습니다.