자바스크립트 - 객체

 

 

오늘은 객체에 대해서 알아보자!

 

일단 배열과 객체는 비슷하면서도 다른 것을 알 수 있다.

 

지금까지 살펴본 배열은 값에 대한 식별자로 숫자를 사용했다.

데이터를 추가하면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 

우리는 이 인텍스를 이용해서 값을 가져오게 되는 것이다.

 

만약, 인덱스로 숫자가 아닌 문자를 사용하고 싶다면?

→ 객체(dictionary)를 사용해야 한다.

 

그렇다면 객체는 어떻게 생성할까?

var word = {'a': 10, 'b': 20, 'c': 30}; // 객체 생성

여기서 'a'는 key를 뜻하고, 10은 value를 뜻한다.

 

 

또 객체를 만드는 다른 방법이 있다.

var word = {};
word['a'] = 10;
word['b'] = 20;
word['c'] = 30; // 객체를 생성하는 다른 방법1

var word = new Object(); // new Object()는 { }와 같다.
word['a'] = 10;
word['b'] = 20;
word['c'] = 30; // 객체를 생성하는 다른 방법2

 

자 객체를 만들었으니 이제는 객체에서 필요한 값을 꺼내보자.

객체의 속성 접근은 "객체 이름['key']"의 형식으로 접근한다.

var word = {'a': 10, 'b': 20, 'c': 30};
alert(word['a']); // 결과 : 10이 출력
alert(word['b']); // 결과 : 20이 출력
alert(word['c']); // 결과 : 30이 출력

또 "객체 이름. key"의 방식으로도 접근한다.

var word = {'a': 10, 'b': 20, 'c': 30};
alert(word.a); // 결과 : 10이 출력
alert(word.b); // 결과 : 20이 출력
alert(word.c); // 결과 : 30이 출력

또 객체를 이용해서 저장된 데이터를 기준으로 반복 작업을 하는 방법이 있다.

var word = {'a': 10, 'b': 20, 'c': 30};
for(key in word){
	document.write("key : "+key+" value : "+word[key]+"<br />");
}
// 결과
/*
key :   a value : 10
key :   b value : 20
key :   c value : 30
*/

for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 key에 담아서 반복문을 실행한다.

반복문이 실행될 때 변수 key의 값으로 a, b, c가 순차적으로 할당되기 때문에 word[key]를 통해서 객체의 값을 알아낼 수 있다.

 

또, 객체에는 객체를 담을수도 있고, 함수도 담을 수 있다. 

var word = {
    'list': {'a': 10, 'b': 20, 'c': 30},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
word.show();

객체 word의 key값 'list'의 value값으로 객체 {'a': 10, 'b': 20, 'c': 30}를 담을 수 있고,

객체 word의 key값 'show'의 value값으로 함수도 담울 수 있는 것을 확인할 수 있다.

 

여기서 this는 객체를 담고 있는 객체 이름을 뜻한다.

this는 나중에 깊게 다뤄보자..