JavaScript에서 class 정의하기

1. 프로퍼티(클래스필드) 정의하기.

class_name = function ( parameter, ... ) {

    ....

    property declaration...

    ...

}

또는

function class_name ( parameter, ... ) {

    ....

    property declaration...

    ...

}

function 이 함수를 의미하는 것이 아니라 여기서는 클래스 선언을 위해서 사용하는 키워드임. 단어 자체가 주는 사전적 의미에 함몰되어서 자꾸 딴지 걸면 안됨.(내가 ... 그랬었음..). 클래스나 함수나 어차피 프로세스로 존재할때 메모리를 차지하는 모듈로서 본다면 객체와 메소드 따위의 구분이 의미가 없다.

    public class Student {

        String name;

        int age;

        public Student(String name, int age) {

              this.name = name;

              this.age = age;

        }

    }

위와같은 자바 클래스에 대응하는 자바스크립트의 클래스는 다음과 같음.

    Student = function(name, age) {

        this.name = name;

        this.age = age;

    } // 초간단. -_-;

다음과 같이 인스턴스를 생성하고 사용할 수 있음.

Student student = new Student("전지현", 26);

document.write("이름 : " + student.name + ", 나이 : " + student.age );

2. 메소드 정의하기.

메소드도 정의할 수 있는데 두가지 방법이 있음. prototype에 정의하는 방법과 클래스 자체에 정의하는 방법.

2-1. prototype 프로퍼티에 메소드 정의

위에서 만든 Student 클래스에 getter/setter 메소드를 정의하면 다음과 같다.

Student.prototype.getName = function() {

    return this.name;

}

Studoent.prototype.setName = function (name) {

    this.name = name;

}

이제 다음은 동일한 결과를 보여준다.

student.name;| student.getName();

student.name = "왕지현"; | student.setName("왕지현");

위에서 주의할 점은 Student.prototype.getName() 이 아니라 그냥 getName임. 괄호 넣으면 작동하지 않음. -_-a

여기서 잠깐 prototype 에대해서 짚고 넘어가보자.

자바에서 일반적인 객체 상속구조를 떠올려보자.

        student.getAddress();

라고 호출하면 Student 클래스에서 아직 정의되어 있지 않기 때문에 부모 클래스에서 getAddress() 메소드가 있는지 찾는다. 존재 하지 않으면 그 부모클래스의 부모 클래스를 조회하고 마지막으로 Object 객체까지 거슬러 올라가서 최종적으로 찾지 못하면 예외가 발생한다.

javascript에서 정의되는 class는 모두 prototype이라는 프로퍼티를 가지는데 객체에 존재하지 않는 메소드나 클래스 필드를 호출하면 prototype 프로퍼티에서 메소드나 클래스 필드를 찾는다. prototype에서 찾지 못하면 prototype의 prototype 프로퍼티까지 계속해서 탐색을 하고 최종적으로 찾지 못하면

        "undefined"(클래스 필드인 경우) , ""(메소드인 경우)

를 출력한다. 위에서 메소드를 정의한 방식이 바로 이 prototype 프로퍼티에 메소드를 정의한 것인데 엄밀히 말하면 위에서 정의한 메소드는 Student 클래스의 것이 아닌, prototype 프로퍼티의 메소드인 셈이다. 하지만 사용하는 입장에서는 중요한 내용은 아닌 듯.

기억해야 할 점은 prototype 프로퍼티는 인스턴스당 할당되는 것이 아니라, 클래스당 하나씩 할당된다는 것. 마치 자바에서 Object.class, ArrayList.class 와 같은 Class 를 떠올리면 좋을듯 하다.

student.getEmail() 을 호출하면 정의되지 않은 메소드이므로 TypeError가 발생하고 진행중인 메소드가 종료된다. 아무것도 출력이 안되는 것처럼 보이지만 예외가 던져져서 진행중이던 메소드를 벗어나버리는 것임.

        Student jenny = new Student(....);

        try {

              jenny.getEmail(); // NO!!!

        } catch(e) {

              alert(e); // firefox에서는 예외가 던져짐.

         }

        Student.prototype.getEmail = function() { return googler@gmail.com; };

        jenny.getEmail() ; // OK!!!!!!!!!!!

위처럼 prototype에 메소드를 정의하면 메소드를 정의하기 이전에 생성되어 사용되던 인스턴스라도 getEmail() 메소드를 사용할 수 있게 된다. 왜냐하면 위에서 말했듯이 prototype은 클래스당 하나이므로 하나의 클래스에서 생성된 인스턴스들은 prototype을 공유한다.

이때문에 언제든지 메소드나 클래스 필드를 마음대로 만들어낼 수 있으니 조낸! 탄력적이다!!

2-2. 클래스 자체에 메소드 정의

prototype 이 아닌 class 자체에 메소드를 생성하는 방법도 있다.

    Student = function(name, age) {

        this.name = name;

        this.age = age;

        this.getName = function() { return this.name ; }

        this.setName = function(name) { this.name = name;}

    } // 초간단. -_-;

그렇다면 메소드를 prototype에 정의하는 것과 클래스 자체에 정의하는게 어떻게 다를까?

클래스 자체에 정의할 경우, 클래스의 인스턴스를 여러개 생성할 때 메소드 코드를 인스턴스들마다 따로 갖게 된다. 하지만 prototype에 메소드를 정의하면 동일한 클래스로부터 생성된 인스턴스들은 하나의 prototype 프로퍼티를 공유하므로 인스턴스들마다 중복해서 메소드 코드를 가질 필요가 없게된다.

따라서 자바스크립트에서 클래스를 생성할 때 가능하면 prototype에 메소드를 정의하는게 메모리를 아낄 수 있는 길이다...라고 일단 정리하게 넘어가겠다. (그런데 메소드를 클래스 자체에 정의해야 하는 상황도 있지 않을까? 잠깐 고민해봤는데, 아직은 없는 것 같다. 인스턴스의 상태는 프로퍼티에 좌우되기 때문에 메소드를 인스턴스마다 따로 가져야할 상황은 없는 듯.)

하지만 다음과 같이 오버하면 안된다.

    Student = function(name, age) {

        Student.prototype.name = name;

        Student.prototype.age = age;

    }

이렇게 하면 클래스의 인스턴스들이 모두 동일한 이름과 나이를 갖게 된다. 즉,

    Student jane = new Student("jane", 21);

을 생성한 후

    Student jack = new Student("jack", 34);

로 jack을 생성하면 jane의 이름이 "jack", 나이가 34살로 둔갑한다.(뜨아~).

정리하면 상황에 맞게 잘 사용해야 한다는 것이다.

2-3 효율적인 클래스 정의 방법

2-1 방식의 문제점은 클래스를 정의할 때 코드가 난잡해져서 가독성이 떨어진다는 점이다. 클래스를 여러개 정의하는 상황이라면 메소드를 정의한 블록들이 산재해 있어서 클래스의 모습이 눈에 딱 들어오지는 않는다.

반면에 2-2는 코드가 깔끔해져서 가독성이 높아지지만 문제는 위에서 말했듯이 인스턴스들이 중복된 메소드 코드를 갖는다는 점이다.(간단한 클래스라면 상관없겠지만...)

그래서 생각해낸 방법은 다음과 같다.

    function Student(name, age)

    {

        var strName = name;

        var intAge = age;

        Student.prototype.getName = function() { return this.strName; }

        Student.prototype.setName = function(name) { this.strName = name; }

        Student.prototype.getAge = function() { return this.strAge; }

        Student.prototype.setAge = function(age) { this.intAge = age; }

    }

메소드 정의부를 클래스 내로 옮기면서

    fucntion class_name ( parameter, ... )

    {

        class_name.prototype.method_name = function ( parameter, ... ) { ... };

        .....

    }

로 바꿔주는 것. IE와 FF 에서 테스트해봤는데 아무 문제없이 잘 돌아간다. 흐화화~

3. JSON 표기법을 이용한 클래스 정의

아, 이런것도 있다. JSON에 대한 자세한 내용은 http://www.json.org 에서 보면 될 것 같다.

위에서 메소드 정의하는 부분을 아래의 코드로 표현했다.

    Student.prototype.getName = function() {

        return this.name;

    }

    Studoent.prototype.setName = function (name) {

        this.name = name;

    }

위의 코드를 JSON 을 이용해서 나타내면 다음과 같다.

    Student.prototype = {

        getName : function() {

            return this.name;

        }

        setName : function (name) {

            this.name = name;

        }

    }

4. 정보은닉(encapsulation)

위에서 설명한 클래스 정의 방법은 정보은닉이 안된다는 문제점이 있다. student.name 으로 프로퍼티에 접속이 가능한데 OOP 에서는 이런 접근을 꺼리기 때문에 자바스크립트에서도 이걸 흉내내려는 시도가 있지 않았나 추측해본다.

여자들의 몸무게 평균을 내는 저울이 있다고 치자. 몇 명의 여성의 정보를 가져와서 전체 몸무게을 내는데 여자들은 자신의 몸무게가 드러나는 것을 반대한다. 저울을 통해서 특정 여성의 몸무게를 알아서는 안되는 경우를 생각해보자.

이런 상황을 모델링하면 다음과 같다.

    function Scale (  ) {

        this.womans = [new Woman(...), new Woman(...), ...];

        this.prototype.getTotalWeights = function() {

            var totalWeight = 0;

            for( i = 0 ; i < womans.length ; i++) {

                    totlaWeight += this.womans[i].getWeight();

            }

            return totalWeight;

        }

    }

.....

    Scale scale = new Scale() ;

    scale.getTotalWeight();

위코드에서는 

        scale.womans[0].getWeight();

로 특정 여성의 몸무게에 접근할 수 있다.

정보은닉이란 외부에 노출되어서는 안되는 데이터를 꼭꼭 감추는 것을 의미하는데 여기서 여성들의 몸무게 노출을 막기 위해서는 다음과 같이 프로퍼티 선언을 변경해준다.

    function Scale (  ) {

        var womans = [new Woman(....), new Woman(....), new Woman(...)];

        this.prototype.getTotalWeights = function() {

            var totalWeight = 0;

            for( i = 0 ; i < womans.length ; i++) {

                    totlaWeight += womans[i].getWeight();

            }

            return totalWeight;

        }

    }

이제 scale.womans 로 접근하면 "undefined"가 출력되기 때문에 여성들 개개인의 몸무게를 보여주는 메소드 호출을 할 수 없다.

5. 정리하면.

자바스크립트에서 클래스를 정의해서 사용하는게 불필요하고 이상해 보일 수도 있다. 왜냐하면 지금까지 이렇게 하지 않아도 자바스크립트를 잘만 써왔기 때문이다. 이런 편견은 예전에 자바스크립트가 화면을 동적으로 구성하는 도구로서 사용되어왔기 때문에 생긴 것이 아닌가 싶다. 또한 언어가 매우 탄력성이 높아서 초기에 자바스크립트를 어떠한 체계에 맞춰서 사용할지 뚜렷한 가이드라인이 없었기 때문이기도 하다.

하지만 ajax의 도입으로 자바스크립트가 데이터 처리를 위한 수단으로서 많이 사용되고 있다. 서버쪽에서는 데이터 처리만 해서 클라이언트에 전달해주고 클라이언트는 ajax 를 이용해서 데이터를 2차 가공한 후 display하는 ui 과정을 모두 떠안게 되는 것이다.

이러한 변화에 대응하기 위해서 자바스크립트도 class 를 도입해서 좀 더 체계적으로 코드를 만들어어지 향후 유지 보수하는데 어려움이 없을 것으로 생각된다. 예전에는 자바스크립트를 아주 우스운 언어, 웹 디자이너들이나 다루는 수준낮은 언어로 생각해왔지만 이제는 생각을 바꿀 때가 된 것 같다.

OOP의 개념을 자바스크립트에 이식해서 언어의 질을 한층 높일 때가 되지 않았나 싶다.