[번역] 자바스크립트 클래스를 정의하는 3가지 방법 (3 ways to define a JavaScript class)

이 글은 Stoyan Stefanov 의 글 3 ways to define a JavaScript class 을 번역한 것입니다.
(http://www.phpied.com/3-ways-to-define-a-javascript-class/) 
 

자바스크립트 클래스를 정의하는 3가지 방법 

소개

자바스크립트는 문법측면에서 아주 유연한 객체지향 언어이다. 이 글에서 객체를 정의하고 생성하는 3가지 방법을 찾을 수 있다. 이미 자주쓰는 방법이 있다 하더라도 다른사람들이 작성한 다른 방법들을 이해하는데 도움이 될것이다.
먼저 자바스크립트에는 클래스라는 개념이 없다는것을 알고 있어야한다. 함수는 클래스를 흉내내기 위하여 사용될 수 있지만 일반적으로 자바스크립트는 클래스가 없는 언어이다.
자바스크립트에서 모든것은 객체이다. 그리고 상속은 객체가 객체로 부터 상속을 받지, 다른 클래스가 있는 언어들처럼 클래스가 클래스로부터 상속받지 않는다.
 

1. 함수 이용하기

가장 많은 쓰는 방법중 하나다. 평범한 자바스크립트 함수를 만든 다음 new 키워드로 객체를 생성하면 된다. 함수를 이용하여 생성한 객체의 속성값과 메소드를 정의하기 위해서는 아래 예제와 같이 this 키워드를 사용하면 된다. 
 

1. function Apple (type) {
2.     this.type = type;
3.     this.color = "red";
4.     this.getInfo = getAppleInfo;
5. }
6.  
7. // 안좋은 방법! 아래 계속 읽어보세요.
8. function getAppleInfo() {
9.     return this.color + ' ' + this.type + ' apple';
10. }

Apple 생성자함수를 사용하여 객체를 생성하기 위해서는 다음과 같이 속성에 값을 입력하고 메소드를 호출하면 된다.
 

1. var apple = new Apple('macintosh');
2. apple.color = "reddish";
3. alert(apple.getInfo());

1.1. 내부에 메소드 정의하기

위 예제를 보면 Apple 클래스의 getInfo() 메소드가 별개의 함수인 getAppleInfo() 에 정의되어 있다. 이렇게 해도 되긴 하지만 한가지 단점이 있다 - 이렇게 정의된 많은  함수들은 전역 네임스페이스에 정의되고 만다. 이렇게 되면 사용하는 다른 라이브러리나 동일한 함수이름을 사용해야된다면 함수이름이 충돌될 수 있게 된다.  무분별한 전역 네임스페이스의 사용을 막기 위해, 아래 같이 메소드를 생성자함수안에 정의할 수 있다.
 

1. function Apple (type) {
2.     this.type = type;
3.     this.color = "red";
4.     this.getInfo = function() {
5.         return this.color + ' ' + this.type + ' apple';
6.     };
7. }

이렇게 바꾸어도 위에서 같이 객체를 생성하고 속성값과 메소드를 사용하면 된다.
 

1.2. prototype에 메소드 추가하기

1.1의 단점은 새로운 객체를 생성할때마다 getInfo() 메소드가 매번 재생성된다는것이다. 가끔 그것을 원할수는 있지만, 거의 드물다. 더 좋은방법은 생성자 함수의 프로토타입에 getInfo() 를 추가하는것이다.
 

1. function Apple (type) {
2.     this.type = type;
3.     this.color = "red";
4. }
5.  
6. Apple.prototype.getInfo = function() {
7.     return this.color + ' ' + this.type + ' apple';
8. };

다시 1. 과 1.1. 과 같은 방법으로 새 객체를 사용하면 된다.
 

2. 객체 리터럴(literal) 사용하기

리터럴(literal) 은 자바스크립트에서 객체와 배열을 정의하는 간단한 방법이다. 빈 객체를 생성하려면 아래 같이 할 수 있다.
 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

1. var o = {};

아래과 같은 보통의 방법 대신 위와 같이 하면 된다.
 

1. var o = new Object();

배열은 다음같이 할 수 있다.
 

1. var a = [];

아래같이 하는 대신 위와 같이 하면 된다.
 

1. var a = new Array();

보통의 클래스를 생성하기 위한 작업들을 하지 않고 바로 객체를 생성할 수 있다.
이번에는 앞의 예제들과 동일한 기능을 하지만 객체 리터럴을 이용해보면:
 

1. var apple = {
2.     type: "macintosh",
3.     color: "red",
4.     getInfo: function () {
5.         return this.color + ' ' + this.type + ' apple';
6.     }
7. };

이 경우, 클래스의 인스턴스를 생성할 필요가 없다, 이미 생성되어 있다. 그러므로 생성된 인스턴스를 바로 사용하면 된다.
 

1. apple.color = "reddish";
2. alert(apple.getInfo());

이런 객체를 싱글튼(singleton) 이라고 부르기도 한다. 자바와 같이 클래스가 있는 언어에서 싱글튼(singleton)같이 싱글튼은 언제나 하나의 클래스 인스턴스만을 가질 수 있다, 동일한 클래스의 객체를 더 생성할 수 없다. 자바스크립트는 모든 객체가 처음부터 싱글튼이기때문에 자바스크립트(클래스가 존재하지 않는다. 기억들 나시죠?)에서 이 개념은 더 이상 의미가 없다.
 

3. 함수를 이용한 싱글튼

1. var apple = new function() {
2.     this.type = "macintosh";
3.     this.color = "red";
4.     this.getInfo = function () {
5.         return this.color + ' ' + this.type + ' apple';
6.     };
7. };

위의 1.1. 과 아주 비슷하지만, 객체를 사용하는 방법은 2. 와 똑같다.
 

1. apple.color = "reddish";
2. alert(apple.getInfo());

new function(){...} 구문은 2가지를 동시에 한다: 함수(익명 생성자 함수)를 정의하고 new 로 작동(invoke)시킨다. 이렇게 써본적이 없으면 다소 복잡해 보일수 있고, 그렇게 많이 쓰이지도 않는다, 그래도 한번만 사용하거나 이름짓기 어려운 생성자함수가 꼭 필요할때 사용할수 있는 방법이다.

 

요약

자바스크립트에서 객체를 생성하는 3가지(한가지 더) 방법을 정리해보았다. (이 글의 제목에도 불구하고) 자바스크립트에는 클래스같은것은 없다는것을 기억하기 바란다. 새로운 지식을 이용해 코딩을 시작하길 기대하고 있나요? 즐겁게 자바스크립트 코딩하세요.

[출처] http://steadypost.net/post/lecture/id/13/