javascript 객체

객체??

- 단순한 데이터 타입인 숫자, 문자열, 불리언(true/false), null, undefined 를 제외한 다른 값들은 모두 객체!

- 숫자와 문자열, 불리언은 메소드가 있기 때문에 유사 객체라고 할 수 있음

   하지만, 값이 한번 정해지면 변경할 수 없음(immutable)

- 객체는 변형 가능한 속성들의 집합- 자바스크립트에서는 배열, 함수, 정규 표현식 등과 객체 모두가 객체!
- 객체는 이름과 값이 있는 속성들을 포함하는 컨테이너- 속성의 이름은 문자열이면 모두 가능(빈 문자열 가능)- 속성의 값은 undefined를 제외한 자바스크립트의 모든 값이 사용 될 수 있음
- 자바스크립트는 class-free- 새로운 속성이나 값에 제약사항 없음- 데이터를 한 곳에 모으고 구조화 하는데 유용- 객체는 다른 객체를 포함 할 수 있어서, 그래프나 트리 같은 자료구조를 쉽게 표현- 객체 하나에 있는 속성들을 다른 객체에 상속하게 해주는 프로토타입(prototype) 연결 특성이 있음   프로토타입을 잘 활용해 객체를 초기화 하는 시간과 메모리 사용을 줄일 수 있음




객체 리터럴- 새로운 객체를 생성할 때 매우 편리한 표기법을 제공- 이 표기법은 아무 것도 없거나 하나 이상의 이름/값 쌍들을 둘러싸는 중괄호,    표현식이 있을 수 있는 곳이라면 어디에도 위치 가능

?

1 2 3 4 5 6

var empty_object = { };   var stooge = {     "first name": "Nova",     "last name": "Croute" };

- 속성의 이름은 어떤 문자열이라도 가능(빈 문자열 포함)- 속성 이름에 사용한 따옴표는 속성 이름이 자바스크립트에서 사용할 수 있는 유효한 이름이고,    예약어가 아닌 경우 생략 가능( "first-name"은 반드시 따옴표 사용, first_name은 해도되고 안해도 됨)- 쉼표(,)는 "속성 이름": "값" 쌍들을 구분하는데 사용
- 속성의 값은 어떠한 표현식도 가능- 속성의 값은 객체 리터럴도 가능

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var flight = {     airline: "Oceanic",     number: 815,     departure: {         IATA: "SYD",         time: "2012-07-05 01:11"         city: "Seoul"     },     arrival: {         IATA: "LAX",         time: "2012-07-05 02:22"         city: "Incheon"            } };

 

속성값 읽기- 객체에 속한 속성의 값은 속성 이름을 대괄호 [] 로 둘러싼 형태로 읽을 수 있음- 속성 이름이 유효한 이름이고 예약어가 아닌 경우 마침표 . 표기법을 대신 사용할 수 있음

?

1 2	stooge["first-name"]    // Nova flight.departure.IATA    // SYD

 

- 객체에 존재하지 않는 속성을 읽으려고 하면 undefined를 반환
- || 연산자를 사용하여 기본값을 지정할 수 있음- 존재하지 않는 속성, 즉 undefined의 속성을 참조하려 할 때, TypeError 예외가 발생   이를 방지하기 위해 && 연산자를 사용할 수 있음

?

1 2 3

flight.equipment                       // undefined flight.equipment.model                      // throw TyepError flight.equipment && flight.equipment.model   // undefined

 

속성값의 갱신- 객체의 값은 할당에 의해 갱신- 만약 할당하는 표현식에서 속성 이름이 이미 객체 안에 존재하면 해당 속성의 값만 교체- 반대로, 속성이 객쳋 내에 존재하지 않는 경우에는 해당 속성을 객체에 추가

 

참조- 객체는 참조 방식으로 전달- 결코 복사되지 않음

 

프로토타입(Prototype)- 모든 객체는 속성을 상속하는 프로토타입 객체에 연결되어 있음- 객체 리터럴로 생성되는 모든 객체는    자바스크립트 표준 객체인 Object의 속성인 prototype(Object.prototype) 객체에 연결됨
- 객체를 생성할 때 해당 객체의 프로토타입이 될 객체를 선택할 수 있음- Object 객체에 create 메소드를 추가

?

1 2 3 4 5 6 7

if (typeof Object.create !== 'function') {     Object.create = function (o) {         var F = function () { };         F.prototype = o;         return new F();     };  var another_stooge = Object.create(stooge);

 

 

 

 

열거(Enumeration)- for in 구문을 사용해 객체에 있는 모든 속성의 이름을 열거- 이 방법은 함수나 프로토타입에 있는 속성 등 모든 속성이 포함되기 때문에 필터링 필요- 일반적인 필터링 방법은 hasOwnProeprty 메소드와 함수를 배제하기 위한 typeof를 사용 하는 것

?

1 2 3 4 5 6

var name;     for (name in another_stooge) {         if (typeof another_stooge[name] !== 'function') {             document.writeln(name + ': ' + another_stooge[name]);         }     }

 

- for in 구문은 속성들을 이름순으로 보장하지 않음- 특정 순으로 속성 이름들이 열거되기를 원하면 for in 구문을 사용하지 말고  열거되기 원하는 순서를 특정 배열로 지정, 이 배열을 이요해 객체의 속성을 열거

?

1 2 3 4 5 6 7 8 9 10 11 12

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]]); }

 

 

 

삭제- delete 연산자를 사용해 객체의 속성을 삭제 할 수 있음- 해당 속성이 객체에 있을 경우 삭제를 하며 프로토타입 연결 상에 있는 객체들은 접근하지 않음- 객체에서 특정 속성을 삭제했는데 같은 이름의 속성이 프로토타입 체인에 있는경우   프로토 타입의 속성이 나타남

 

최소한의 전역변수 사용- 전역변수는 프로그램의 유연성을 약화하기 때문에 가능하면 피해야 함- 한가지 방법으로는 전역변수 사용을 위해 전역변수 하나를 만들고, 다른 전역변수를 위한 컨테이너로 사용함

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var MAPP = { }; MAPP.stooge = {     "first-name": "Joe",     "last-name": "Howard", };   MAPP.flight = {     airline: "Oceanic",     number: 815,     departure: {         IATA: "SYD",         time: "2004-09-22 14:55",         city: "Sydney"     },     arrival: {         IATA: "LAX",         time: "2004-09-23 10:42",         city: "Los Angeles"     } };

 

- 이런 방식으로 애플리케이션에 필요한 전역변수를 이름 하나로 관리하면,  다른 애플리케이션이나 위젯, 라이브러리들과 연동할 때 발생하는 문제점을 최소화 할 수 있음- MAPP.stooge 같은 경우 명시적으로 전역변수라는 것을 나타내 프로그램 가독성도 높음- 클로저의 사용도 전역변수 사용을 줄이는 효과적인 방법 중 하나

http://croute.me/565