더글라스 크락포드의 자바스크립트 핵심가이드를 정리한 문서입니다.
총 10장으로 이루어진 책으로 한 장씩 정리하여 포스팅할 예정입니다.
본 책은 자바스크립트의 좋은 점만을 정리한 책으로, 나쁜 점을 잊어야 할 수고를 덜 수 있습니다.
- 객체 리터럴
이름과 값이 있는 속성을 포함하는 컨테이너입니다.
- 이름은 빈 문자열(‘’)부터 모든 문자열이 가능하며, 예약어가 아닌 경우 문자열로 지정하지 않아도 됩니다.
- 값은
undefined를 제외한 모든 값이 가능합니다 (함수도 가능)
var flight = {
airline: "Oceanic",
number: 815,
departure:{
IATA:"SYD",
time:"2019-01-01 12:00",
city:"Sydney"
},
arrival:{
IATA:"LAX",
time:"2020-01-01 12:00",
city:"Los Angeles"
}
};2. 속성값 접근
속성값은 마침표 또는 대괄호로 접근하여 읽거나 쓰기가 가능합니다
flight['airline'] = {}
flight.airline = {}3. 속성값 갱신
존재하지 않는 속성은 추가되고, 기존에 있는 속성은 갱신이됩니다
var stooge = {"first_name":"Smith"}
stooge.first_name = "Sam"; // 교체
stooge.last_name = "Smith"; // 추가4. 객체 값의 참조
객체의 할당 또는 매개변수로서 전달은 참조 방식을 사용하고 있습니다.
(call by reference)
var stooge = { first_name: "Sam", last_name:"Smith" }
nick = stooge;
nick.first_name = "Joe";
stooge.first_name // Joe5. 프로토타입
프로토타입이란, 상속을 위한 객체입니다. 자식객체에서 사용할 속성을 미리 정의할 수 있습니다.
객체를 생성하면 객체와 prototype 객체가 생성됩니다.
부모객체에서는 공통으로 사용할 기능을 미리 만들어놓고 자식은 이를 그대로 사용하거나 발전시켜서 활용할 수 있습니다.
function Person(){}; // 객체선언Person // 객체생성
Person.prototype // 프로토타입 객체 생성
- 객체의
__proto__속성은 객체가 생성된 부모의prototype객체와 연결됩니다. - 프로토타입 객체의
constructor속성은 객체자신을 가르치고 있습니다.
위의 관계를 코드로 나타내자면, 아래와 같습니다
Person.__proto__ === Function.prototype // true
Person.prototype.constructor === Person // true자식객체의 속성을 변경하여도 부모의 프로토타입 속성은 변경되지 않습니다. 그 이유는 프로토타입연결은 속성을 읽을 때만 사용하기 때문입니다.
상위 프로토타입에 속성이 추가되면 해당 프로토타입을 근간으로 하는 객체들에 즉각적으로 속성이 생성됩니다
객체의 속성을 접근할 때, 해당 객체에 존재하지 않으면 부모의 프로토타입에서 찾고 최종적으로 Object 객체의 prototype까지 접근합니다.
프로토타입 예제코드를 짜보도록 하겠습니다.
// 객체의 프로토타입에 부모객체를 연결해주는 코드
if ( typeof Object.create !== 'function' ) {
Object.create = function (o) {
var F = function () {};
F.prototype = o ;
return new F();
};
}var parents = {"first_name":"Smith"}
var child = Object.create(parents);child.first_name; // "Smith"
child.first_name = "Joe";
parents.first_name // "Smith" // 부모의 값은 변하지 않음
6. 프로토타입 속성 삭제
객체의 속성을 삭제하며, 연결되어있는 프로토타입의 속성엔 접근하지 않습니다. override한 속성을 삭제하면, 프로토타입의 속성을 바라보게 됩니다
child.first_name; // "Joe"
delete child.first_name;
child.first_name; // "Smith"7. 리플렉션
리플렉션은 반영 또는 나타냄이라는 의미로서 객체의 타입을 알려주거나 특정 속성을 가지고 있는지 알려주는 것을 지칭합니다.
typeof
- 속성타입을 반환합니다
var str = 'bla bla';
typeof str; // 'string'var num = 123
typeof num; // 'number'
hasOwnProperty
- 해당 객체가 속성을 지니고 있는지 확인합니다.
프로토타입 체인에서는 체크하지 않습니다. 즉, 부모의 프로토타입 속성을 바라보지 않습니다.
parents.hasOwnProperty('first_name'); // true
child.hasOwnProperty('first_name'); // false
child.first_name; // 'Smith'참고
