Javascript Class 이해하기

앞서 프로토타입을 설명하면서 Javascript에선 클래스를 통한 상속이 없다고 했습니다. 대신 프로토타입을 참조하는 방식으로 상속과 동일한 효과를 준다고 했죠. 그러나 객체 지향에서 Class를 통한 상속이란 중요한 개념입니다. 또한 다른 객체 지향 기반 언어들에서 Class를 사용하는 개발자들이 JS의 방식에 익숙해지기 어려워하자 ES6에서 JS에도 클래스 문법이 추가됩니다. JS 개발자라면 JS 특유의 prototype 뿐 아니라 ES6에서 도입된 Class, 그리고 ES5까지 활용된 상속의 ‘흉내’ 정도는 알아둘 가치가 있죠.

스태틱 매서드, 프로토타입 매서드

JS 에서 프로토타입은 생성자 함수와 new 를 통해 전달됩니다. 다만 생성자 함수에서도 prototype이란 객체가 가진 요소만__proto__ 형태로 전달되고 생성자 함수 본인만 가지며 전달되지 않는 매서드도 있죠. 여기서 prototype 을 통해 전달되는 매서드를 프로토타입 매서드라고 하고, 생성자 함수 본인만 가지는 매서드를 스태틱 매서드라고 합니다. 코드로 살펴보죠.

var Rectangle = function(width, height) {
	this.width = width;
	this.height = height;
}

Rectangle.prototype.getArea = function(){
	return this.width * this.height;
} // 프로토타입 매서드

Rectangle.isRectangle = function(instance){
	return instance instanceof Rectangle &&
		instance.width > 0 && instance.height > 0;
} // 스태틱 매서드

var rect1 = new Rectangle(3, 4)
console.log(rect1.getArea())             // 12
console.log(rect1.isRectangle(rect1)).   // Error
console.log(Rectangle.isRectangle(rect1))// true

코드로 볼 수 있듯이 스태틱 매서드는 생성자 함수에서 전달되지 않습니다. 그래서 인스턴스에서 선언시 에러를 출력하죠. 프로토타입 매서드는 정상적으로 전달되어 인스턴스에서 사용이 가능합니다.

ES6의 클래스

ES6부터 본격적으로 Class를 도입하면서 Class 작성과 Class 상속에 대한 문법이 새롭게 생겨납니다. 먼저 ES5 이전까지와 다른 ES6의 Class를 알아보겠습니다.

var ES6 = class {

	constructor (name) {
		this.name = name;
	}

	static staticMethod () {
		return this.name + 'staticMethod';
	}

	method () {
		return this.name + 'method'; 
	}
}

var es6Instance = new ES6('es6')
console.log(ES6.staticMethod())   // es6 staticMethod
console.log(es6Instance.method()) // es6 method

차이가 보이시나요? 생성자 함수 객체에 직접 작성하는 방식이었던 ES5 이전과 다르게 static , method 라고 따로 분리해서 작성해주는 방식으로 변했습니다. 가독성 측면에서 훨씬 좋아졌죠.

클래스의 상속

ES5이전까지 클래스 상속은 골치거리였습니다. 상속이라는 개념이 JS에 존재하지 않았기 때문에 생성자 함수값을 인스턴스에 전달하고 인스턴스에서 전달의 흔적을 없애는 방식으로 번거롭게 구현했죠. 그러나 ES6에서 본격적으로 Class를 도입하면서 상속도 쉬워졌습니다.

var Rectangle = class {
	constructor (width, height) {
		this.width = width;
		this.height = height;
	}
	getArea () {
		return this.width * this.height;
	}
};

var Square = class extends Rectangle {
	constructor (width) {
		super(width, width)
	}
	getArea () {
		console.log('size is :', super.getArea())
	}
};

이렇게 extend 와 super 를 활용하는 방식으로 상속을 구현합니다. ES6 이후 상속은 이렇게 비교적 간단한 구조로 이뤄집니다. ES5이전의 상속 역시 알아두면 좋습니다. 그러나 내용이 길어질 수 있기 때문에 시간이 나면 따로 다뤄보도록 하겠습니다.