자바스크립트 다양한 반복문 for, for in, for of

자바스크립트 다양한 반복문 for, for in, for of

 

글. 수알치 오상문

 

자바스크립트는 C 언어 for, while, do while 반복문을 제공하며 확장된 반복 처리 구조도 제공한다.

 

1) 기본 for 반복문

 

for (let i=0; i <= 3; i++) {

    console.log("i = " + i);

}

 

[실행 결과]

"i = 0"

"i = 1"

"i = 2"

"i = 3"

 

 

다음은 HTML에서 사용된 자바스크립트 for문 예제이다.

웹에서 선택된 항목 개수를 자바스크립트 함수로 계산하여 전달받고 그 값을 출력하는 예제이다.

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>
<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
</script>

 

2) for in 반복문 

  data = [100, 200, 300];

  for(index in data) {  // 인덱스를 하나씩 전달
    console.log(data[index]);
  }

 

[실행 결과]

100

200

300

 

3) for of 반복문 

배열에서 아이템 값을 하나씩 가져오고 싶을 때 for of 반복문이 편하다.

for in 예제와 비교해보기 바란다.

 

  data = [100, 200, 300];

  for(item of data) {  // 아이템을 하나씩 전달
    console.log(item);
  }

 

[실행 결과]

100

200

300