[JavaScript] 객체

객체

1. 객체(Object)

객체는 배열이라는 것과 유사한 역할을 한다. 배열은 연관되어 있는 데이터를 담아내기 위한 일종의 그릇이다. 객체 역시도 마찬가지로 그릇이다.

하지만 객체와 배열의 차이는 배열은 index가 자동으로 0부터 할당하여 추가되지만 객체는 index가 문자일 수도 있고 숫자일 수도 있다. (우리가 직접 지정할 수 있다.) 

이 단원에서는 데이터를 담아내는 객체를 설명한다.

지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 

이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 

다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

2. 객체의 생성

다음은 객체를 만드는 법이다.

(1) 첫번째 방법

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

cf.) 배열은 '['에서 ']'로 끝난다.

위의 예제에서는 객체를 정의하는 문장이다. test1은 key(index)가 되고, 10은 value(index의 값)가 된다. 

변수 grades에 객체를 담아내면 그 변수를 통해 객체를 제어할 수 있다.

(2) 두번째 방법

var grades = {};// 비어있는 객체를 만든다.

grades['test1'] = 10; // 비어있는 객체에 접근하여 []에 index(key)를 부여한다. 그 index의 값(value)은 10이다.

grades['test2'] = 6;

grades['test3'] = 80;

(3) 세번째 방법

var grades = new Object();//'{ }'와 같은 의미

grades['test1'] = 10;

grades['test2'] = 6;

grades['test3'] = 80;

객체를 만들었으니 이제는 객체에서 필요한 값을 가져와보자. 다음은 test2라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

alert(grades['test3']);//alert(grades.test3);와 같다.

다음 방법으로도 객체의 속성에 접근 할 수 있다.

alert(grades.test3);

3. 객체를 다루는 법

다음은 객체에 저장된 데이터를 기준으로 반복작업을 하는 방법이다.

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

for(key in grades) {// grades는 객체이고 key는 객체의 키를 말함, grades라는 변수가 가리키는 그릇에 담겨있는 값들을 반복문이 실행될 때마다 하나씩 하나씩 가져와서 'key'(key값만)에 담는다.

    document.write("key : "+key+" value : "+grades[key]+"<br />");

}

결과는 아래와 같다.

key :   test1 value : 10

key :   test2 value : 6

key :   test3 value : 80

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

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

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

var grades = {

    'list': {'test1': 10, 'test2': 6, 'test3': 80},// list의 key에 객체를 담는다.

    'show' : function(){// show라는 key에 함수를 담는다.

        for(var name in this.list){

            document.write(name+':'+this.list[name]+"<br />");

        }

    }

};

grades.show();

list라는 key가 있고 그 key안에 담겨있는 값은 또다른 객체이다. alert(grades['list']);로 접근하면 된다.

alert(grades); ==alert(this); ---> alert(this.list);

--> grade라는 객체는 list라는 데이터와 show라는 함수를 하나로 그룹핑한 그릇이다. --> 객체지향 프로그래밍이라 한다.(서로  연관되어 있는 데이터와 연관되어 있는 처리를 하나의 그릇안에 모아서 그룹핑하는 프로그래밍 스타일)

이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.