[JS] 22-05-31 자바스크립트 반복문/보조제어문 ☑

반복문

while문

while문은 반복문 입니다.

반복문은 어떠한 값이 조건에 의해 그 조건에 만족하는 동안 계속 실행할 수 있습니다.

예를 들어 1을 200회 화면에 출력을 해야 한다면 1을 직접 200번 타이핑 하지 않고 반복문을 사용해 200회 출력할 수 있게 할 때 사용합니다.

while(조건){조건에만족할동안실행할명령문}

   <script>
      a = 1;
      while (a <= 10) {
        document.write(a);
        a++;
      }
    </script>

위의 소스를 보면 a의 값을 1로 선언 후 조건에는 a가 10보다 작거나 같다는 조건이 있습니다.

그리고 그동안에 a의 값을 출력하는 명령문 그리고 a의 값을 1씩 올리는 a++가 있습니다.

위의 소스에 a++가 없다면 a가 값을 증가하면서 10에 도달하는 기능이 없으므로 무한루프에 걸리게 됩니다.

다음은 1부터 10까지의 누적합을 구하는 소스입니다.

    <script>
    a = 1;
    sum = 0;
    while(a<=10) {
        sum += a;
        // += 은 기존값에 어떤값을+한다
        document.write('누적합'+sum+"<br/>");
        a++;
    }
</script>

다른예제

    <script>
        var x = 1;
        var sum = 0;
        while(x<=100) {
            sum+=x;
            x++;
        }
        document.write("1~100까지 합: <b>" + sum + "</b>");
    </script>

sum+=x;   =    sum=sum+x  : sum이라는변수에 x의값을 더한다.

    <script>
      var x = 1;
      var sum = 0;
      while (1) { //무한반복 1은 true
        sum += x;
        x++;
        if (x == 10001) {
        break;
         }
      }
      document.write("1~10000까지의 합 : <b>" + sum + "</b>");
    </script>

do~while문

do~while문은 조건문을 판단하기 전에 do 블록의 코드를 먼저 실행합니다.

그리고, 조건문을 판단하여, 조건문의 결과가 true이면 do 블록의 코드를 다시 실행합니다.

*사용하는 경우 극히 드뭄

​

for문

for문도 while문처럼 반복문입니다.

for문은 조건식 안에서 (변수 선언 및 초기값 설정; 조건식; 증감식)으로 이루어져 있으며

초기값이 조건식에 참인 동안 명령문을 실행 합니다.

for (초기식; 조건식; 증감식) { 조건식의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문; }

for 반복문은 어떤 특정 조건을 불충족할때까지 반복한다.

아래는 변칙적사용이나 아래처럼 하는 것을 추천하지 않는다.

생략은 추천하지않는다. 생략하지않는게 좋음

생략은 추천하지않는다. 생략하지않는게 좋음

  <script>
      for (a = 1; a <= 10; a++) {
        document.write(a);
      }
    </script>

for문의 실행 순서★

1. (a = 1) 변수 선언 및 초기값 설정, 변수 a 선언 및 값을 1로 선언.

2. (a <= 10) 조건 실행, a가 10과 같거나 작을 동안에 명령문을 실행

3. (document.write(a)) 2번에서 명령문을 실행 하므로 document.write(a)에 의해 화면에 1출력

4. (a++) 증감식 실행 하므로 a값은 1에서 2로 변경

5. (a <= 10) 조건 실행, a가 10과 같거나 작을 동안에 명령문을 실행

6. (document.write(a)) 2번에서 명령문을 실행 하므로 document.write(a)에 의해 화면에 2출력

7. (a++) 증감식 실행 하므로 a값은 2에서 3로 변경

8. (a <= 10) 조건 실행, a가 10과 같거나 작을 동안에 명령문을 실행

6. (document.write(a)) 2번에서 명령문을 실행 하므로 document.write(a)에 의해 화면에 3출력

7. (a++) 증감식 실행 하므로 a값은 3에서 4로 변경

​

.

.

.

(a++) 증감식 실행 하므로 a값은 9에서 10로 변경

10 이므로 이제 for문에서 빠져 나옴

   <script>
      var x, y; //후위연산자
      for (x = 2; x <= 5; x++) {
        document.write("<b> ---[" + x + "단]--- </b>" + "<br>");
        for (y = 1; y <= 9; y++) {
          document.write(x + "*" + y + "=" + (x * y) + "<br>");
        }
      }
    </script>

for in 문

반복문 루프마다 객체에 열거할수있는 프로퍼티(enumerable properties)의 이름을 지정한 변수에 대입

for (변수 in 객체) {객체에 모든 열거 할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;)

var arr = [1, 2, 3];
for(var i in arr) {
document.write(i+ " ");
}
//출력값 0 1 2

for of 문

반복 할 수 있는 객체 (iterable objects - Array, Map, Set, arguments)를 순회

for (변수 of 객체) {객체에 모든 열거 할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;)

반복된 것은 한번씩만 나오게함

var arr = new Set([1, 1, 2, 2, 3, 3]);
for (var value of arr) {
document.write(value + " ");
}
//출력값 1 2 3

 

break문

break문은 if, switch, for,while문등에서 break문을 만나면 바로 빠져나가는 명령문 입니다

1에서 7부터 출력하게 프로그래밍 했는데 7일때 break문을 실행되도록 했다면 7부터는 출력이 되지 않습니다.

이유는 break문은 수행중이던 조건문이나 반복문을 빠져나가버리기 때문이죠.

    <script>
      for (a = 1; a <= 10; a++) {
        if (a == 7) {
          break;
        }
        document.write(a + "<br/>");
      }
    </script>

continue문

break문과는 조금 다르다 continue문은 반복을 끝내지 않는다.

for문이나 while문의 {}안에서 continue 문장을 만난 순간

continue문 아래에 있는 실행해야 하는 문장들을 건너 뛰고, 다음반복을 시작한다.

sum+=x ;&nbsp; =&nbsp; &nbsp; sum+x=sum

 <script>
      for (a = 1; a <= 10; a++) {
        if (a == 7) {
          continue;
        }
        document.write(a + "<br/>");
      }
    </script>

상황은 for문에서 1부터 10까지 출력을 하고 있는데 7일 출력될 순서에 continue문을 만나서 7이 출력이 되지 않고 8가 출력이 되는 상황입니다. if문을 사용

 <script>
      var x = 0;
      var sum = 0;
      for(x=1; x<=100; x++) {
          if(x%3 != 0)
          continue;
              sum+=x;
              document.write(x + " ");
      }
      document.write("<p/>")
      document.write("1~100까지 수 중 3의 배수 합 : <b>" + sum + "</b>")
    </script>
​

 

첨부 이미지출처 : 한빛