자바스크립트 다시보기

Posted 2007.03.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에 대한 그런 오해를 불식시키고자 작성된 글입니다.

신고

SpiderMonkey와 Tamarin

Posted 2007.01.31 15:51
Channy님이 작성하신 "Mozilla와 Adobe 손잡다!"라는 글을 의견을 달아봅니다.

Adobe 사가 자사의 Flash Player 9에 탑재되어 있던 ActionScript 실행 엔진인 Action Script Virtual Machine(AVM2)를 오픈소스화하여 모질라 프로젝트에 기부하였습니다. 현재 3.0 버전인 ActionScript는 ECMAScript에 기반하고 있고, 마찬가지로 ECMAScript에 기반한 자바스크립트와 형제 관계입니다. 따라서 AVM2는 현재 Firefox 2에 탑재되어 있는 자바스크립트 엔진인 SpiderMoneky를 대체 혹은 보완하는데 사용될 수 있는 것이지요.

AVM2는 오픈소스화 되면서 원숭이 이름을 따서 코드명을 짓는 모질라의 관습에 따라 Tamarin 프로젝트로 이름을 바꾸게 됩니다. Tamarin은 다른 자바스크립트 엔진과 달리 JIT(Just In Time) 컴파일을 지원합니다. 쉽게 말해, 실행 전에 바이트코드를 머신 코드로 변경해 빠른 속도로 자바스크립트를 실행하는 기술을 말합니다. Adobe 사의 벤치마킹에 따르면 Tamarin을 사용하면 최대 10배 이상의 성능 향상 효과를 볼 수 있다고 합니다.

코드 통합이 순조롭게 진행되면 Firefox 3부터는 Tamarin을 자바스크립트 엔진으로 사용하게 될 것입니다.  FIrefox는 Gecko 엔진과 XUL 엔진 부분을 제외하면 브라우저도 자체도 대부분 자바스크립트로 작성되어 있습니다. JIT 엔진을 도입하면 브라우저의 속도가 향상되는 효과가 있을 것으로 예상합니다.

하지만 이 기술이 의미하는 바가 단순히 브라우저의 실행 속도 향상은 아닙니다. 웹 2.0을 표방하는 사이트들이 기술적으로는 AJAX를 바탕으로 하고 있고, AJAX는 결국 자바스크립트를 더욱 많이 사용함을 뜻합니다. 따라서 Tamarin 엔진 도입으로 자바스크립트의 실행 속도가 비약적으로 빨라진다면, 점진적으로 지금보다 좀 더 상호작용이 강하고 동적인 웹 2.0이 더욱 확산될 수 있는 인프라를 만드는 셈이 됩니다.


Frank Hecker가 작성한 "Adobe, Mozilla, and Tamarin"를 읽어보시면 이에 대한 좀 더 자세한 내용을 얻을 수 있습니다.

신고

DMDScript

Posted 2007.01.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

신고

티스토리 툴바