자바스크립트 다시보기

Posted 2007. 3. 20. 02:17
어김없이 마소 마감일이 다가와서 급히 원고를 작성했습니다. 항상 "기본으로 돌아가자"를 신조로 삼는지라 이번 주제는 Ajax와 각종 위젯 제작 언어로 또 다시 각광을 받고 있는 자바스크립트를 재조명해봤습니다.

특히

1) 자바스크립트의 함수가 제1클래스이며 클로저를 지원한다는 사실
2) 자바스크립트의 독특한 오브젝트 생성 방식 및 속성 상속

에 대한 이야기를 중심으로 실었습니다. 지난 달에는 루비를 중심으로 클로저 이야기를 했었는데, 1번은 지난 달 내용이랑 약간 오버랩 되는 부분이 있네요.

내용을 공개했으면 좋으련만, 엄연히 저작권을 대가로 돈을 받는지라 흑 ㅠ.ㅠ 아래 내용은 박스 중에 하나입니다.



자바스크립트에 대한 오해의 시작

Ajax가 자바스크립트를 다시 한 번 메인 무대에 올려놓기 이전에는 대부분의 개발자가 자바스크립트는 일반적인 프로그래밍 언어에 미치지 못하는 단순한 스크립트 도구라고 생각했다. 즉, 정규 프로그래밍 언어보다는 HTML의 보조 도구 정도로 인식되는 것이 일반적이었다.

이런 오해가 생긴 이유는 네스케이프와 썬마이크로시스템즈 사가 자바스크립트를 포지셔닝한 전략에 있다. 이들은 클라이언트 프로그래밍에 있어서 자바스크립트가 자바의 경쟁자로 자리매김하길 원치 않았기 때문에, 자바에 비해 자바스크립트를 열등한 언어로 알려야만 했던 것이다. 당시 자바스크립트의 기능을 제대로 알릴 수 있었다면, 자바스크립트는 좀 더 일찍 주목받았을지도 모른다.

Douglas Crockford의 <JavaScript: The World's Most Misunderstood Programming Language>를 번역하였습니다. <JavaScript: 세상에서 가장 오해가 많은 프로그래밍 언어>를 눌러주세요.

요즘은 JavaScript를 가장 많이 쓰고 있는데, 요즘이야 Prototype, dojo, jQuery, Mochikit, YUI 등 3 세대 Ajax 라이브러리가 쏟아져 나오면서 인식이 많이 달라졌지만, 예전에는 초보자들이나 쓰는 프로그래밍 언어 같지 않은 간단한 스크립트라는 인식이 강했던 것이 사실이었죠. 이 글은 Ajax가 유행하기 전에 JavaScript에 대한 그런 오해를 불식시키고자 작성된 글입니다.

DMDScript

Posted 2007. 1. 31. 05:40
D 언어로 알려진 Digital Mars 사에서도 EcmaScript 엔진을 만들어서 팔더군요. DMDScript라는 제품은 ECMA 262 스크립트 언어(네스케이프 구현은 자바스크립트, MS의 구현은 JScript로 알려져 있음)를 구현한 엔진입니다. D 언어를 만든 Digital Mars 사답게 이 엔진도 D 언어를 사용해서 만들었더군요.

D 언어 컴파일러를 설치하고, DMDScript를 컴파일해서 실행시켜보았는데, DMDScript에 포함된 "Sieve prime number calculation" 벤치마크 결과는 다음과 같습니다.

[1] 인터넷 익스플로러 7.0

Microsoft Internet Explorer ie
ScriptEngine JScript Build 5730

Eratosthenes Sieve prime number calculation


10 iterations
1899 primes
elapsed time = 938

[2] DMDScript 엔진

$ ./ds.exe sieve.ds
Digital Mars DMDScript 1.13
www.digitalmars.com
Compiled by Digital Mars DMD D compiler
Copyright (c) 1999-2007 by Digital Mars
written by Walter Bright
1 source files
10 iterations

1899 primes
elapsed time = 265

속도 차이가 대략 3.5 배 정도 DMDScript가 빠름을 알 수 있습니다.



** 벤치마크에 사용된 자바스크립트 소스 코드

/* Eratosthenes Sieve prime number calculation. */

size = 8190;
sizepl = 8191;

var flags = new Array(sizepl);

var i, prime, k, count, iter;

print("10 iterations\n");
starttime = new Date();
for (iter = 1; iter <= 10; iter++)
{   count = 0;
    for (i = 0; i <= size; i++)
        flags[i] = true;
    for (i = 0; i <= size; i++)
    {   if (flags[i])
        {   prime = i + i + 3;
            k = i + prime;
            while (k <= size)
            {
                flags[k] = false;
                k += prime;
            }
            count += 1;
        }
    }
}
elapsedtime = new Date() - starttime;
print("\n" + count + " primes\n");
print("elapsed time = " + elapsedtime + "\n");

벤치 마크에 사용된 소스 코드가 비교적 단순해서 쉽게 결론 내리기는 어렵지만, 기존 인터넷 익스플로러나 모질라에 포함된 자바스크립트 엔진이 상당한 개선의 여지가 있다는 생각이 드네요.


더불어 DMDScript의 라이센스는 GPL로 소스 코드는 공개 되어 있습니다. 상업적으로 이용하기 위해서는 DMDScript Commercial License를 구입해야 하는데, $999.00 이면 살 수 있고 별도의 로얄티(running royalty)는 받지 않는군요.


자바스크립트의 함정 중에 하나는 객체 비교 연산자가 ==와 === 두 가지 버전으로 있다는 점입니다.

Operator (==)
Tests for equality in value between two operands.

Operator (===)
Tests for equality between two operands both in terms of value and type. Supported in JavaScript 1.3+


==는 자동으로 변환을 수행하여 비교 연산을 하기 때문에 a = 1과 b = "1"을 비교했을 때 a == b는 true를 리턴하게 됩니다. 반면에 ===는 타입과 값을 모두 비교하기 때문에 서로 다른 타입인 a와 b를 비교하는 a === b는 false를 리턴합니다.

다음은 자바로 작성된 자바스크립트 엔진인 Rhino1.6 R5에서 ==와 ===를 수행한 결과입니다.

$ java -jar js.jar
Rhino 1.6 release 5 2006 11 18
js> a = 1
1
js> b = "1"
1
js> a  == b
true
js> a === b
false







자바 스크립트는 함수형 언어들과 마찬가지로 클로저(closure)를 지원한다.

function sayHello(name) {
  var text = 'Hello ' + name; // local variable
  var sayAlert = function() { alert(text); }
  return sayAlert;
}

위 함수 sayHello()의 리턴 값은 또 다른 함수인 function() { alert(text); }이다. 이렇게 얻은 함수는 다음과 같이 호출할 수도 있다.

var fun = sayHello('Jane')
fun();


함수 안에 함수를 정의하는 중첩 함수(nested function)의 개념은 어렵지 않지만, 클로저는 중첩 함수에 대한 단순 함수 포인터만은 아니다. sayHello() 함수에서 text는 지역 변수이므로 스택에 할당하는 구조를 따른다면 sayHello() 함수가 리턴된 후에는 더 이상 text 변수의 값을 읽을 수 없어야 한다. 자바스크립트에서 function() { alert(text); } 같이 클로저를 선언하면 클로저 내부에서 참조하는 지역 변수인 text를 마치 힙에 할당한 것처럼 보존한다. (즉 클로저에 대한 감춰진 포인터가 하나 더 있는 셈이다.) 따라서 sayHello() 함수가 리턴된 후에도 클로저를 호출했을 때 text 변수의 값을 읽을 수 있는 것이다.

자세한 내용은 참고 문서를 참조하기 바란다.


참고 문서
[1] JavaScript Closures 101- they're not magic
http://www.javascriptkit.com/javatutors/closures.shtml

[2] More closure examples
http://www.javascriptkit.com/javatutors/closures2.shtml