Javascript 반복문 사용법

반복문(iteration statements)

• 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문
• 프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문

while 문

특정 조건을 충족할 때까지 계속해서 주어진 실행문을 반복 실행

while (표현식) {
     표현식의 결과가 참인 동안 반복적으로 실행하려는 실행문;
 }

• while 문은 우선 표현식이 참(true)인지를 판단하여 참이면 내부의 실행문을 실행
• 내부의 실행문을 전부 실행하고 나면, 다시 표현식으로 돌아와 또 한 번 표현식이 참인지를 판단
• 루프(loop) : 표현식의 검사를 통해 반복해서 실행되는 반복문
• while 문 내부에 표현식의 결과를 변경하는 실행문이 존재하지 않을 경우 프로그램은 루프를 영원히 반복
• 따라서 while 문을 작성할 때는 표현식의 결과가 어느 순간에는 거짓(false)을 갖도록 표현식를 변경하는 실행문을 반드시 포함
• while 문에서 실행될 실행문이 한 줄 뿐이라면 중괄호({})를 생략 가능

var i = 1;

// 변수 i가 10보다 작을 때만 while 문을 반복함.
while (i < 10) {

    document.write(i + "<br>");
    
    // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
    i++; 
}

do / while

• do / while 문은 먼저 루프를 한 번 실행한 후에 표현식을 검사
• 표현식의 결과와 상관없이 무조건 한 번은 루프를 실행

do {
   표현식의 결과가 참인 동안 반복적으로 실행하려는 실행문;
 } while (표현식);

var i = 1, j = 1;
while (i > 3) { // 변수 i의 초깃값은 1이기 때문에 이 while 문은 한 번도 실행되지 않음.
    document.write("i : " + (i++) + "<br>");
}

do { // 변수 j의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
    document.write("j : " + (j++) + "<br>");
} while (j > 3);

for 문

for (초기식; 표현식; 증감식) {
    표현식의 결과가 참인 동안 반복적으로 실행하려는 실행문;
}

• 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문
• for 문을 구성하는 초기식, 표현식, 증감식은 각각 생략 가능
• 또한, 쉼표 연산자(,)를 사용하면 여러 개의 초기식이나 증감식을 동시에 사용 가능
• for 문에서 실행될 실행문이 한 줄 뿐이라면 중괄호({})를 생략 가능

for (var i = 1; i < 10; i++) {
    document.write(i + "<br>");
}

 for / in 문

• 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해줌
• 열거할 수 있는 프로퍼티 : 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미
• 이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입
• 이렇게 대입받은 변수를 이용하면 루프 안에서 객체의 열거할 수 있는 프로퍼티에 순차적으로 접근 가능
• 해당 객체가 가진 모든 프로퍼티를 반환하는 것이 아닌, 오직 열거할 수 있는 프로퍼티만(배열, 리스트, 맵, 오브젝트 등)을 반환

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

var arr = [3, 4, 5];

for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
    document.write(i + " ");
}

for (var i in arr) { // 위와 같은 동작을 하는 for / in 문
    document.write(i + " ");
}

var obj = { name : "이순신", age : 20 };
for (var i in obj) {
    document.write(i + "<br>");
}

for / of 문

• 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문
• 자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments
• for / of 문은 익스플로러에서 지원 X

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

var arr = [3, 4, 5];

for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
    document.write(arr[i] + " ");
}

for (var value of arr) { // 위와 같은 동작을 하는 for / of 문
    document.write(value + " ");
}

var arr = new Set([1, 1, 2, 2, 3, 3]);

for (var value of arr) {
    document.write(value + " ");
}

루프의 제어

일반적으로 표현식의 검사를 통해 루프로 진입하면, 다음 표현식을 검사하기 전까지 루프 안에 있는 모든 실행문을 실행

label 문

• label 문은 프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자
• label 문을 사용하면 continue 문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동 가능

label:
식별하려는 특정 영역

//arrIndex는 그 이후에 나오는 for 문 전체를 가리키는 식별자로 사용
arrIndex :
for (var i in arr) {
    document.write(i);
}

continue 문

• 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 표현식의 판단으로 넘어가게 함
• 보통 반복문 내에서 특정 조건에 대한 처리를 제외 할 때 자주 사용

continue;
또는
continue 라벨이름;

var exceptNum = 3;

for (var i = 0; i <= 100; i++) {
    if (i % exceptNum == 0) // exceptNum의 배수는 출력하지 않음.
        continue;

    document.write(i + " ");
}

gugudan:
    for (var i = 2; i <= 9; i++) {
        dan:
            for (var j = 1; j <= 9; j++) {
                if ((ij) % 2 == 0)
                    continue dan;

                document.write(i + " " + j + " = " + (ij) + "<br>");
            }
    }

break 문

• 루프 내에서 사용하여 해당 반복문을 완전히 종료시키고, 반복문 바로 다음에 위치한 실행문으로 프로그램의 흐름을 이동
• 즉, 루프 내에서 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용

break;
또는
break 라벨이름;

var lectures = ["html", "css", "자바스크립트", "php"];
var topic = "자바스크립트";

for (var i = 0; i < lectures.length; i++) {
    if (lectures[i] == topic) {
        document.write(topic + " 과목은 " + (i + 1) + "번째 과목");
        break; // 원하는 값을 찾은 후에는 더 이상 for 문을 반복하지 않고 빠져나감.
    }
}

Reference

https://www.tcpschool.com/javascript/js_control_loop

코딩교육 티씨피스쿨