객체(Object)

객체

배열과 객체는 연관된 데이터들을 담아내는 그릇이다. 둘의 차이점은 배열은 인덱스의 값이 자동으로 0부터 숫자로 지정이 되지만 객체는 인덱스로 우리가 원하는 값을 지정할 수 있다. 이 인덱스를 이용하여 데이터를 가져올 수 있다. 또한 배열은 대괄호([])로 작성하지만 객체는 중괄호({})로 작성한다.

다른 언어에서는 객체를 연관배열, 맵, 혹은 딕셔너리라는 데이터 타입이라고 말하기도 한다.

 

 

1. 객체의 생성

객체 생성하기

객체를 생성해보자. 객체는 인덱스를 문자로 작성한다. 이 인덱스를 key라고 말한다.

{'egoing': 10, 'k8805': 6, 'sorialgi': 80}

객체를 생성하면 객체를 대표하는 변수를 만들고, 그 변수에 객체를 담아낸다. 그럼 이제 변수를 통해 객체를 언제든지 관리할 수 있다.

let grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

객체는 다음과 같이 비어 있는 객체를 생성하여 만들 수도 있다.

let grades = {}; // 비어 있는 객체 생성
grades['egoing'] = 10; // 대괄호 내에 인덱스를 작성하고 오른쪽에 인덱스의 값을 작성
grades['k8805'] = 6;
grades['sorialgi'] = 80;

혹은 다음과 같이 만들 수도 있다. new Object와 {}는 같은 의미이다.

let grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

 

객체 속성에 접근하기

이제 생성된 객체에서 필요한 값을 가져오자. 다음과 같이 객체의 속성에 접근하여 값을 가져올 수 있다.

grades['sorialgi'];
grades['sori' + 'algi']; // 대괄호로 가져올 때에는 문자열을 합쳐서 가져올 수 있음

grades.sorialgi;

두 가지 방법 중 필요에 따라 선택하여 가져오면 된다. 단, 하단의 방법은 문자열을 합칠 수 없고 한 번에 문자열을 작성해야 한다는 것만 알고 있으면 된다.

 

 

2. 객체 다루기

for 문을 사용하여 모든 객체를 가져오자.

배열에는 순서가 있으므로 집어 넣은 순서대로 꺼내올 수 있다. 하지만 객체에는 순서가 없다. 다만 key와 value가 있다. 

객체를 다룰 때에는 for ~ in으로 작성하자.

let grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}

➡ grades 변수가 가리키는 그릇에 담겨 있는 인덱스를 하나씩 가져와서 key 변수에 담는다. 따라서 위의 반복문을 수행하게 되면 egoing, k8805, sorialgi 를 순서대로 key 값으로 가져오게 된다.

// 콘솔
key :   egoing value : 10
key :   k8805 value : 6
key :   sorialgi value : 80

이는 배열에도 적용할 수 있다. 물론 배열의 인덱스 값은 숫자이므로 0, 1, 2, ... 을 순서대로 가져온다.

for, in 문은 배열에서든지 객체에서든지 열거할 수 있는 강력한 수단이다.

 

이를 이용하여 HTML에 객체의 값을 리스트로 나타내보자.

 

3. 객체 지향 프로그래밍

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

객체 담기

let grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}
};
grades['list']; // 객체 전체를 가리킴
grades['list']['egoing']; // 10

 

함수 담기

let grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        alert('hello world');
    }
};
grades['show'];
grades.show();

 

this 키워드

this는 자바스크립트에 약속되어 있는 것으로, 이 함수가 속해 있는 객체를 가리키는 변수이다. 

let grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        alert(this); // grades 객체
        alert(this.list); // {'egoing': 10, 'k8805': 6, 'sorialgi': 80}
    }
};
grades['show'];
grades.show();

이를 이용하여 리스트를 가져와보자.

let grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(let name in this.list){
            console.log(name, this.list[name]);
        }
    }
};
grades.show(); // 객체에 소속된 'show'함수를 실행한다.
// egoing 10
// k8805 6
// sorialgi 80

 

객체 지향 프로그래밍이란?

grades
list	show

여기서 list와 show는 서로 관련성이 있다. 이처럼 관련성을 가진 것들을 그룹핑한 것을 객체 지향 프로그래밍이라고 한다. 서로 연관된 값을 하나의 그릇 안에 모아서 그룹핑해둔 프로그래밍 스타일 기법을 말한다.