자바스크립트의 리터럴 표기법 패턴을 사용하면 좀더 정화하고 표현력이 풍부하면서도 에러율은 낮은 방식으로 객체를 정의할 수 있다.
자바스크립트에서 '객체'라고 하면 단순히 이름-값 싸의 해시 테이블을 생각하면 된다.
다른 언어에서 '연관 배열'이라 불리는 것과 유사하다.
자바스크립트에서 생성한 객체(다시 말해 사용자가 정의한 네이티브 객체)는 언제라도 변경할 수 있으며, 내장 네이티브 객체의 프로퍼티들도 대부분 변경이 가능하다. 빈 객체를 정의해놓고 기능을 추가해나갈 수도 있다. 객체 리터럴 표기법은 이처럼 필요에 따라 객체를 생성할 때 이상적이다.
1 2 3 4 5 6 7 8 9 10 11 | // 빈 객체에서 시작한다. var dog = {}; // 프로퍼티 하나를 추가한다. dog.name = "Test"; // 이번에는 메서드를 추가한다. dog.getName = function(){ return dog.name; }; | cs |
이 예제는 빈 객체에서 시작해서 프로퍼티와 메서드를 추가한다. 프로그래 생명주기 중 어느 때라도 여러분은 다음과 같은 일을 할 일을 할 수 있다.
※ 프로퍼티와 메서드 값을 변경 할 수 있다.
1 2 3 4 5 | dog.getName = function(){ // 메서드가 하드코딩된 값을 반환하도록 재정의힌다. return "fix"; }; | cs |
※ 프로퍼티나 메서드를 완전히 삭제한다.
1 2 | delete dog.name; | cs |
※ 다른 프로퍼티나 메서드를 추가한다.
1 2 3 4 5 6 | dog.say = function(){ return "dog say!"; }; dog.firstName = "first"; | cs |
위와 같이 반드시 빈 객체에서 시작해야 하는 것은 아니다. 객체 리터럴 표기법을 쓰면 다음 예제처럼 생성 시점에 객체에 기능을 추가할 수 있다.
1 2 3 4 5 6 7 | var dog = { name : "test", getName : function(){ return this.name; } }; | cs |
참고 : '빈 객체'라는 표현을 간결성을 위한 것일 뿐 자바스크립트에 빈 객체란 없다. 사실을 알아두어야 한다. 가장 간단한 {} 객체조차도 이미 Object.prototype에서 상속받은 프로퍼티와 메서드를 가진다. '비어 있다'는 말은 어떤 객체가 상속받은 것 외에는 자기 자신의 프로퍼티를 갖고 있지 않다는 뜻으로 이해하면 된다. (책에서 봄)
객체 리터럴 문법
1. 객체를 중괄호({와})로 감싼다.
2. 객체 내의 프로퍼티와 메서드를 쉼표(,)로 분리한다. 마지막 이름-값 쌍 뒤에 쉼표가 들어가면 IE에서는 에러가 발생하므로, 마지막에는 사용하지 말아야한다.
3. 프로퍼티명과 프로퍼티 값은 콜론으로 분리한다.
4. 객체를 변수에 할당할 때는 닫는 중괄호 뒤에 세미콜론을 빼먹지 않도록 한다.
'JavaScript & TypeScript' 카테고리의 다른 글
[javascript] new 연산자 (0) | 2016.02.23 |
---|---|
[javascript] 사용자 정의 생성자 함수 (0) | 2016.02.18 |
[javascript] for문 사용법(최적화) (0) | 2016.01.13 |
[jQuery] Add함수를 이용한 확장집합 만들기 (0) | 2014.07.02 |
[jQuery]확장 집합(확장 엘리먼트)에서 엘리먼트 선택하기 (0) | 2014.07.02 |