[자바스크립트] 반복문 - for/while

반복문이란

반목문이란 이름 그대로 실행문을 반복하여 동작하게 하는 문법이다. 이 때, 특정 조건식을 통해 반복문을 계속 반복할 것인지 종료할 것인지를 판단하게 된다. 즉, 반복문도 조건문과 같이 조건식을 통해 코드를 반복할 것인지 아닌지를 제어하는 제어문이다.

 

자바스크립트에서 기본적인 반목문으로는 for, while, do while문이 있다.

 

 

for

프로그래밍을 하다보면 많이 사용하는 반복문의 하나이다. for문의 구문은 다음과 같다.

for(①초기식; ②조건식; ④증감식){  ③수행문; }

①초기식	최초에 단한번 수행, 조건식에 사용할 변수의 값을 초기화
②조건식	조건식의 결과가 true일 때 수행문 실행
③수행문	조건식이 true일 때 실행된는 문
④증감식	변수의 값을 증가 또는 감소시킨 후 조건식 수행

 

위의 문장들이 실행 되는 순서는 적혀있는 번호의 순서대로 실행된다. 이 때에 초기식은 최초의 한번만 실행되고, 후에는 ②조건식 => ③수행문 => ④증감식 이 반복된다.

 

반복문을 작성시에는 자신이 작성한 반복문이 다음에 대해 인지하고 있어야 한다.

• 몇 번 반복되는가?
• 반복 중에 사용된 인덱스 값의 시작값과 끝값은?
• 반복문이 끝난 뒤 인덱스의 값은?

이를 확실히 인지하지 않고 반복문을 사용하게 된다면, 원치 않는 결과를 실행하는 등의 문제가 발생하기 때문에 반복문을 사용할 때에는 위의 사항을 인지하도록 해야 한다.

 

다음은 반복문의 기본 예제 코드이다.

// 반복문
// for(①초기식; ②조건식; ④증감식){ ③수행문; }
// 1부터 10까지 출력
for(let i = 1; i <= 10; i++) {
    console.log(i);
}

 

반복문의 초기식, 조건식, 증감식은 모두 optional이기 때문에 생략할 수 있다. 해당 식을 생략하더라도 해당 식이 위치한 공간은 남겨둬야 하므로 세미콜론은 사용해주어야 한다.

// for 반복문
// 초기식, 조건식, 증감식 생략 가능

let i = 1;
for( ; i <= 10; i++) { console.log(i); };

i = 1;
for( ; i <= 10; ) { console.log(i); i++; };


//무한 루프
i = 1;
for( ; ; i++) { console.log(i); };

for( ; ; ) { console.log('loop') };

 

 

while

while문은 for문 보다는 단순한 구문을 가지고 있다.

while( 조건식 ) { 실행문; }

while문을 사용한 간단한 예제이다.

// 반복문
// while ( 조건식 ) { 실행문; }
// 1부터 10까지 출력
let i = 1;

while(i <= 10) {
    console.log(i);
    i++;
}

 

위의 예제를 살펴보면, while문은 실행문 내에서 증감식을 수행하게 된다. 증감식이 없어진다면, 반복문이 무한 루프에 빠질 수 있다.

// 반복문
// 무한 루프
let i = 1;

while(i <= 10) {
    console.log(i);
}

while(true) { ... }

 

for문과 while문을 살펴보면, for문이 훨씬 더 직관적이고 초기식, 조건식, 증감식을 한 줄에 넣기 때문에 코드도 짧아지는 것을 알 수 있다. 그렇다면 왜 while문은 왜 사용하고 언제 사용하는 것이 좋을까? 

 

 

for vs while

흔히, for문을 사용하는 경우는 구하고자 하는 값의 조건이 명확한 경우(반복문의 횟수가 정해져 있는 경우)이다. 예를 들어 초기값이 1인 변수를 5가될 때 까지 반복할 때, 변수가 5가 될때라는 값의 조건이 명확하고 이 때에 반복횟수는 4번이 된다.

let i = 1;
for(; i < 5; i++ ) {
    console.log(i);
}
console.log(i);  //5

 

반대로 while문은 구하고자 하는 값의 조건이 명확하지 않을 때, 즉 구하고자 하는 값이 반복문의 조건식에 영향을 미치지 않을 때 사용한다.

 

예를 들어 랜덤함수를 통해 1~100까지의 숫자를 계속 발생시키고 50이 나온다면 종료할 때 랜덤함수가 호출된 횟수를 알고 싶다고 하자. 이런 상황에서, 랜덤함수의 리턴값이 반복문을 실행을 결정하는 조건이지만, 이는 호출된 횟수가 반복문의 실행을 결정하지는 않는다.

let count = 0;

while(true) {
    if( Math.floor(Math.random() * 99 + 1) === 50) break;
    count++;
}

console.log(count);

 

 

break / continue

반복문을 사용할 때, 조건식 이외에 조건에서 반복문을 종료하고 싶을 때에는 break문을 사용한다. 반복문은 break문을 만나는 즉시 해당 반복문을 종료한다.

// break
// 반복문 종료
let i = 0;
while(true) {
    if(i === 10) break;
    i++;
}

console.log(i); //10

특히, 위의 예제와 같이 반복문이 무한 루프를 돌 경우에는 break문을 통한 탈출 조건이 무조건 필요하다!! (무한 루프는 시스템에 과부하를 줌)

 

continue문은 반복문을 종료시키는 것이 아닌 해당 실행문만을 건너띄는 것이다. 해당 실행문을 건너띈 뒤, 조건식 검사를 통해 반복문 실행 여부를 결정한다.

// break
// 진행하고 있는 반복문의 실행문을 건너띔
// 1-10 짝수만 출력
for(let i = 1; i <= 10; i++) {
    if(i % 2 === 1) continue;
    console.log(i);
}
//2 4 6 8 10

 

 

do while

do while문은 while문과 동작 방식은 똑같다. 하지만 다른 점은 무조건 한번은 실행된다는 점이다.

// do while
// '무조건' 한번은 실행
let i = 5;

do {
    console.log(i);
} while (i != 5);

// 출력결과 => 5