[JavaScript] 자바스크립트 반복문 while문, do ~ while문, for문, continue, break, 중첩반복문

JavaScript

 

제어문

제어문에는 조건문과 반복문 2가지의 종류가 있다.

 

2.반복문

프로그램 내에서 같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문입니다.

 

1) while문

특정 조건식을 만족하는 동안 계속해서 주어진 실행문을 반복합니다.

 

while(조건식){
    조건식의 결과가 참인 동안 반복될 실행문;
    거짓으로 변경할 실행문;
}

while문에서 중괄호가 없으면 조건식이 계속 true가 되기때문에 무한 실행을해버린다.
그렇기때문에 조건식을 거짓으로 변경할 실행문;까지 들어가야하므로 중괄호가 필수이다.

 

let i = 1;
while(i<=5){
    console.log('안녕하세요. JavaScript!');
    i++;
}

i 가 ++를 만나서 숫자가 올라간다. 1부터 시작하여 5가 될 때까지 console.log를 실행하고
i가 6이 되었을 때 조건문에 적합하지않아 while문을 나오게된다. 

 

do ~ while 문

while문은 루트에 진입하기 전에 먼저 조건식부터 검사를 합니다.
하지만 do ~ while문은 먼저 루프를 한 번 실행 한 후에 조건식을 검사합니다.
while문은 조건식이 처음부터 false이면 반복문을 아예 실행하지 않는다. 

do{
    조건식의 결과가 참인 동안 반복될 실행문;
    거짓으로 변경할 실행문;
}while(조건식);

이렇게 되어있으면 한 번은 실행을 하고 조건식을 검사해본 후 true/false에 따라 실행된다.
잘 사용은 하지 않는다.

'use strict';
let i = 1, j = 1;
while(i > 3){
    console.log(`i : ${i++}`);
} // false라서 돌지 않는다.

do{
    console.log(`j : ${j++}`);
}while(j > 3); // 출력부터 먼저하고 while 조건식을 보기 때문에 1이 출력된다.

 

 

2) for 문

for문은 while문과 달리 자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문입니다.
while문 보다는 간결하게 반복을 표현할 수 있습니다.

for(초기값(👈🏻변수설정); 조건식; 증감식){
    조건식의 결과가 참인 동안 반복할 실행문;
}

 

예제)

for문

for(let i = 1; i <= 5; i++){
    console.log('Hello JavaScript!');
}

비교 ! ! ! ! 

while문

let i = 1;
while(i <= 5){
    console.log('Hello JavaScript!');
    i++
}

 

전역변수와 지역변수를 잘 구분해야한다.

'use strict';

let i; // 전역변수
for(let i=1; i<=5; i++){ // 지역변수를 선언
    console.log(`${i}번째 반복`);
}

console.log(`현재 i의 값 : ${i}`); //undefined



let i; // 전역변수
for(i=1; i<=5; i++){ // 전역변수를 가져온다.
    console.log(`${i}번째 반복`);
}
console.log(`현재 i의 값 : ${i}`); // for문을 다 돌고 나와서 i의 값은 6으로 출력왼다

풀이)

전역변수를 선언하고 지역변수를 같은 이름으로 선언한다고 하면 for문 안에서는 for문 안에있는 지역변수 let i =1 을 사용하는 것이다.
전역변수를 사용하는 것이 아니다.
그렇기때문에 for문 밖에서 console.log에서의 i는 전역변수인데 정의하지 않았기 때문에 undefined가 나온다. 

아래 예제는 전역변수 i를 선언해주고 for문 안에서는 i를 위 예제처럼 선언한 것이 아니다.(let이 없으므로)
그렇기때문에 for문 안에 들어가있는 i는 전역변수 i를 가져와 사용한 것이고 i가 5까지 상승하여 조건문을 나올 때 증감식 부분에 있는 i++를 만나서 6으로 for문을 나온다. 그리하여 for문 밖에 있는 console.log에서 i는 6이 되는 것이다.

 

1~10까지의 총합을 for문을 이용해서 만들어보자

let sum = 0;
for(let i=1; i<=10; i++){
    sum += i;
}
console.log(`1 ~ 10까지의 총합 : ${sum}`);

 

 

continue 문

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

예제)

'use strict';
//3의 배수일 때마다 숫자가 아니라 '짝! '을 적고싶다.
const num = 3;
for(let i=1; i<=100; i++){
    if(i % num == 0){
        document.write('짝! ');
        continue;
    }
    document.write(`${i} `);
}

if문에 해당이되면 i가 3의 배수일 때 if문 밖으로 3이 나가지않고 조건식으로 바로 가서 4,7,10... 의 순서로 넘어간다.

 

break 문

반복 중인 루프 내에서 사용하여 해당 반복문을 완전히 종료시키고 반복문 다음에 위치한 실행문으로 이동합니다.
루프 내에서 조건식의 파단 결과에 상관없이 반복문을 빠져나가고 싶을 때 사용합니다.

for(;;){    // for문 무한루프 표현
    const sel = Number(prompt('원하는 메뉴를 선택하세요. (1.비빔밥 2.초밥 3.치킨 4.라면 5.냉면 6.국밥 7.선택안함)'));
    switch(sel){
        case 1:
            alert('비빔밥이 나옵니다.');
            break;
        case 2:
            alert('초밥이 나옵니다.')
            break;
        case 3:
           alert('치킨이 나옵니다.')
           break;
        case 4:
           alert('라면이 나옵니다.')
           break;
        case 5:
           alert('냉면이 나옵니다.')
           break;
        case 6:
           alert('국밥이 나옵니다.')
           break;
        case 7:
            alert('선택안함을 선택하여 프로그램을 종료합니다.')
            break;
    }
    if(sel == 7){
        break;
    }
}

프롬프트에 1 ~ 6번 까지 입력시엔 alert창이 뜬 후에 다시 원하는 메뉴를 선택하라는 프롬프트가 나오고, 7번을 입력시 alert창이 나오고 프로그램이 종료된다.

break를 switch문에서도 써주고, for문에 해당하는 break도 써주어 프로그램을 종료시킨다.

 

중첩 반복문

반복문이 2개 이상 겹쳐있는 문장을 의미합니다.

while(조건식){
    ...
    while(조건식){
        ...
    }
}

 

for(초기값; 조건식; 증감식){
    ...
    for(초기값; 조건식; 증감식){
        ...
    }
}

 

예시)

for(let i=1; i<=3; i++){
    console.log(`현재 i의 값 : ${i}`);
    for(let j=1; j<=5; j++){
        console.log(`::::::::::현재 j의 값 : ${j}`);
    }
}