JavaScript 객체와 프로퍼티 정리

본 포스팅은 http://bonsaiden.github.io/JavaScript-Garden/ko/#object 를 나름대로 정리한 글입니다.

객체와 프로퍼티

JavaScript에서 null 과 undefined 를 제외한 모든 것들은 객체 처럼 동작한다.

false.toString(); // 'false'
[1, 2, 3].toString(); // '1,2,3'

function Foo() {}
Foo.bar = 1;
Foo.bar; // 1

또한 숫자에 . 이 붙게 되면 JavaScript 파서 는 이를 오류로 감지한다.

2.toString(); // SyntaxError

이에 관해선 몇 가지 꼼수가 있다.

• .을 두 개 찍기
• 숫자와 . 사이에 공백
• 숫자를 먼저 해석

.을 두 개 찍기

2..toString();

숫자와 . 사이에 공백

2. toString();

숫자를 먼저 해석

(2).toString();

이 세 가지는 모두 정상 동작한다.

---

Object Type

JavaScript 객체는 key / value 쌍으로 이루어진 프로퍼티로 구성 된다.
그렇기 때문에 Hashmap (hash table) 처럼 사용될 수도 있다.

객체 리터럴인 Object Notation 으로 객체를 만들면 Object.prototype 을 상속 받고, 프로퍼티를 하나도 가지지 않은 객체가 만들어진다.

---

프로퍼티 접근

객체의 프로퍼티는 개체 이름 다음에 . 을 찍어 접근하거나, [ ] 를 이용해 접근할 수 있다.

var foo = { name: 'foo' }
foo.name; // foo
foo['name']; // foo

var bar = 'name'
foo[bar]; // foo

foo.1234; // SyntaxError
foo['1234']; // works

두 방식 모두 동일하게 동작하지만 차이점이 있다.
우선 [ ] 방식은 프로퍼티 이름을 동적으로 할당 하여 값에 접근할 수 있다.
반면 . 을 이용한 방식은 구문 오류 를 발생시킨다.

---

프로퍼티 삭제

객체의 프로퍼티를 삭제하려면 delete 키워드를 사용한다.

프로퍼티에 undefinde 나 null 을 할당하는 것은 프로퍼티를 삭제하는 것이 아니라 할당된 value 만 지우고 key 는 그대로 유지된다.

var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;

for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}

위 코드의 출력은 baz 만 제거했기 때문에 bar undefined 와 foo null 이 출력되고, baz 는 출력되지 않는다.

---

Notation of Keys

var test = {
   'case': 'foo',
   delete: 'bar' // SyntaxError
};

프로퍼티는 따옴표 없는 문자열 과 따옴표로 감싼 문자열 을 모두 key 로 사용할 수 있다.

하지만 위와 같은 코드를 ECMAScript 5 이전 버전 에서 입력하면 SyntaxError 가 발생한다.

ECMAScript 5 이후 버전에서는 정상적으로 동작한다.
구글 크롬 개발자 도구에서도 쉽게 확인할 수 있다.

이는 JavaScript 파서 의 잘못된 설계 때문이라고 한다.

에러가 나는 delete 를 따옴표로 감싸주면 구버전의 엔진에서도 에러 없이 동작한다.