JavaScript - 반복문 for()

지현우·2024년 1월 24일

반복문 for문에 대한 개념을 예제 코드를 통해 알아보기로 했다.

JavaScript 코드

<script>
	let step;
	for (step = 0; step < 5; step++) {
	  // Runs 5 times, with values of step 0 through 4.
 	 console.log("Walking east one step");
	};
</script>

MDN 자바스크립트 사이트에서 예제를 가져왔다. 가장 기본적인 for문 형태이다.

for문

for ([초기문]; [조건문]; [증감문])
  문장

for문이 실행될 때, 다음과 같이 실행됩니다.

초기화 구문인 초기문이 존재한다면 초기문이 실행됩니다. 이 표현은 보통 1이나 반복문 카운터로 초기 설정이 됩니다. 그러나 복잡한 구문으로 표현 될 때도 있습니다. 또한 변수로 선언 되기도 합니다.
조건문은 조건을 검사합니다. 만약 조건문이 참이라면, 그 반복문은 실행됩니다. 만약 조건문이 거짓이라면, 그 for문은 종결됩니다. 만약 그 조건문이 생략된다면, 그 조건문은 참으로 추정됩니다.
문장이 실행됩니다. 많은 문장을 실행할 경우엔, { } 를 써서 문장들을 묶어 줍니다.
갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아갑니다.

예제 01

<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) {
    let numberSelected = 0;
    
    // 모든 옵션을 반복하면서 선택된 옵션을 찾는다.
    for (var i = 0; i < selectObject.options.length; i++) {
      if (selectObject.options[i].selected) {
        numberSelected++;
      }
    }
    return numberSelected;
  }

  // 버튼 요소를 가져와서 클릭 이벤트에 대한 리스너를 추가한다.
  let btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    // 알림 창에 선택된 옵션의 수를 표시한다.
    alert("Number of options selected: " + howMany(document.selectForm.musicTypes));
  });
</script>

예제 02

let numInput = Number(prompt('숫자를 입력해주세요'));

for(i = 1; i < numInput; i++) {
    if(i % 13 == 0 && i % 2 !== 0) {
        console.log(i);
    }
}

prompt()로 받아 오는 숫자 이하의 값을 가져오는 것인데
13의 배수이면서 홀수인 숫자를 조건으로 for문을 실행했다.

예제 03

for(dan = 2; dan < 10; dan++) {
    console.log(`---${dan}단---`);
    for(i = 1; i <= 9; i++) {
        console.log(`${dan} * ${i} = ${dan*i}`);
    }
}