자바스크립트 Number 형에 확장 기능 추가 및 사용

자바스크립트에서 내장 객체에 기능을 추가할 때는 다음과 같이 객체 원형 함수(또는 클래스)의 prototype 객체에 메소드를 추가한다. (확장 기능을 추가하는 부분에 대해서는 자세히 다루지 않는다.)

String.prototype.trim = function(){
    return this.replace(/^\s+|\s+$/g, '');
};

이렇게 추가한 확장 함수는 대부분 내장 객체에 해당하는 리터럴과도 별 어려움없이 사용할 수 있다.

alert("  hello! ".trim());

리터럴에서 객체의 메소드를 호출하면 자바스크립트는 내부적으로 리터럴을 해당하는 객체로 덧씌운 후 메소드를 실행하고 결과를 반환한 후에 다시 리터럴로 돌아오는 과정을 진행한다. 그리고 대부분의 내장 리터럴은 이와 같은 과정을 따르고 있다.

문제는 숫자 리터럴이다. 숫자를 표현하는 Number 내장 클래스를 사용하여 기능을 추가하는 것까지는 문제가 없지만 리터럴을 통해 이를 호출할 때 올바르지 않은 문자(Illegal character) 오류가 발생한다.

Number.prototype.add = function(num){
    return this + num;
};
10.add(5); // 에러가 발생한다.

이런 문제가 발생하는 이유는 숫자 리터럴의 특성 때문이다. 자바스크립트의 Number 형은 정수는 물론 실수까지 다루고 있다. 따라서 10은 물론 8.5, 0.23 등은 모두 Number 형이다. 그런데 소수점을 기준으로 앞 뒤에 0이 있으면 생략할 수 있다. 다시 말해 0.23.23으로, 12.012.으로 표기할 수 있다는 뜻이다. 따라서 10.add(5);라고 쓰면 자바스크립트는 10. 뒤에 숫자가 나오거나 연산자가 나와야 한다고 판단하는데 난데없이 add라는 글자가 튀어나온 것으로 간주하여 올바르지 않은 문제가 나타났다는 에러가 발생하는 것이다.

이런 문제를 피하려면 문법의 모호함을 없애주면 된다. 가장 흔히 사용되는 고전적인 방법으로는 괄호가 있다.

(10).add(5);

또는 다음과 같이 사용할 수도 있다.

10..add(5);

위 코드에서 10.은 완전한 하나의 숫자이므로 문법의 모호함이 없어져 그 뒤의 메소드를 실행할 수 있는 것이다. 앞서 말했다시피 이 코드는 사실,

10.0.add(5);

와 같은 코드이다.

댓글을 남겨주세요