Open-Closed Principle

[javascript] 객체 리터럴 본문

Programming/JavaScript&Jquery

[javascript] 객체 리터럴

대박플머 2016. 1. 21. 22:32

자바스크립트의 리터럴 표기법 패턴을 사용하면 좀더 정화하고 표현력이 풍부하면서도 에러율은 낮은 방식으로 객체를 정의할 수 있다. 

자바스크립트에서 '객체'라고 하면 단순히 이름-값 싸의 해시 테이블을 생각하면 된다. 

다른 언어에서 '연관 배열'이라 불리는 것과 유사하다. 

자바스크립트에서 생성한 객체(다시 말해 사용자가 정의한 네이티브 객체)는 언제라도 변경할 수 있으며, 내장 네이티브 객체의 프로퍼티들도 대부분 변경이 가능하다. 빈 객체를 정의해놓고 기능을 추가해나갈 수도 있다. 객체 리터럴 표기법은 이처럼 필요에 따라 객체를 생성할 때 이상적이다. 

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. 객체를 변수에 할당할 때는 닫는 중괄호 뒤에 세미콜론을 빼먹지 않도록 한다.