[카테고리:] JavaScript

자바스크립트에는 해당 객체값에 대한 타입을 얻는 예약어로 typeof를 지원합니다. 그러나 요놈이 그다지 정확치 않는 녀석인지라 이보다 더 정확한 타입을 얻을 필요가 있을 시에 다음 함수를 사용할 수 있습니다.

function getType(x) {
    if (x == null) {
        return 'null';
    }

    var t = typeof x;
    if (t != "object") {
        return t;
    }

    var c = Object.prototype.toString.apply(x);
    c = c.substring(8, c.length - 1); // [object ?]의 특성을 이용함

    if (c != "Object") {
        return c;
    }

    if (c.constructor == "Object") {
        return c;
    } else {
        var s = x.constructor.toString();
        var i = s.indexOf("(");
        return s.substring(9, i); // function ?( ... 의 특성을 이용함
    }

    return "unknown type";
}

위의 코드에 대한 테스트는 아래와 같습니다.

function CTR(a) {
    this.a = a;
};

document.write(typeof CTR + " , " + getType(CTR));

var c = new CTR(1);
document.write(typeof c + " , " + getType(c));
        
document.write(typeof new Date() + " , " + getType(new Date()));
document.write(typeof new Array() + " , " + getType(new Array()));
document.write(typeof 1 + " , " + getType(1));
document.write(typeof "hi" + " , " + getType("hi"));
document.write(typeof this.document + " , " + getType(this.document));

실행 결과는 다음과 같습니다.

실행결과에 대한 각 라인의 첫번째는 자바스크립트에서 제공하는 typeof를 사용한 것이고 두번째는 보다 더 정확한 타입을 얻을 수 있는 getType 함수를 사용한 것입니다.

자바스크립트는 데이터 타입을 명시적으로 지정하는 것이 불가능한 언어이므로, 자바스크립트를 이용해 타 개발자가 사용하는 API를 개발하기 위해서는 API의 견고함을 유지하기 위해 변수의 데이터 타입을 검사하여 API가 받고자 하는 데이터 타입이 아닐 경우 예외 처리를 해주는 것이 필요합니다. 예를 들어서 어떤 함수가 있다고 할때, 이 함수가 어떤 배열을 인자로 받아 배열을 구성하는 원소를 모두 합한 값을 반환하고하 할때를 예로 들어 생각해 보겠습니다.

function sum(a) {
    var isArray = (a instanceof Array);
    var isLikeArray = (a && typeof a == "object" && "length" in a
        && (typeof a.length == "number"))

    if (isArray || isLikeArray) {
        var total = 0;
        for (var i = 0; i < a.length; i++) {
            var element = a[i];
            if (!element) continue;
            if (typeof element == "number") {
                total += element;
            } else {
                throw new Error("Element in array have to be number.");
            }
        }

        return total;
    } else {
        throw new Error("Argument have to be array.");
    }
}

2번 코드는 전달 받은 인자가 완벽한 배열 타입인지를 검사하는 것이고 3, 4번 코드는 인자가 최소한 객체이면서 length라는 프로퍼티를 가지고 있는지를 검사하면서 이 length의 타입이 숫자라는 것까지 검사하고 있습니다.

이제 인자가 배열(또는 배열로 간주할 수 있는 객체)로 판단되므로 이 배열을 구성하는 원소의 합을 구할 수 있는데, 11번 코드에서 배열을 구성하는 원소의 데이터 타입이 숫자일 경우에만 합산을 하고 그렇지 않다면 예외를 던지도록 하고 있습니다. 실제 사용 코드는 다음과 같습니다.

alert(sum([1, 2, 3, 4, 5]));

이제 끝으로 Rectangle를 상속받는 PositionedRectangle 클래스를 정의해 보겠습니다. Rectangle 클래스는 단순히 가로와 세로 크기값만을 가지고 있습니다. 여기에 위치값까지 갖도록 한 클래스가 바로 PositionedRectangle 클래스입니다.

var PositionedRectangle = Class({
    name: "PositionedRectangle",
    extend: Rectangle,
    construct: function(x,y,w,h) {
        this.superclass(w, h);
        this._x = x;
        this._y = y;
    },
    methods: {
        draw: function() {
            alert("draw PositionedRectangle");
        },
        getPosition: function() {
            return new Coordinate(this._x, this._y);
        }
    },
    requires: [aShape],
    statics: {
        isSame: function(a, b) {
            return a._x == b._x && a._y == b._y && 
                a._width == b._width && a._height == b._height;
        }
    }
});

중요한 부분은 바로 3번 코드로 상속받고자 하는 클래스를 지정하는 extend입니다. 바로 이 extend로 지정된 클래스의 모든 속성값을 상속받게 되는데 이 PositionedRectangle 클래스는 Rectangle 클래스의 모든 속성(변수와 매서드)를 상속받게 됩니다.

추가로 18번 코드는 정적 속성(변수와 매서드)를 정의하는 방법입니다. 이는 C++과 자바와 같은 언어에서 클래스 차원에서 제공하는 바로 그 기능입니다.

이제 이렇게 정의한 클래스들을 직접 사용하는 예를 보이면 다음과 같습니다.

var c = new Circle(100, 100, 30);
var r = new PositionedRectangle(10, 10, 100, 100)

alert(r instanceof Rectangle);
alert(r instanceof PositionedRectangle);
alert(r instanceof Object);
alert(r instanceof Circle);

c.draw();
r.draw();

alert(c.getCenter().toString());
alert(PositionedRectangle.isSame(r, r));

1번과 2번 코드는 클래스를 통해 객체를 생성하고 있습니다. 그리고 4~7번 코드에서 각 객체가 어떤 클래스의 인스턴스인지를 검사하고 있습니다. 결과값은 순서대로 true, true, true, false입니다. 그리고 9~10번 코드는 draw 함수를 호출하고 있습니다. 마친가지로 12번 ~ 13번 코드는 정의한 매서드를 사용하고 있습니다.

이상으로 클래스 정의 API에 대한 내용을 마무리합니다. 중요한 것은 자바스크립트는 결코 완벽한 클래스 정의를 제공해주지 못합니다. 이는 언어적 한계입니다. 이러한 한계를 해결한 버전이 자바스크립트 2.0입니다. 자바스크립트 2.0이 나오기 전까지는 이러한 클래스 정의 API를 개발자가 직접 만들고 이해하여 사용해야 하며 스스로에 대한 약속을 정해 반드시 준수해야 합니다. 이러한 약속은 private 변수의 경우 변수명 앞에 밑줄(_)을 넣는 등에 대한 것입니다. 가장 중요한 것은 문서화 입니다. 자바스크립트는 매우 유연한 언어이므로 문서화를 통해 약속을 분명히 기술하여 지킬 수 있도록 해야합니다.

총 5개의 클래스가 존재하는데 먼저 가장 간단한 Coordinate 클래스를 정의하면 다음과 같습니다.

var Coordinate = Class({
    name: "Coordinate",
    construct: function(x, y) {
        this._x = x;
        this._y = y;
    },
    methods: {
        getX: function() {
            return this._x;
        },
        getY: function() {
            return this._y;
        },
        toString: function() {
            return "(" + this._x + ", " + this._y + ")";
        }
    }
});

앞서 언급했듯이 자바스크립트에서 클래스의 정의는 개발자 스스로에 대한 약속이 필요하다고 하였습니다. 그 약속에 해당하는 부분이 바로 4,5번 코드에 있는 _x, _y 변수입니다. 변수명 앞에 밑줄(_)을 하였음으로 해서 이 변수는 private 변수라는 약속을 정한 것입니다. 개발자 스스로의 약속이므로 이 약속을 깼다고 하여도 자바스크립트는 어떤한 오류를 제공하지 않습니다. 물론 이러한 약속에 대해서 경고를 제공하도록 할 수 있으나 그렇게 되면 클래스 정의 API가 더욱 복잡해지게 될 것입니다. 그리고 7번의 methods 객체에 필요한 매서드를 추가하였습니다.

이제 다음은 추상 클래스인 Shape 클래스에 대한 코드입니다.

var aShape = Class({
    name: "aShape",
    methods: { 
        draw: function() { throw "abstract method"; }
    }
});

코드를 살펴보면, 4번에 draw라는 추상 매서드를 제공하였습니다. draw 매서드 역시 추상 매서드다라는 약속이지 자바스크립트 언어 차원에서 추상 매서드로 강제하지 않습니다. 대신 이 매서드를 호출하게 되면 예외를 발생하도록 하였습니다.

다음으로 위의 추상클래스인 Shape를 구현하는 Rectangle와 Circle 클래스에 대한 코드를 살펴보겠습니다.

var Rectangle = Class({
    name: "Rectangle",
    construct: function(w, h) {
        this._width = w;
        this._height = h;
    },
    methods: {  
        draw: function() { 
            alert("draw Rectangle");
        },
        getWidth: function() {
            return this._width;
        },  
        getHeight: function() {
            return this._height;
        }
    },
    requires: [aShape]
});

var Circle = Class({
    name: "Circle",
    construct: function(x, y, r) {
        this._x = x;
        this._y = y;
        this._r = r;
    },
    methods: {
        draw: function() {
            alert("draw Circle");
        },
        getCenter: function() {
            return new Coordinate(this._x, this._y);
        },
        getRadius: function() {
            return this._r;
        }
    },
    requires: [aShape] 
});

동시에 Rectangle와 Circle 클래스에 대한 코드를 보이는 이유는 이 두개가 서로 동일한 구조를 갖고 있음을 강조하기 위함입니다. 이 두 클래스는 Shape의 추상 매서드인 draw를 분명히 구현하고 있으며 각기 자신에게 맞는 매서드를 추가적으로 정의하고 있습니다. 여기서 추상매서드를 구현하고 있는지에 대한 검사는 18번과 39번의 코드에서처럼 requires 속성을 통해 검사를 해주게 됩니다. 만약 이 requires 속성을 통해 추상 매서드를 구현하지 않았을 경우 예외를 친절하게 예외를 발생해 주도록 클래스 정의 API를 구현하였습니다.

자바스크립트는 C++이나 C#/Java 등에서와 같이 클래스(Class)를 직접적으로 정의할 수 있는 API를 제공해 주지 않습니다. 그러나 자바스크립트에서는 프로토타입(Prototype)을 이용하여 클래스의 특성을 제공할 수 있습니다. 그러나 이러한 프로토타입 기반의 클래스 정의에 대한 API는 개발자가 직접 만들어 사용해야 합니다. 게다가 비록 프로토타입을 이용해 클래스 개념을 자바스크립에서 사용할 수 있다고는 하여도 C++이나 C#/Java와 같은 완전한 클래스를 정의하지는 못합니다. 대신 개발자는 스스로 엄격한 약속을 통해 이러한 부족함으로 매꿔야만 합니다.
아래의 코드는 자바스크립트에서 클래스를 정의하기 위한 API의 한가지 예입니다. 자바스크립트를 이용해 클래스를 정의하는 API는 매우 다양하고 많습니다. 그중 제가 필요에 의해 아래의 제시한 클래스 정의 API는 데이비드 플래너건의 자바스크립트 완벽가이드라는 책을 많은 부분 참고했으며 불필요한 부분을 제거한 예입니다.

function Class(x) {
    var classname = x.name;
    var superclass = x.extend || Object;
    var constructor = x.construct || function() {};
    var methods = x.methods || {};
    var statics = x.statics || {};
    var requires = x.requires || [];
    var proto = new superclass();

    for(var p in proto) if(proto.hasOwnProperty(p)) delete proto[p];
 
    proto.constructor = constructor;
    proto.superclass = superclass;
    proto.classname = classname; 
    constructor.prototype = proto;
 
    for(var p in methods) proto[p] = methods[p];
    for(var p in statics) constructor[p] = statics[p];

    for(var i=0; i        var c = requires[i];
        for(var p in c.prototype) {
            if(typeof c.prototype[p] != "function" || 
                p == "constructor" || p == "superclass") continue;
   
            if(p in proto && typeof proto[p] == "function" && 
                proto[p].length == c.prototype[p].length) continue;
    
            throw new Error(classname + " class requires " + p + " method.");
        }
    } 

    return constructor;
}

위의 클래스 정의 API는 다음과 같이 클래스의 4가지 본연의 기능에 충실할 것을 전제로 하였습니다.

• 클래스를 정의하는 방법 제공할 것
• 클래스 상속을 지원할 것
• 추상 클래스을 구현할때 해당 추상 클래스의 모든 매서드를 구현하고 있는지 검사할 것
• 객체가 어떤 클래스의 타입인지 검사할 수 있도록 할 것

위의 전제 조건들에 대해서 실제 위의 클래스 정의 API를 대한 사용예를 통해 살펴보겠습니다. 위의 클래스 정의 API를 통해 다음과 같은 클래스 계층을 구성하고자 합니다.

Shape는 draw라는 매서드를 갖는 추상 클래스입니다. 그리고 이 Shape를 구현하는 클래스로 Rectangle과 Circle 클래스가 있습니다. 여기에 PositionedRectangle라는 클래스는 Rectangle를 상속받습니다. 또한 Coordinate라는 클래스가 존재하며 이 클래스는 PositionedRectangle와 Circle 클래스 사용합니다.