객체(Object) 그리고 for in문

객체(Object)란

객체는 여러속성을 하나의 변수에 저장할 수 있도록 합니다.
변수를 선언하고 key와 value값으로 속성쌍을 묶어 사용합니다.
객체 역시 배열과 비슷하게 데이터를 담아내는 그릇 정도로 생각할 수 있습니다.

객체 생성방법에는 크게

1. 객체 리터럴 방식
2. 함수 방식
3. 프로토타입 방식이 있습니다.

오늘은 리터럴방식에 대해서 공부해보았습니다.

객체와 배열의 차이점

배열은 저장된 데이터들이 순서를 가지고 있고
데이터를 가져오게되면 추가된 순서로 꺼내옵니다.

ex) 0 1 2 ......

그에 반면 객체는 안에 저장된 값에 순서가 없습니다.

인덱스 자체가 문자열이기 때문이죠~!

<보기1>

<script>
      var point = {
         'Kim' : 10,
         'Lee' : 9,
         'Nam' : 8
      }; 
      alert(point ['Kim']);	//결과 10
      alert(point.Kim);		//결과 10
   </script>

배열은 'a', 'b', 'c'라는 값이 있다면 그 값에 해당되는 숫자인덱스에 따라 데이터를 지정하지만

ex) console.log(point[0]);

객체는 key라는 값의 문자인덱스에 따라 값을 지정할 수 있습니다.

ex) console.log(point[Kim]); or console.log(point.Kim);

point라는 객체를 만들고 데이터를 저장했습니다.

'kim'은 key값 10은 value값

'kim' : 10과 같은 것을 "프로퍼티"라고 하고 위에 세개의 프로퍼티가 있다~

위와 같이 객체를 생성하는 방법은 여러가지입니다.

객체접근(생성) 방법

<보기2>

<script>
      var point = {}     
      point.Kim = 10;
      point.Lee = 9;
      point.Nam = 8;
      alert(point.Kim);		//결과 10
      alert(point['Lee']);	//결과 9
</script>

<보기3>

<script>
      var point = {}     
      point['Kim'] = 10;
      point['Lee'] = 9;
      point['Nam'] = 8;
      alert(point.Lee);		//결과 9
      alert(point['Nam'])	//결과 8
</script>

<보기4>

<script>
      var point = new Object()     
      point['Kim'] = 10;
      point['Lee'] = 9;
      point['Nam'] = 8;
      alert(point.Kim);		//결과 10
      alert(point['Lee']);	//결과 9
</script>

<보기5>

<script>
      var point = new Object()     
      point.Kim = 10;
      point.Lee = 9;
      point.Nam = 8;
      alert(point.Kim);		//결과 10
      alert(point['Lee']);	//결과 9
</script>

for in문

반복문을 이용해서 객체를 다루는 법에 대해 알아보겠습니다.

객체와 배열에 있는 값을 가져올땐 for in문이라는 사용하게 되는데
객체 순환이란 뜻을 가지고 있습니다.
배열요소를 나타낼때는 사용하는 것을 권장하지 않는다고 합니다.
이 부분에서는 나중에 더 깊게 공부를 해봐야 할듯 싶습니다.

기본문법

<script>
      for(var i in 객체){
         
      }
</script>

<보기>

<script>
      var music = {'Hiphop' : 100, 'Pop' : 99, 'Dance' : 98};
      for(var name in music) {
         document.write("name : "+name+", value : "+music[name]+"<br/>");
      }
</script>

결과는

music에 담겨있는 key값을 var name에 담아서 반복문을 실행할때 name이라고하는 변수의 이름으로 돌려주는 것입니다

music이라는 객체안에 있는 key값들이 var name이라는 변수에 저장되었다 정도로 이해 하시면 될 것 같습니다.

그리고 key값은 문자형 인덱스이기 때문에 value값을 가져오기 위해서는
배열과 동일하게

music['key값']
또는
music[name]

배열처럼 key값 = 인덱스번호 라고 생각하시면 됩니다.

<script>
         var info = {   
            name : '들이',
            age : 10,
            address : '서울특별시'
         }
         for (var i in info){
            console.log(info[i]);
         }
</script>

콘솔창 출력 결과는

value값 둘다를 나타냅니다.
프로퍼티값을 열거한것이죠!
info라는객체의 value값을 for in문의 기능에 의해서 값을알아낸다 정도로 이해하고 있습니다.