3. JavaScript 기초 3 <객체>

객체 (Object)

- 자바스크립트에서 객체는 다른 프로그래밍 언어들의 Map, Dictionary(python), Associated Array 등과 같다.

- Key 와 Value 쌍으로 이루어져 있다.

- 저장된 데이터에 대한 순서가 없다. (배열과 객체가 다른점 )

1. 객체 생성의 기본 형태

    <script type='text/javascript'>
      var gender = {};
    </script>

1-1. 객체 데이터 접근하기

    <script type='text/javascript'>
      var gender = {'John': 'Male', 'Kate': "Female"}
      document.write(gender['John'] + "<br />");
      document.write(gender.John + "<br />");
      document.write(gender['Kate'] + "<br />");
      document.write(gender.Kate + "<br />");
    </script>

[Line 3-6] 데이터에 접근하기 위해서는 객체의 '키 값'을 이용하면 된다.

2. 객체와 반복문

for - in 문을 이용하면 객체의 값을 반복해서 가져오는 것이 가능하다.

for -in 문은 Python에서 사용했던 것과 같은 방식으로 작동하며, 객체(Object) 뿐만 아니라 배열(Array)에서도 사용 가능하다.

    <script type='text/javascript'>
      var num = {'one':1, 'two':2, 'three':3, 'four':4, 'five':5, 'six':6}
      document.write("<ul>");
      for(var alphabet in num){
        document.write("<li>" + alphabet + " is " + num[alphabet] + "</li>");
      }
      document.write("</ul>")
    </script>

3. 객체 지향 프로그래밍 맛보기

    <script type='text/javascript'>
      var grades = {
        'list' : {'egoing': 10, 'flinux': 10, 'TEST': 6},
        'show' : function(){
          alert("Hello, World!");
        }
      }
      alert(grades['list']['flinux']);
      grades['show']();
    </script>

list 와 show 라는 객체를 grades라는 또 다른 객체안에 넣어 줌으로써 그룹화 할 수 있다.

[Line 8] grades 객체 안에 있는 list 객체의 'flinux'라는 키값을 이용해 10 이라는 값을 출력한다.

[Line 9] grades 객체 안에 있는 show 객체를 통해 함수를 호출하고 있다.

this 

호출된 함수가 포함되어 있는 객체를 가리키는 약속된 변수(키워드)