JavaScript 클래스와 객체 소개

지금부터 JavaScript의 객체 지향 프로그래밍(OOP)을 공부해 보겠습니다. 먼저 현실 세계의 예를 살펴본 후, 그것을 JavaScript로 옮겨 보겠습니다.

예시로 자동차를 들어 보겠습니다. 자동차에는 바퀴, 색상, 차체 형태, 엔진 배기량 등이 있습니다. 또한 운전자는 자동차에 명령을 내릴 수 있습니다: 주행, 정지, 우회전, 좌회전 등입니다.

공통 속성(모두 바퀴를 가지고 있고 모두 명령을 내릴 수 있음)을 가진 자동차의 클래스가 존재한다고 말할 수 있습니다.

거리에 서 있는 특정 자동차는 이 클래스의 대표, 즉 다른 말로 객체입니다. 이 클래스의 모든 객체에는 속성(바퀴 수, 색상, 차체 형태)과 메서드(주행, 정지, 우회전, 좌회전)가 있습니다.

다시 말해, 클래스 자체는 공장에서 자동차를 만드는 데 사용되는 설계도입니다. 객체는 이 설계도에 따라 만들어진 실제 자동차입니다.

JavaScript에서 클래스는 class 키워드와 그 뒤에 오는 클래스 이름을 사용하여 생성됩니다. Car 클래스를 만들어 보겠습니다:

class Car {
	// 여기에 코드, 즉 JavaScript 자동차 설계도가 들어갑니다.
}

이제 우리 설계도에서 이 설계도에 따라 만들어진 모든 자동차는 색상 속성과 연료량 속성을 갖도록 지정해 보겠습니다.

이를 위해 클래스 내부에 color 속성과 fuel 속성을 작성합니다:

class Car {
	color; // 자동차 색상
	fuel;  // 연료량
}

이제 우리 클래스의 메서드를 만들어 보겠습니다. JavaScript에서 메서드는 일반 함수와 비슷하지만, function 키워드 없이 선언됩니다.

앞서 언급했듯이, 우리 자동차는 주행할 수 있고, 회전할 수 있고, 정지할 수 있습니다. 우리 클래스에 해당 메서드를 만들어 보겠습니다:

class Car {
	color; // 자동차 색상
	fuel;  // 연료량
	
	// 주행 명령:
	go() {
		// 어떤 JavaScript 코드
	}
	
	// 회전 명령:
	turn() {
		// 어떤 JavaScript 코드
	}
	
	// 정지 명령:
	stop() {
		// 어떤 JavaScript 코드
	}
}

우리는 자동차의 설계도를 만들었습니다. 이제 공장에 가서 이 클래스의 객체(즉, 구체적인 자동차)를 만들어야 합니다.

JavaScript에서는 new 키워드 뒤에 클래스 이름을 쓰는 방식으로 이루어집니다:

new Car; // 공장에 자동차를 만들라고 명령합니다.

그러나 단순히 클래스의 객체를 생성하는 것만으로는 아무 일도 일어나지 않습니다(이는 예를 들어 배열을 선언하고 어디에도 저장하지 않는 것과 같습니다). 이 객체를 저장할 변수가 필요합니다.

이 변수를 myCar라고 하고, 생성한 객체를 여기에 저장해 보겠습니다:

let myCar = new Car;

자동차를 생성한 후에는 그 속성에 접근할 수 있습니다. 속성은 점(.)을 통해 접근합니다. 우리 객체의 속성을 설정해 보겠습니다:

let myCar = new Car; // 공장에 자동차를 만들라고 명령합니다.

myCar.color = 'red'; // 빨간색으로 칠합니다.
myCar.fuel = 50;     // 연료를 채웁니다.

자, 우리 자동차가 생성되고, 도색되고, 연료가 채워졌습니다. 이제 이 자동차의 메서드를 통해 명령을 내릴 수 있습니다.

메서드에도 점을 통해 접근하지만, 속성과 달리 메서드 이름 뒤에 괄호를 붙여야 합니다. 우리 객체에 명령을 내려 보겠습니다:

myCar.go();
myCar.turn();
myCar.stop();