자바스크립트 핵심 가이드 - (객체)

객체는 이름과 값이 있는 속성들을 포함하는 컨테이너라고 할 수 있다.

자바스크립트에서 숫자, 문자열, boolean(true/false), null, undefined 를 제외한 다른 값들은 모두 객체 이다.

숫자와 문자열, boolean 은 메소드가 있기 때문에 유사 객차라고 할 수 있으나, 이들은 값이 한번 정해지면 변경할 수 없다. (immutable)

자바스크립트의 객체는 변형 가능한 속성들의 집합이라고 할 수 있다. (배열, 함수, 정규식 등)

 

자바스크립트에는 개체 하나에 있는 속성들을 다른 객체에 상속하게 해주는 프로토타입(prototype) 연결 특성이 있다.

이 특성을 잘 활용하면, 객체를 초기화하는 시간과 메모리 사용을 줄일 수 있다.

 

1) 객체 리터럴

   새로운 객체를 생성할 때 매우 편리한 표기법으로 아무 것도 없거나 하나 이상의 name/value 쌍으로 둘러싸는 중괄호이다.

   ex 1) var empty_obj = {};

   ex 2) var stooge = {

"first_name" : "Kim",

"last-name" : "Young"

           };

   ex 3) var flight = {

airline : "Asiana",

number : 815,

departure : {

IATA : "SYD",

time : "2013-08-14 08:08",

city : "Beging"

},

arrival : {

IATA : "LAX",

time : "2013-08-15 20:54"

city : "Seoul"

}

           };

2) 속성값 읽기

    대괄호([])로 읽기, 마침표(.)표기법으로 읽기를 사용할 수 있으며 마침표 표기법은 보다 간단하고 읽기 편하기 때문에 더 선호된다.

    객체에 존재하지 않는 속성을 읽으려면 undefined를 반환한다.

    flight.status   // undefined

 

    || 연산자를 이용하여 기본값을 지정할 수 있다.

    var status = flight.status || "unknown";

 

    undefined의 속성을 참조하려 할 때 TypeError 예외가 발생한다. 이를 방지하기 위해 && 연산자를 사용 할 수 있다.

    flight.equipment                                                    // undefined

    flight.equipment.model                                           // throw "TypeError"

    flight.equipment && flight.equipment.model               // undefined

 

3) 속성값의 갱신

    객체 안에 존재하면 해당 속성의 값만 교체 된다.  

    stooge['first-name'] = "Lee";

    이와 반대로 속성이 객체 내에 존재하지 않는 경우 해당 속성을 객체에 추가 한다.

    stooge['middle-name'] = "Hoi";

    stooge.nickname = '천재';

    flight.equipment = {

    model : "Boeing 777"

    };

 

4) 참조

    객체는 참조 방식으로 전달 된다. 결코 복사 되지 않는다.

    var x = stooge;

    x.nickname = '천재';

    var nick = stooge.nickname;  // x와 stooge가 같은 객체를 참조하기 때문에 nick 은 '천재' 가 된다.

    var a = {}, b = {}, c = {};      // a, b, c 는 각각 다른 빈 객체를 참조

    a = b = c = {};                     // a, b, c 는 모두 같은 빈 객체를 참조

 

5) 프로토타입(Prototype)

    객체 리터럴로 생성되는 모든 객체는 자바스크립트의 표준 객체인 Object의 속성인 prototype (Object.prototype) 객체에 연결된다.

    객체를 생성할 때는 해당 객체의 프로토타입이 될 객체를 선택할 수 있다. 

    

    Object 객체에 create라는 메소드를 추가 해보자.

    create는 넘겨받은 객체를 프로토타입으로 하는 새로운 객체를 생성하는 메소드 이다. 

    if ( typeof Object.create !== 'function' ) {

Object.create = function (o) {

var F = function() {};

F.prototype = o;

return new F();

}

    }

    var another_stooge = Object.create(stooge);

    프로토타입 연결은 값의 갱신에 영향을 받지 않는다. 즉 객체를 변경하더라도 객체의 프로토타입에는 영향을 미치지 않는다.

    another_stooge['first-name'] = 'Jeon';

    another_stooge.nickname = '이쁜이';

 

    프로토타입 연결은 오로지 객체의 속성을 읽을 때문 사용한다. 객체이 있는 특정 속성의 값을 읽으려고 하는데 해당 속성이 객체에 

    없는 경우 자바스크립트는 이 속성을 프로토타입 객체에서 찾으려고 한다. 이러한 시도는 프로토타입 체인(prototype chain)의 가장

    마지막에 있는 Object.prototype 까지 계속해서 이어진다. 만약 찾으려는 속성이 체인 어디에도 없다면 undefined 를 반환한다. 

    이러한 일련의 내부 동작을 위임(delegation) 이라고 한다. 

    

    프로토타입 관계는 동적 관계이다. 만약 프로토타입에 새로운 속성이 추가되면, 해당 프로토타입을 근간으로 하는 객체들에는 즉각

    적으로 이 속성이 나타난다. 

    stooge.profession = 'actor';

    another_stooge.profession; // 'actor'

 

6) 리플렉션(reflection)

    객체에 어떤 속성이 있는지를 특정 속성을 접근해서 반환하는 값을 보면 쉽게 알 수 있다. 

    - typeof 이용

    typeof flight.number    // 'number'

    typeof flight.arrival      // 'object'

    typeof flight.mainfest   // undefined

 

    또다른  방법은 객체에 특정 속성이 있는지를 확인하여 true/false 를 반환하는 hasOwnProperty 메소드를 사용하는 것이다. 

    hasOwnProperty 는 프로토타입 체인을 바라보지 않는다.

    flight.hasOwnProperty('number')        // true

    flight.hasOwnProperty('constructor')  // false

 

7) 열거

   for in을 통해 모든 속성의 이름을 열거할 수 있다.  

   hasOwnProperty 메소드와 함수를 배제하기 위한 typeof 를 사용하는 예를 살펴 보자.

 

   var name;

   for(name in another_stooge) {

if ( typeof another_stooge[name] !== 'function') {

document.writeln(name + ' : ' +another_stooge[name] );

}

   }

   

   for in 구문을 사용하면 속성들이 이름순으로 나온다는 보장은 없다. 

   순서대로 처리하기를 원한다면 아래와 같이 처리할 수 있다.

   var i;

   var properties = [

'first-name',

'middle-name',

'last-name',

'profession'

    ];

    for ( i = 0; i < properties.length; i += 1) {

document.writeln(properties[i] + ' : ' + another_stooge[properties[i]]);

    }

 

8) 삭제

    delete 연산자를 사용하면 객체의 속성을 삭제할 수 있다. 해당 속성이 객체에 있을 경우에 삭제를 하며 프로토타입 연결 상에 있는 

    객체들은 접근하지 않는다.

    객체에 특정 속성을 삭제 했는데 같은 이름의 속성이 프로토타입 체인에 있는 경우 프로토타입의 속성이 나타난다. (당연하다)

    another_stooge.nickname      // '이쁜이'

    delete another_stooge.nickname;

    another_stooge.nickname      // '천재'

 

9) 최소한의 전역변수 사용

    자바스크립트에서는 전역변수 사용이 매우 쉽다.

    하지만 전역변수는 프로그램의 유연성을 약화하기 때문에 가능하면 피하는 것이 좋다.

    전역변수 사용을 최소화하는 방법 한 가지는 애플리케이션에서 전역변수 사용을 위해 다음과 같이 전역변수 하나를 만드는 것이다.

    var MYAPP = {};

    이제 이 변수를 다른 전역변수를 위한 컨테이너로 사용하자.

    MYAPP.stooge = {

"first-name" : "Kim",

"last-name" : "Young"

    };

 

    MYAPP.flight = {

airline : "Asiana",

number : 815,

departure : {

IATA : "SYD",

time : "2013-08-14 08:08",

city : "Beging"

},

arrival : {

IATA : "LAX",

time : "2013-08-15 20:54"

city : "Seoul"

}

    }

 

    이러한 방법으로 애플리케이션에 필요한 전역변수를 이름 하나로 관리하면 다른 애플리케이션이나 위젯 또는 라이브러리들과 

    연동할 때 발생하는 문제점을 최소화할 수 있다.