소프트웨어/JavaScript • Dhtml

정확히 말하면 ECMA 스크립트의 특징이지만 뭐… ^^

falconer 2007. 4. 13. 07:55
정확히 말하면 ECMA 스크립트의 특징이지만 뭐… ^^

첫번째, 객체의 생성

var arr = [];
var obj = {};
var str = "";
var arr1 = [1,2,3];
var obj1 = {prop1 : 'value1', "prop2" : 'value2'};


Object는 {} 로, Array는 []로 생성할 수 있다. object 를 생성할 때 property 의 이름은 따옴표를 따로 해주지 않아도 prop1의 경우처럼 그냥 사용할 수 있다. 하지만, 혹시라도 있을지 모르는 문제점(prop1이 변수로 선언되어있다던가 하는…)을 미리 방지하기 위해서 따옴표를 붙여주도록 하는게 좋다. 단, 충돌이 없음이 확실하다면 생략해도 무방하다.

두번째, object property의 접근

var obj = { "prop1" : "value1", "prop2" : "value2" };
alert(obj.prop1);
alert(obj["prop1"]);


. 으로 호출하는 방법, 문자열로 인덱스를 지정하는 방법. 둘 다 사용가능하다. 따라서 다음과 같은 것도 가능하다.

var i=2;
alert(obj["prop"+i]);

세번째, or 의 사용

var val = predefined_value || "value";


or 연산자로 연결된 값을 처음부터 비교해서 false와 동등하게 처리되는 값이 아니라면 반환한다. false와 동등하게 처리되는 값에는 undefined, null, 숫자0, false가 있다. 위 코드에서는 predefined_value 라는 변수가 정의되어있지 않으면 “value”이라는 값을 val 이라는 변수에 할당한다. 보통 IE와 FF의 이벤트 처리가 다른데 그럴 경우에 다음과 같이 사용하기도 한다.

function eventHandler(e) {
  var evt = e || window.event;
// ... some code
}

네번째, 괄호()의 사용

(function(str){
  alert(str);
})("str");


괄 호는 괄호안의 내용을 해석/실행해서 결과값을 리턴하는 역할이다. (1+2) 라고 하면 괄호는 1+2를 계산해 3 이라는 값을 리턴하는 것과 마찬가지라는 뜻. 따라서 위처럼 anonymous 함수를 만들어놓고 바로 실행할 수도 있게된다(괄호를 통해 함수객체가 반환되었기 때문).
____________________________________________________
추가 - 2007.3.25


아래 코멘트들을 보고 혹시 헛갈려 하시는 분들이 있을까봐 정리해드립니다.
----------------------------------------
var obj = new Object; 와
var obj = {}; 은 같은 표현입니다.

{}을 이용하면 연관배열처럼 사용할 수는 있지만 여전히 Object 타입이며, 연관배열 타입이라는 것은 존재하지 않습니다. 보는 관점에 따라서 javascript에 객체란 없으며 모두 연관배열처럼 구성되어있다는 입장도 있습니다. 마치, PHP의 클래스들이 배열로 구성된 것과 같은 이치입니다. 하지만, {}가 Object 타입의 인스턴스라는 것에는 이의가 없습니다. 있다면, 다른 분들이 말씀해주실 것으로 압니다.

제 견해로는 아무리 느슨해도 객체는 객체입니다. 유연함이 가능한 스크립트언어의 특성일 뿐, 연관배열이 아닌 동적 프로퍼티 구성이 가능한 것으로 봐야 한다는게 제 의견입니다. 자바스크립트는 내장 함수도 재정의할 수 있을 정도로 유연한 언어입니다.

참고로, PHP에서도 연관배열이 따로 존재하지만,
$inst = new Klass;
$inst->a = "bc";
$inst->b = "de";

와 같이 동적으로 프로퍼티를 생성하는게 가능합니다.
----------------------------------------
var obj = {
  "a" : "bc",
  "b" : "de",
  "f" : function() {
      alert(this.a);
  }
};
obj.f();

{}이 Object 타입이 아니라 단순한 연관배열일 뿐이라면 this 는 window 객체가 되어야 하지만 결과는 그렇지 않습니다. 위 표현은 다음과 같이 변경할 수도 있습니다.

var obj = new Object;
obj.a = "bc";
obj.b = "de";
obj.f = "function() {
    alert(this.a);
}
obj.f();

완전히 같은 경우입니다. {}은 new Object 와 같은 결과이며, {프로퍼티이름:값}은 new Object를 만들고 프로퍼티와 값을 작성해준 경우입니다. 이는 ECMA-262 문서에 나와있는 내용입니다.

따라서, {}을 연관배열 표현이라고 부르는 것은 잘못된 견해라고 봅니다. 메소드가 없다면 연관배열 혹은 해시라고 부르는 것처럼 사용할 수도 있습니다만, 그렇다고 해서 {}이 연관배열의 표현인 것은 아닙니다.

{}은 Object의 인스턴스를 생성하는 Object literal 입니다.
혹시라도 오해없으시길 바랍니다.
______________________________________

참고로, 지금 Mozilla에서 준비하고 있는 Tamarin 프로젝트에서 ECMA4 엔진을 개발중이며 이 엔진의 결과로 Javascript2 가 나옵니다. Javascript2에는 class 가 생길거라고 하는군요.

Taramin 프로젝트에 대해서 쓰다가 좀 길어져서 별도의 글로 다시 작성합니다. ^^;;


출처 : 행복한고니