9. 객체

객체는 영어로는 Object라고 한다.

Object라는 객체가 자바스크립트에서 하는 역할은 배열과 유사하다. 배열이 연관되어 있는 데이터들를 담아내기 위한 그릇이라 보면 되는데 객체 역시도 연관되어 있는 데이터들를 담아내기 위한 그릇이라는 점에서 유사하다.

하지만 객체는 인덱스 식별자를 숫자를 사용하는 배열과는 달리 문자도 사용이 가능하다. 다른 언에서 객체에 해당하는 데이타 타입은 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 것이 해당한다.

 

객체는 객체 지향이라는 프로그래밍 패러다임과 아주 중요하게 연결되는 개념이지만 지금 공부하는 객체는 데이터를 담아내는 그릇으로서 공부하는 것임~ ( 이 부분은 추후 공부!)

 

 

 

객체의 생성

 

배열을 만드는 방법과 유사하지만 자세히 보면 다르다. 배열은 대괄호를 이용하지만([]) 객체는 중괄호로 시작하여 중괄호로 끝난다({}). 하나의 객체 안에 세개의 인덱스를 넣어보자.

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

배열에서의 인덱스는 0, 1, 2 같은 숫자이지만 객체에서는 위에 쓴 것처럼 문자라는 차이점이 있다.

 

객체를 남을 변수를 만들면 언제든지 객체 안에 있는 데이터들을 제어할 수 있다.

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

 

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

// 1
var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

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

 

객체에서 필요한 값을 가져와보자.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades['sorialgi']); // 80

// 객체의 속성에 접근할 수 있는 또 다른 방법
alert(grades.sorialgi);

객체 안에서 색인이라는 말을 쓰기 것보다는 key와 value 라는 말을 더 많이 사용한다. sorialgi는 key이고 옆의 값(80)이 value가 되는 것이다. 또한 객체를 만드는 방법이 여러가지가 있듯 객체의 속성에 접근할 수 있는 다른 방법도 있다(위 코드 참고)

객체가 무엇인가를 한마디로 정의하는 것은 쉬운 일이 아니다. 하지만 객체라는 것을 너무 뜬금없고 추상적으로만 생각할 것이 아니다.  기본적으로 객체는 자바스크립트에서 특히나 값을 담는 그릇이라고 하는 관점으로 시작해서 프로그램이 구조적이고 부품으로서 사용할 수 있는 로직을 만들 수 있는 단위로 객체를 바로는 시각을 점점 더 확장해나갔으면...

 

 

 

객체와 반복문의 조우(객체를 다루는 법)

 

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

<ul>
  <script>
  var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; // 'key': value
  for(var name in grades) { // 객체의 키 in 객체
      document.write("<li>key : "+name+" value : "+grades[name]+"</li>");
  }
  </script>
</ul>



<!--  결과 -->
<ul>
  <li>key :   egoing value : 10</li>
  <li>key :   k8805 value : 6</li>
  <li>key :   sorialgi value : 80</li>
</ul>

배열은 저장된 데이터들이 순서를 가지고 있다. 그런데 객체 안에 저장된 값은 순서가 없고 key와 value가 있을 뿐이다.

배열의 값을 가져올 때는 for in 문을 이용하게 된다.

이때 for문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다. 반복문이 실행될 때 변수 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다. 또한 for in 문은 객체에서 뿐만 아니라 배열에서도 사용할 수 있다. 

 

 

 

객체지향 프로그래밍

 

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

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();

이렇게 하나의 객체가 있고, 그 객체 안에 어떠한 데이터가 있고 그 데이터를 사용하는 함수가 이렇게 들어있다. 그리고 그 함수를 호출할 때는 grades.show(); 를 하면 된다. grades라는 객체 안에 list라는 데이터와 show라는 함수를 하나로 그룹핑한 그릇이라 보면 된다. 이러한 것을 객체지향 프로그래밍이라 한다.

 

 

 

 

-출처: 생활코딩