객체(Object) 그리고 for in문

들블리셔·2021년 1월 11일

JavaScript

객체(Object)란

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

객체 생성방법에는 크게

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

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

객체와 배열의 차이점

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

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>