워드 파일은 아래 내용을 단순히 프린트용으로 만든 버전입니다.
(잉크 절약을 위해 검은색으로 된 부분을 흰색으로 바꿨습니다.)
자바스크립트의 객체, 참조, 범위에 대해서 알아보고자 합니다. 조금은 넓게 , 얇게 그러나 깊게 파보도록 하겠습니다.
자바스크립트는 기본적으로 객체 기반 스크립트 언어입니다. 라고 하면 의아해 하실 분들도 계실거고 동의하지 않으시는 분들도 계실 겁니다. 그래서 좀 더 정확하게 말하자면 C++, JAVA의 Class 기반의 인스턴스를 활용하는 것과는 다르게 객체 그 자체와 Prototype 기반의 인스턴스를 활용 합니다. 이 말은 이 글을 보시면서 이해하시게 될 것입니다.
이 글에서 자바스크립트가 OOP로서 적당한가, 아닌가에 대해서 다룰려고 하는 게 아닙니다. 그냥 그렇다는 겁니다. 차설하고, 본격적으로 이야기를 해보겠습니다.
Built-in, Native, Host object
자바스크립트는 기본적으로 ECMA Script를 기반으로 합니다. ECMA 스크립트에서 Object는 크게 3가지 종류(type(또는 form)이 아니라 template 라고 할까요)가 있습니다.
Native Object
Built-in Object
Host Object
이렇게 세 가지가 되겠습니다.
[Native Object]는 ECMA 스크립트에 정의된 내용에 기반해 스크립트가 작동되는 중에 정의되는 객체입니다. 이 객체 중에서 일부는 Built-in으로 제공됩니다. Native는 Host(개발자가 작성한 스크립트에 의한 것)가 정의하는 것 보다 우선시 됩니다.
[Built-in Object]도 역시 ECMA에 정의된 것을 기반으로 하지만, ECMA 스크립트 프로그램이 구동되는 시점부터 바로 제공되는 객체, 즉 쉽게 말하면 기본 객체 입니다. Native는 기본 객체이긴 하지만 스크립트가 구동되는 환경에서 제작(construct)되어 제공되는 점이 다릅니다.
[Host Object]. 이것이 바로 우리가 스크립트 프로그램을 제작하면서 만들어지게 되는 객체가 되겠습니다.
즉 기본적으로 자바스크립트가 구동되는 과정은, 브라우저에 기본적으로 내장된 ECMA built-in이 구성되고 Native가 구성이 됩니다. 그리고 사용자 스크립트를 읽어들여서 Host 가 구성이 되는 것입니다.
이제, 우리가 실제로 자바스크립트에서 다루게 되는 객체에 대해서 알아보도록 하겠습니다. 자바스크립트는 위에서도 이야기했듯이 prototype과 객체 그 자체를 기반으로 하여 객체가 구성이 됩니다.
자바스크립트(ECMA)에서 Built-in 객체는 Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등이 있습니다. 그리고 Native 객체가 Host 보다 우선시 된다고 하였는데, 그것은 스크립트 환경이 구성되는 동안 먼저 built-in 객체가 구성되고 native 객체가 구성된 후 host 객체가 구성되기 때문입니다.
Number; // function Number() { [native code] }
Number = {};
Number; // Object {}
var q = 1;
q; // 1
typeof q; // "number"
q.constructor === (1).constructor; // true
Number = (1).constructor;
Number; // function Number() { [native code] }
즉 Host 스크립트에 의해서 name 이 Host로 넘어갈 수는 있지만 그 자체가 없어지는 것은 아닙니다. 그렇기 때문에 Number를 새로 할당한다고 해도 아래와 같은 게 가능합니다.
Number.prototype.multi = function(m) { return this * m; };
Number = {};
var q = 5;
q.constructor.adding = function (a) { return this + a; }
Number = (1).constructor;
q.multi(5); // 25
var w = 6;
w.multi(5); // 30
w.adding(4); //10
Number; // function Number() { [native code] }
이게 가능한 이유는 prototype을 통해서 확장된 기능은 built-in 객체가 확장되고 native 객체는 name(Number, String, Object 등등)이 없어진다고 바뀌지는 않습니다. 이것을 간단한 예로 이해를 해보자면 아래와 같습니다.
var obj = function () { this.a = 1; this.b = 'a'; };
var o = new obj;
obj = null;
o.constructor; // function () { this.a = 1; this.b = 'a'; };
var p = new o.constructor;
p.constructor === o.constructor; // true
우리가 가끔 프로그램을 제작하면서 함수로 전달받은 인자, 또는 참조하는 변수의 값을 확인하는 과정에서 많이 사용하는 게 'typeof' 와 '===', '==' 가 있습니다. 이중에서 우리를 혼동하게 하는 것이 'typeof' 입니다.
var x = [1, 2, 3];
typeof x; //"object"
x instanceof Array; // true
x instanceof Object; // true
우리는 x를 배열로 선언하고 x가 배열이 맞는지 확인하기 위해서 typeof로 Array가 나오길 기대하지만 object가 나옵니다. Date도 마찬가지로 "object"가 반환이 됩니다. 그 이유는 ECMA에 정의된 Type이 Undefined, Null, Boolean, String, Number, Object, Function 이기 때문입니다.
즉 쉽게 이해하자면, 변수에 할당되는 값의 종류는 위의 Type을 벗어나지 않는다는 것입니다. 그런데 여기서 또 하나 문제가 되는 것이 Null 입니다.
var x = null;
var y;
typeof x; // "object"
typeof y; // "undefined"
x instanceof Object; // false
x를 null로 할당을 하면 Type이 "null"로 나와야 하는데 "object"로 나옵니다. 그래서 인스턴스를 알아보면 Object는 아니라고 합니다. 이 부분에 대해서는 ECMA에서도 "null"로 바꾸자는 의견이 나왔었던 것 같은데 그냥 'typeof null' == "object"로 하기도 했다고 합니다.
자바스크립트의 모든 변수의 값은 객체입니다. 그 객체의 Type은 위에서 언급했던 것들입니다. 물론 그것은 Type이고 정확하게는 Built-in 객체가 되겠죠. 이 Built-in 객체가 되는 건, 객체가 생성되는 과정에 Class Type 으로 설정됩니다. 물론 자바스크립트 레벨의 Class는 아닙니다.
이렇게 ECMA 기술레벨에서 생성되는 객체들에 대해서는 몇 가지 설정을 할 수 있습니다. 수정이 가능한가? 같은 것들 말입니다. 예를 들자면
Number.MIN_VALUE == 5E-324
라고 나옵니다. 소수점 아래로 0이 324개 하고 5로 끝나는 어마어마 하게 작은 숫자입니다. 우리가 알고 있는 자바스크립트 설정이라면 저 MIN_VALUE를 못바꿀 것도 없습니다. 왜냐면 자바스크립트 레벨에서 protect 키워드도 없고 constant 설정도 안 되기 때문입니다. 그래서 다음과 같이
Number.MIN_VALUE = 0;
하게 되면 오류없이 실행이 됩니다. 하지만
Number.MIN_VALUE; // 5E-324
이러한 결과가 나옵니다. 이처럼 자바스크립트 레벨에서 typeof 로는 "number" 이지만 native 객체인 Number를 인스턴스 하지 않고 built-in 객체 Number로 바로 생성되는 경우가 있습니다. Built-in 객체는 위의 예에서와 같이 좀 더 자세한 설정이 가능합니다. 하지만 그것은 각 브라우저의 스크립트 엔진 측면에서 일어나는 일이니 실제 자바스크립트를 다루는 우리와는 별 인연은 없습니다.
앞서 Number, String, Object 등과 같은 Native 객체와 Built-in 객체가 다르다고 하였는데, 좀 더 자세히 알아보도록 하겠습니다. 코드가 길고 지저분해 보이실지 모르겠지만, firebug나 크롬 디버그툴, 오페라 개발자 패널 등에서 해보시면 이해하기 쉬우실 겁니다.
/* native object, Number 확인 */
Number; // Number() ==> function Number() { [native code] }
/* a 를 native Number 를 인스턴스 */
var a = new Number(55);
a; // 55 { }
typeof a; // "object"
a instanceof Number; // true
a instanceof Object; // true
/* b 를 인스턴스 없이 선언 */
var b = 55;
b; // 55
typeof b; // "number"
b instanceof Number; // false
b instanceof Object; // false
/* a와 b를 비교 */
a == b; // true
a.constructor === b.constructor; // true
/* a의 프로퍼티 확장 및 확인 */
a[0] = 'This is a number object';
a[1] = 'Instance of Number';
a; // 55 { 0: 'This is a number Object', 1: 'Instance of Number' }
a == b // true
/* native object, Number 의 프로토타입 설정 */
Number.prototype.multi = function(m) { return m * this; };
/* a, b 확인 및 확장된 메소드 실행여부 확인 */
a; // 55 { 0: 'This is a number Object', 1: 'Instance of Number', multi: function() }
b; // 55
a.multi(5); // 275
b.multi(5); // 275
/* native object, Number 의 프로토타입 설정 */
Number.prototype.push = Array.prototype.push;
/* a 확인 */
a.length = 2;
a.push('This is pushed text');
a; // 55 { 0: 'This is a number Object',
1: "Instance of Number",
2: :"This is pushed text",
length: 3,
multi: function() ,
push: function() }
/* b 확인 */
b.push('This is b!');
b; // 55
typeof b[0] == "undefined"; // true
a 는 native Number 객체를 인스턴트 했고 b는 그렇지 않았습니다. 그렇지만 결국 둘은 같은 기능으로 동작을 합니다. 계산도 되고 말입니다. native 객체로 인스턴스 하게 된 a는 확장이 가능한 객체로 반환된 반면 b는 확장이 될 수 없습니다. 이유는 native Number 가 Object를 인스턴스 하였기 때문입니다.
native를 인스턴스하게 되면 built-in 수준에서 설정이 됩니다. 하지만 그렇지 않은 경우는 기본 built-in 설정이 되게 됩니다. 그러나 인스턴스를 하지 않을 뿐 constructor 함수를 기본으로 사용하여 built-in 객체가 반환이 됩니다. 다음의 예를 보시면
/* 변수 설정 */
var a1 = new String('asdf');
var q1 = new Number(5);
var a2 = 'asdf';
var q2 = 5;
var a3 = String('asdf');
var q3 = Number(5);
/* 문자열 변수 생성자 및 인스턴스 확인 */
a1.constructor === a2.constructor; // true
a1.constructor === a3.constructor; // true
a1 instanceof String; // true
a2 instanceof String; // false
a3 instanceof String; // false
/* 숫자 변수 생성자 및 인스턴스 확인 */
q1.constructor === q2.constructor; // true
q1.constructor === q3.constructor; // true
q1 instanceof Number; // true
q2 instanceof Number; // false
q3 instanceof Number; // false
/* 문자열 변수 프로퍼티(또는 메소드) 확장 */
a1.push = a2.push =a3.push = Array.prototype.push;
a1.push; // function push() { [native code] }
a2.push; // undefined;
a3.push; // undefined;
/* 문자열 변수 length 프로퍼티 값 다루기 */
a1.length; // 4
a2.length; // 4
a3.lengthl; // 4
a1.length = 0;
a1.length; // 4
a2.length = 0;
a2.length; // 4
a3.length = 0;
a3.length; // 4
/* 확장된 프로퍼티(또는 메소드)로 실험 */
a1.push('g');
a1; // "asdf"
a1.length; // 4
/* 문자열 변수 직접 접근 및 변경 */
a1[0] = 'g';
a1[0]; // 'a'
/* 숫자 변수 프로퍼티(또는 메소드) 확장 */
q1.push = q2.push = q3.push = Array.prototype.push;
q1.push; // function push() { [native code] }
q2.push; // undefined
q3.push; // undefined
/* 숫자 변수 length 프로퍼티 확인 및 변경 */
q1.length; // undefined
q1.length = 3;
q1.length; // 3
q2.length; // undefined
q2.length = 3;
q2.length; // undefuned
q3.length; undefined
q3.length = 3;
q3.length; // undefined
/* 확장된 메소드를 사용한 경우 */
q1.push('asdfg');
q1; // 5 { 3: "asdfg", length: 4, push: function() }
/* 직접 접근한 경우 */
q1[0]; // undefined
q1[0] = 'asdf';
q1[0]; // 'asdf';
즉 native는 built-in 객체를 생성하기 위한 class 라고 보시면 됩니다. 대신 자바스크립트 레벨에서 native의 인스턴스 여부에 따라서 생성 조건이 달리지는 것입니다. 그렇기 때문에 자바스크립 상에서 var a = 1; 했을 경우 a 는 객체가 아닌 것 같지만 염연히 construct를 가진 객체라고 할 수 있습니다.
간단히 지금까지의 내용을 요약하자면, 자바스크립트의 모든 변수의 값은 객체이며 그것은 브라우저 엔진의(ECMA 기술레벨) 설정을 따르며, native 객체를 인스턴스 하느냐, 하지 않느냐에 따라서 반환된 객체의 확장성 여부 등이 달라진다. 라는 것입니다.
이제 별로 도움이 안 되었던 그리고 뭔 소린지 잘 모르겠던 built-in 객체 등등의 이야기는 그냥 그런가보다 하며 넘어가고 (사실 작성하면서 저도 용어도 혼동되고 내용도 혼동되고 그럽니다.) 객체 내에서의 참조에 대해서 알아보도록 하겠습니다.
Object Reference
자바스크립트의 기본객체는 window 입니다. 그렇기 때문에 우리가 스크립트를 작성하면서 선언하는 전역변수들은 사실상 window 객체에 종속(bind)됩니다. 쉽게 말하자면 전역 네임스페이스(namespace)로 window가 사용된다는 것입니다. (사실 네임스페이스와는 개념이 다르더라도 쉽게 생각하자는 의미에서)
var x = null;
과
window.x = null;
는 같은 것입니다. 그렇지만 브라우저 별로 두 개를 다루는 속도의 차이는 제각각이라는 걸 염두하셔야 합니다. 이와 관련해서는 예전에 작성한 Speed up Javascript 라는 게시물을 참조하시면 됩니다.
자바스크립트에서 객체의 범위는 객체 그 자신의 프로퍼티(property)까지만 한정됩니다. 이 말은 우리가 자주 사용하게 되는 this와 관련이 있습니다. 즉 this의 범위는 객체 그 자신을 가리키는 것입니다.
var obj1 = { a: function() { return this.b; }, b: 'text message'};
obj1.a(); // "text message"
var obj2 = { a: { q : function() { return this.b }, b: 'child'}, b: 'parent'};
obj2.a.q(); // 'child'
obj1의 경우 메소드 a는 함수로 함수 내부의 this는 obj1을 가리킵니다. 왜냐면 a가 obj1에 종속되어 있기 때문입니다. 반면 obj2의 메소드 q의 this는 obj2가 아닌 a를 가리킵니다. 보시다시피 q가 a에 종속되었기 때문입니다.
이러한 종속의 관계와 기본 네임스페이스(객체)인 window로 인해서 알면 당연한 것이고 모르면 황당한 결과가 나오기도 합니다.
(x=[].reverse)() === window; // true
[] 는 기본적으로 Array 객체이고 reverse는 Array 메소드 입니다.
x=[].reverse;
는 결과적으로 x는 reverse 함수가 됩니다. 그리고 앞서 말한바와 같이 기본 네임스페이스는 window 입니다.
x === window.x; //true
x === Array.prototype.reverse; // true
reverse가 this 로 Array 객체를 다룬다고 한다면 함수 끝에 return this; 이렇게 하게 되면 window에 바인드 된 x 는 window를 반환하게 됩니다. 이것을 다음과 같이 하면 확실하게 알 수 있습니다.
var b = {a:[].reverse};
b.a() === b // true
이 경우에는 a가 b에 바인딩 된 상태기 때문에 this가 b를 가리키기 때문에 b를 반환하게 됩니다.
이렇게 되는 이유는 프로퍼티에 연결되는 모든 값들은 객체이고 객체는 생성되어진 후 참조가 되어지는 것이기 때문입니다. 이 참조에 대한 쉬운 예를 들면 아래와 같습니다.
var arr = [1, 2, 3];
var q = arr;
q[0] = 4;
q; // [4, 2, 3]
arr; // [4, 2, 3]
arr === q; // true
단, 숫자나 문자열, 부울형은 객체 그 자신을 변경하게 되므로 새로운 객체가 할당되고 참조의 연결은 끊어지게 됩니다. 그것은 객체나 배열에서도 마찬가지입니다.
var q = [1, 2, 3];
var a = q[0];
a === q[0]; // true
q[0] = 4;
q; // [4, 2, 3]
a === q[0]; // false
var z = false;
var x = z;
z === x; // true
z = true;
z === x; // false
참조가 끊어졌는데 왜 다른 변수는 안 끊어졌는가 하면 앞서 built-in 객체를 생각하시면 됩니다. 즉 변수들은 built-in 객체를 참조하다가 새로운 객체가 할당되면 해당 built-in 객체의 참조를 끊고 새로운 built-in 객체를 참조하게 됩니다.
아시겠지만 함수의 기능 중에 apply 라는 것이 있습니다. 간단히 말하자면 참조의 범위를 공유하게 되는 것입니다.
var arr = [1, 2, 3];
var obj = { a: function() { return this.length; } };
obj.a(); // undefined
obj.a.apply(arr); // 3
코드에서 보이는 바와 같이 obj 객체에는 length 프로퍼티가 없기 때문에 obj.a()를 호출하면 undefined 가 뜹니다. 하지만 obj.a.apply(arr) 하게 되면 arr의 length가 출력이 됩니다. 저 apply를 아예 종속해서 이렇게도 할 수 있습니다.
var arr = [1, 2, 3];
var obj = {
a: function() {
return (function(sl) { return this.length + sl; }).apply(arr, [this.length]);
}
, length: 4 };
obj.a(); // 7
또는 function 자체를 확장해서
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6, 7, 8];
var fn = function(v) { return this.length + v; };
fn.binding = function(o) {
var s = this;
return function(bo) {
return s.apply(bo ? bo : o, [this.length]);
};
};
var obj = { a: fn.binding(arr1), length: 7 };
obj.a(); // 10
obj.a(arr2); // 12
이렇게 할 수도 있습니다. 여기서 주의할 점은 fn.binding 입니다. 우리가 아래와 같이 사용을 하게 된다면
fn.binding()();
fn.binding 내의 this는fn을 가리키게 되고, this.length 는 window.length와 같은 효과를 지니게 됩니다. 이유는 fn이 윈도우에 종속되어 window.fn 과 같이 되므로 fn의 this는 window가 되고, 결과적으로 fn.binding의 this.length는 fn내에서 this.length와 같은 것이 됩니다.
객체를 찾게 되는 순서는 지역(함수 내) 변수가 우선시 되고 없으면 전역변수에서 찾게 됩니다. 그래서 보통 빠른 속도를 내기 위해서는 함수내에서 자주 사용되는 전역 변수를 지역변수에 할당하기도 합니다. 문제는 클로저(closure)에 있습니다.
Closures
클로저는 지역변수, 전역변수도 아닌 버려진 변수라고 할 수 있습니다. 클로저는 유용하게 사용할 수 있지만, 보통은 의도하지 않은 상황(클로저라는 개념을 모르거나 사용하지 않으려 했을 경우)에서 연출되는 경우에 많이 발생한다는 것입니다. 그리고 이것은 메모리 관리에 있어서 문제가 되기도 합니다.
자바스크립트는 사용하지 않는 변수들을 처리하는 GC(Garbage collection)가 일어나 메모리를 정리합니다. 문제는 클로저로 처리된 변수들은 함수의 수행이 끝나도 남아있게 된다는 것입니다. 방금 function을 확장하던 부분에서
fn.binding = function(obj) {
var s = this;
return function(bo) {
return s.apply(bo ? bo : obj, [this.length]);
};
};
이 부분을 보시면 반환되는 함수에 's'가 있습니다. 결론적으로
obj.a; // function(bo) { return s.apply(bo ? bo : obj, [this.length]); }
s; // undefined
obj.a 는 매 실행시 s 라는 함수를 실행하게 되는데, 실제로 이 함수는 전역(global)으로 명시된 상황은 아닙니다. 하지만 함수는 실행시에 s를 참조할 수 있습니다. 보통이라면 함수가 수행된 뒤에는 지역변수는 없어지는 게 맞지만 이 경우에는 반환되는 값에서 지역변수를 참조하기 때문에 메모리상에 built-in 객체가 남게 됩니다. 물론 어떤 특수한 목적으로 계산된, 한정된 범위 내에서의 클로저의 사용은 매우 유용합니다.
클로저의 유용함이란 바로, 자바스크립에서 private 멤버(method, property)를 구현하는데 이용할 수 있다는 것입니다.
var animal = function(n, a) {
var nick = n;
var age = a;
var growth = function() { return ++age; }
return {
setNick: function(n) { nick = n; },
getNick: function() { return nick; },
setAge: function(a) { age = a; },
getAge: function() { return age; },
getAll: function() { return [nick, age]; },
newYear: function() { return nick + ' is now ' + growth() + ' years old'; }
};
};
var dog = new animal('happy', 1);
dog.nick; // undefined
dog.age; // undefined
dog.nick = 'song';
dog.nick; // "song"
dog.getNick(); // "happy";
dog.setNick('MungMung');
dog.nick; // "song"
dog.getNick(); // "MungMung"
dog.newYear(); // "MungMung is now 2 years old"
dog.getAge(); // 2
위와 같이 구현을 하였을 때, animal 안의 nick과 age는 분명 외부에서 접근할 수 없습니다. 하지만 클로저가 형성이 되면서 외부에서는 접근이 안 되는 private 멤버가 만들어지게 됩니다.
클로저는 이런 유용함이 있으면서도 주의를 요하는 것은 비단 메모리 누수와 관련된 문제만이 아닙니다. 메모리 누수와 관련된 이야기는 많이 들어보셨을 것이고, 그 이유는 클로저가 GC에서 회수가 안 되고, 해당 구분이 지속적으로 실행되면서 계속해서 쌓이게 될 수 있기 때문입니다.
그리고 또 다른 이유는 네이밍 참조, 그러니까 전역변수를 참조하기 위해 nick 를 썼는데, 그게 클로저를 참조하는 경우도 생길 수 있다는 것입니다. 물론. window.nick 와 같은 방법을 사용하여 피할 수도 있습니다.
클로저가 우리가 생각하지 못했던, 즉 의도하지 않게 일어나서 메모리 문제를 일으키는 경우의 부분은 setTimeoue 설정이나 이벤트설정에서 많이 발생합니다. 이유는 우리가 이 둘에 할당하는 함수가 미리 지정된 함수를 쓰는 경우도 있지만, 그 때의 상황마다 익명함수를 할당하는 경우도 많기 때문입니다. 예를 들자면
var el = document.getElementById('test');
el.onclick = function() { …… };
이런 경우가 있다고 하면, 저 한 번의 경우는 별 문제가 될 것이 업습니다. 하지만 반복적인 어떤 작업을 통해서 저와 비슷한 작업이 많이 발생하게 된다면 문제가 됩니다. 저게 어째서 클로저인가? 하시는 분들이 계실지도 모르겠습니다. 왜냐하면 el.onclick 이 window.el.onclick 이라면 그럴 수 있습니다만,
function setFn(id)
{
var el = document.getElementById(id);
el.onclick = function() { alert(el.id); }
}
이런 경우에는 명백히 클로저가 됩니다. 물론 window.el 도 사실상 DOM에 접근한 것이기 때문에 사실상 자바스크립트로 명명된 것이라 보기는 힘듭니다. 무슨 말인가 하면
var el = document.getElementById('test');
el.onclick = function() { …… };
delete el;
이렇게 하여도 'test' 라는 문서개체(element)는 여전히 익명함수를 갖고 있습니다. 앞서도 언급하였지만, 자바스크립트는 객체 참조를 하기 때문에 어느 하나라도 참조가 되고 있는 객체는 메모리에서 수거가 되지 않습니다.
그렇지만 클로저의 사용은 분명 관리만 잘 한다면 속도 부분에서 큰 이득을 안겨줄 수 있습니다.
var i = 0;
function test(){
var i = 0; // case(3)
return function() {
//var j = window.i++; //case (1)
var j = i++; // case(2)
};
};
var fn = test();
var t1 = new Date;
var k = l = 0;
for ( ; k++ < 200000; )
{
for ( ; l++ < 200000; )
{
fn();
};
};
alert((new Date) - t1);
위 예제에서 각각 다음과 같은 설정으로 실험을 해보시면 알게 되실 겁니다.
1) case1 주석처리
2) case 1, 3 주석처리
3) case 2 주석처리
브라우저 별로 상황이 다르기는 하겠지만 보통 window.i 식으로 접근하는 것 보다 클로저가 빠를 것입니다. (해보시면 아시겠지만 IE ㅤㅅㅞㅅ 소리 나옵니다.) 또 브라우저에 따라서 클로저보다 전역 i를 참조하는 게 더 빠른 경우도 있습니다.
Fin
하다보니 클로저까지 하게 되었습니다. 클로저에 대한 이해는 좀 많이 부족할 수도 있습니다. 그 부분에 대해서는 구글링만 살짝하여도 충분한 얘기들이 나오니 그것을 참조하셔도 좋을 것입니다.
자바스크립트는 스크립트언어라는 특성상 가볍게 보일 수도 있지만, 그 특유의 유연함은 정말 환상적이라고 할 수 있습니다. 다만 그 유연함이 많은 불안정성을 내포하고 있다는 것, 그것을 염두해야 할 것 입니다.
이상으로 별 영양가 없는 강좌 아닌 강좌, 팁 아닌 팁을 마치도록 하겠습니다.
자바스크립트의 객체.docx
