<자바스크립트 기초> 08. 객체

 * 객체란

 - 객체는 배열과 비슷하게 여러가지 데이터를 저장할 수 있는 기능을 갖고 있다. 그러나 배열과 달리 인덱스를 직접 원하는 형태로 지정이 가능하다.

 

  - 위와 같이 객체는 인덱스가 아닌 키를 지정하여 각 값과 대응시킨다.

  - 참고로 위의 사진과는 달리 객체에는 순서가 없다. 우리는 순서와는 별개로 키를 이용하여 값을 대응시킨다.

 

* 객체 만들기

 - 객체는 배열과 달리 {} 중괄호를 이용하여 만들 수 있다.

var grades = {'harry': 80, 'iu': 98, 'suzy': 95};

  : 위와 같이 중괄호 안에 키와 값을 각각 대응시켜 만든다.

 

 - 또다른 방법으로 빈 객체를 만들고 키와 값을 추가시켜갈 수 있다.

 

var grades = {};
grades['harry'] = 80;
grades['iu'] = 98;
grades['suzy'] = 95;

 : 이 코드 또한 위와 동일한 객체를 생성한다.

 

* 객체 사용하기

- 객체에서 원하는 값을 불러오기 위해서는 마치 배열에서 인덱스를 이용하여 불러오듯이 사용하면 된다.

var grades = {'harry': 80, 'iu': 98, 'suzy': 95};
alert(grades['harry']);
// 80

 : harry라는 키를 이용하여 80이라는 값을 불러왔다.

 

 - 참고로 grades.harry 를 이용하여도 된다. (배열.키)

 

 - 이번에는 for 반복문을 사용하여 키와 값을 모두 각각 한줄에 불러와보자.

var grades = {'harry': 80, 'iu': 98, 'suzy': 95};
for (k in grades) {
	alert('Key : ' + k + ' Value : ' + grades[k]) ;
}

// Key : harry Value : 80
// Key : iu Value : 98
// Key : suzy Value : 95

 : for ~ in 구문을 이용하여 키와 값을 각각 출력시켰다. for in 구문은 변수가 in 뒤의 배열이나 객체를 순환하게 하는 것이다.

 

* 객체 지향 프로그래밍 소개

var grades = {
	'list': {'harry': 80, 'iu': 98, 'suzy': 95},
    'show': function(){
        for(var name in this.list){
            alert('Key : ' + name + ' Value : ' + this.list[name]);
        }
    }
};

grades.show();
    	

// Key : harry Value : 80
// Key : iu Value : 98
// Key : suzy Value : 95

 - 객체는 그 안에 값으로 또 다른 객체를 담을 수도 있고, 함수를 담을 수도있다.

 

  ⓐ 위의 코드에서 list라는 키에는 앞서 했던 것과 같은 객체를 담았다.

  ⓑ 위의 코드에서 show라는 키에는 앞서 봣던 for in 구문과 유사한 함수를 담았다.

  ⓒ 위에서 this가 처음으로 등장한다. this는 자바스크립트에서 약속되어있는 변수인데, 이것은 함수가 속해있는 객체 자체를 의미한다. 즉 위의 this.list 는 이 객체의 리스트 값을 달라는 의미이다.

  ⓓ 마지막으로 grades.show는 show의 값을 달라는 의미이고 뒤에 ()를 붙임으로써 이 함수를 실행하게된다.

 

 - 이 때 우리는 서로 관련된 데이터들과 처리를 한 군데에 모아 놓고 불러왔다. 이러한 것을 객체 지향 프로그래밍이라 한다.

 

 

---

 

 

 

 

 

참고

 

 

이 글은 생활코딩의 자바스크립트 기본 강의를 인프런에서 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

생활코딩

JavaScript - 생활코딩

인프런

자바스크립트 언어 기본 - javascript - 인프런