[JS] 자바스크립트 객체

자바스크립트!!!!!의 객체~!

객체??

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

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

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

- 객체는 변형 가능한 속성들의 집합

- 자바스크립트에서는 배열, 함수, 정규 표현식 등과 객체 모두가 객체!

- 객체는 이름과 값이 있는 속성들을 포함하는 컨테이너

- 속성의 이름은 문자열이면 모두 가능(빈 문자열 가능)

- 속성의 값은 undefined를 제외한 자바스크립트의 모든 값이 사용 될 수 있음

- 자바스크립트는 class-free

- 새로운 속성이나 값에 제약사항 없음

- 데이터를 한 곳에 모으고 구조화 하는데 유용

- 객체는 다른 객체를 포함 할 수 있어서, 그래프나 트리 같은 자료구조를 쉽게 표현

- 객체 하나에 있는 속성들을 다른 객체에 상속하게 해주는 프로토타입(prototype) 연결 특성이 있음

   프로토타입을 잘 활용해 객체를 초기화 하는 시간과 메모리 사용을 줄일 수 있음

객체 리터럴

- 새로운 객체를 생성할 때 매우 편리한 표기법을 제공

- 이 표기법은 아무 것도 없거나 하나 이상의 이름/값 쌍들을 둘러싸는 중괄호, 

   표현식이 있을 수 있는 곳이라면 어디에도 위치 가능

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

- 속성의 이름은 어떤 문자열이라도 가능(빈 문자열 포함)

- 속성 이름에 사용한 따옴표는 속성 이름이 자바스크립트에서 사용할 수 있는 유효한 이름이고, 

   예약어가 아닌 경우 생략 가능( "first-name"은 반드시 따옴표 사용, first_name은 해도되고 안해도 됨)

- 쉼표(,)는 "속성 이름": "값" 쌍들을 구분하는데 사용

- 속성의 값은 어떠한 표현식도 가능

- 속성의 값은 객체 리터럴도 가능

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" } };

속성값 읽기

- 객체에 속한 속성의 값은 속성 이름을 대괄호 [] 로 둘러싼 형태로 읽을 수 있음

- 속성 이름이 유효한 이름이고 예약어가 아닌 경우 마침표 . 표기법을 대신 사용할 수 있음

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

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

- || 연산자를 사용하여 기본값을 지정할 수 있음

- 존재하지 않는 속성, 즉 undefined의 속성을 참조하려 할 때, TypeError 예외가 발생

   이를 방지하기 위해 && 연산자를 사용할 수 있음

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

속성값의 갱신

- 객체의 값은 할당에 의해 갱신

- 만약 할당하는 표현식에서 속성 이름이 이미 객체 안에 존재하면 해당 속성의 값만 교체

- 반대로, 속성이 객쳋 내에 존재하지 않는 경우에는 해당 속성을 객체에 추가

참조

- 객체는 참조 방식으로 전달

- 결코 복사되지 않음

프로토타입(Prototype)

- 모든 객체는 속성을 상속하는 프로토타입 객체에 연결되어 있음

- 객체 리터럴로 생성되는 모든 객체는 

   자바스크립트 표준 객체인 Object의 속성인 prototype(Object.prototype) 객체에 연결됨

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

- Object 객체에 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);

열거(Enumeration)

- for in 구문을 사용해 객체에 있는 모든 속성의 이름을 열거

- 이 방법은 함수나 프로토타입에 있는 속성 등 모든 속성이 포함되기 때문에 필터링 필요

- 일반적인 필터링 방법은 hasOwnProeprty 메소드와 함수를 배제하기 위한 typeof를 사용 하는 것

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

- for in 구문은 속성들을 이름순으로 보장하지 않음

- 특정 순으로 속성 이름들이 열거되기를 원하면 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]]); }

삭제

- delete 연산자를 사용해 객체의 속성을 삭제 할 수 있음

- 해당 속성이 객체에 있을 경우 삭제를 하며 프로토타입 연결 상에 있는 객체들은 접근하지 않음

- 객체에서 특정 속성을 삭제했는데 같은 이름의 속성이 프로토타입 체인에 있는경우 

  프로토 타입의 속성이 나타남

최소한의 전역변수 사용

- 전역변수는 프로그램의 유연성을 약화하기 때문에 가능하면 피해야 함

- 한가지 방법으로는 전역변수 사용을 위해 전역변수 하나를 만들고, 다른 전역변수를 위한 컨테이너로 사용함

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 같은 경우 명시적으로 전역변수라는 것을 나타내 프로그램 가독성도 높음

- 클로저의 사용도 전역변수 사용을 줄이는 효과적인 방법 중 하나