배열의 반복

웹 프로그래밍 기초/반복문

배열의 반복

별초롱언니 2025. 4. 3. 17:18

for in 구문

object의 key를 순회하는 반복문이며 key를 출력해보면 문자열형이다.

반복하는 횟수는 배열이나 객체가 가지고 있는 값만큼만 반복한다.

** 규칙이 없는 값에 규칙을 주기 위해 배열에 넣을 수 있다.

사용법

for (var i in 배열명) {

// 반복할 표현식

}

for (var i in 객체명) {

// 반복한 표현식

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var first = ['010','011','016','017','018','019'];

    var output = '<select>';

      for (var i in first) {
        output += '<option>' + first[i] + '</option>';
      }

      output += '</select>';
      document.write(output);
  </script>
</head>
<body>
  
</body>
</html>

for of 구문

배열뿐만 아니라 iterable 객체(배열, 문자열, 맵, 셋 등)의 요소를 순화할 때 사용하는 반복문으로, 배열의 각 요소에 대해 직접적으로 접근 가능하다.

사용법

for (var i of 배열명) {

// 반복할 표현식

}

for (var i of 객체명) {

// 반복할 표현식

}

for in	for of
객체의 속성(property)을 순회	객체의 값(value)을 순회
배열도 가능하나 주로 객체 속성 반복할 때 사용	주로 배열이나 다른 객체 요소 반복할 때 사용
프로토타입 체인에 있는 모든 열거 가능한 속성까지 포함하여 순회하므로 속도가 느리다.	객체에 있는 값만 순회하므로 속도가 빠르다
var test = "안녕하세요" for (var i in test) { console.log(i); } i의 값 : 0, 1, 2, 3, 4 "문자열형"의 인덱스를 반환	var test = "안녕하세요" for (var i in test) { console.log(i); } i의 값 : 안, 녕, 하, 세, 요 값을 반환

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var fruits = ['apple','banana','orange','lemon','pear'];

    for (var i of fruits) {
      document.write(i);
    }
  </script>
</body>
</html>