2018-09-05(JavaScript 클래스를 정의하는 3가지 방법)

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

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

1. 함수 이용하기

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

function apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// 안좋은 방법! 아래 계속 읽어보세요.
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}
 
//apple 생성자 함수를 사용하여 객체를 생성하기 위해서는
//다음과 같이 속성에 값을 입력하고 메소드를 호출하면 된다.
var apple = new apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

1.1 내부에 메소드 정의하기

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

function apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return = this.color + ' ' + this.type + ' apple';
    };
}
 
//이렇게 바뀌어도 위에서 같이 객체를 생성하고
//속성값과 메소드를 사용하면 된다.
var apple = new apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

1.2 prototype에 메소드 추가하기

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

function Apple (type) {
    this.type = type;
    this.color = "red";
}
 
Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};
 
//다시 1. 과 1.1과 같은 방법으로 새 객체를 사용하면 된다.

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

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

var o = {};

아래의 방법또한 가능하다.

var o = new OBject();

배열은 아래와 같이 가능하다.

var a = [];

배열또한 아래의 방법또한 가능하다.

var a = new Array();

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

var apple = {
    type : "macintosh",
    color : "red",
    getInfo : function () {
        return this.color + ' ' + this.type + ' apple';
    }
}
 
//이경우, 클래스의 인스턴스를 생성할 필요가없다.
//이미 생성되어있다. 그러므로
//생성된 인스턴스를 바로 사용하면 된다.
 
apple.color = "reddish";
alert(apple.getInfo());

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

3.함수를 이용한 싱글튼

세번째 방법은 위에 다른 두가지 방법의 조합이다. 우선 싱글튼을 정의하기 위하여 함수를 사용한다. 문법은 아래와 같다.

var apple = new function () {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    }
}
 
//위의 1.1과 아주 비슷하지만 객체를 사용하는 방법은 2.와 같다.
 
apple.color = "reddish";
alert(apple.getInfo());

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