JS - for ... in 반복문

for ... in 반복문은 다른 제어문과 달리 객체나 배열에만 동작합니다. 객체에 속한 모든 속성의 이름과 값으로 쉽게 분리할 수 있으며 객체에 원하는 원소를 변수로 가져올 수 있습니다.

 // 괄호 문법
 for (array_expr in obj) {
    obj[array_expr];
 }

 // 짧은 문법
 for (array_expr in obj)
    obj[array_expr];

for 문을 이용해 객체의 키(key)와 원소(value) 를 가져 오려면 어떻게 해야 할까요?

Object.keys() 함수를 이용해서 객체의 속성 이름을 구하고, 그 이름을 이용해 객체의 속성 값에 접근할 수 있습니다.

<script>
 var arr = {name:1, age:2, school:3, last:4};
 var obj = Object.keys(arr);
 for (var i = 0; i < obj.length; i++) { 
    document.write(obj[i] + " => " + arr[obj[i]] + ",<br/>\n"); 
 } 
 /* 
  결과: 
  name => 1,
  age => 2,
  school => 3,
  last => 4,
 */ 
</script>

예시처럼 키(key)와 원소(value)를 얻어내는 과정이 복잡합니다. 하지만 for ... in 문을 이용하면 이런 복잡한 과정이 매우 간결해질 수 있습니다.

<script>
 var arr = {name:1, age:2, school:3, last:4}; 
 for (var prob in arr) { 
    document.write(prob + " => " + arr[prob] + ",<br/>\n"); 
 } 
 /* 
  결과: 
  name => 1,
  age => 2,
  school => 3,
  last => 4,
 */ 
</script>

이제 배열에 접근하여 값을 가져 오도록 하겠습니다.

<script>
 var arr = [1, 2, 3, 4]; 
 for (var prob in arr) { 
    document.write(prob + " => " + arr[prob] + ",<br/>\n"); 
 } 
 /* 
  결과: 
  0 => 1,
  1 => 2,
  2 => 3,
  3 => 4,
 */ 
</script>

이제 while 문을 이용해 키와 값을 가져 오겠습니다.

<script>
 var arr = {"one":"하나", "two":"둘", "three":"셋"};
 var obj = Object.keys(arr);
 var i = 0;

 while (i < obj.length) { 
   document.write(obj[i] + " => " + arr[obj[i]] + ",<br/>\n");
   i++;
 } 
 /* 
  결과: 
  one => 하나,
  two => 둘,
  three => 셋,
 */ 
</script>