[자바스크립트] 제어문(조건문, 반복문)

1) 조건문

- 프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문

- if문 / if~else문 / if~else if문 / switch문

 

2) 조건문 - if문 / if~else문 / if~else if문

- 조건의 범위가 있을 때

- 조건식의 결과가 참일 때 수행함

 

1. if문 / if~else문

if(조건식){

   조건식의 결과가 참일 때 실행할 문장;

   ...

}else{

   조건식의 결과가 거짓일 때 실행할 문장;

}

 

2. if~else if문

if(조건식1){

   조건식1의 결과가 참일 때 실행할 문장;

}else if(조건식2){

   조건식2의 결과가 참일 때 실행할 문장;

}else if(조건식3){

   조건식3의 결과가 참일 때 실행할 문장;

}

...

else{

   모든 조건식의 결과가 거짓일 때 실행할 문장

}

    <script>
        'use strict';
        const age = Number(prompt('나이를 입력하세요'));

        if(age > 19){
            console.log('성인입니다.');
        }

        if(age > 19) console.log('성인입니다.');
		//위의 if문과 동일함, 중괄호 내부 문장과 세미콜론 전까지의 문장과 동일
        
        console.log('프로그램을 종료합니다.');

    </script>

 

 

3) 조건문 - switch문

- 일치하는 조건이 존재할 때

- 일치하는 값을 비교할 경우 편함, 가독성이 좋음

 

1. switch문

switch(변수){

   case 값1:

       변수의 값이 값1일 때 수행할 문장

       break;

   case 값2:

       변수의 값이 값1일 때 수행할 문장

       break;

   ...

   default:

       변수의 값이 위 case값에 없을 때 수행할 문장

}

 

2. switch문 예제1

    <script>
        'use strict';
        let sel = prompt('아동,청소년,성인 중 선택하세요');

        switch(sel){
            case '아동':
                sel += " : 입장료 무료";
                break;
            case '청소년':
                sel += " : 입장료 2000원";
                break;
            case '성인':
                sel += "입장료 5000원";
                break;
            default:
                alert('입력값을 확인하세요');
                sel = '입력값을 확인하세요';
        }
        console.log(sel);
        document.write(sel);
    </script>

 

3. switch문 예제2

    <script>
        'use strict';
        const name = prompt('이름을 입력하세요');
        const k_sco = Number(prompt('국어점수를 입력하세요'));
        const m_sco = Number(prompt('수학점수를 입력하세요'));
        const e_sco = Number(prompt('영어점수를 입력하세요'));
        const avg = (k_sco+m_sco+e_sco)/3;
        
        let grade;
        
        switch(parseInt(avg/10)){
            case 10:
            case 9:
                grade = "A";
                break;
            case 8:
                grade = "B";
                break;
            case 7:
                grade = "C";
                break;  
            case 6:
                grade = "D";
                break;
            default:
                grade = "F";
        }
        
        document.write(`<h2>${name}님의 성적표</h2><br>`);
        document.write(`국어점수 : ${k_sco}점<br>`);
        document.write(`수학점수 : ${m_sco}점<br>`);
        document.write(`영어점수 : ${e_sco}점<br>`);
        document.write(`총점 : ${k_sco+m_sco+e_sco}점<br>`);
        document.write(`평균 : ${avg}점<br>`);
        document.write(`학점 : ${grade}학점`);
    </script>

 

4) 반복문

- 조건식이 true일 동안 계속해서 주어진 실행문을 반복

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

- while / do ~ while문 / for문 / continue문 / break문 / 중첩 반복문

 

5) 반복문 - while문

 

1. while문

while(조건식){

   조건식의 결과가 참인 동안 반복할 실행문;

   ...

   조건식을 거짓으로 변경할 실행문;

}

 

2. while문 예제1 - 짝수 총 합

    <script>
        'use strict';
        let i = 1;
        let sum = 0;

        while(i <= 10){
            if(i % 2 == 0) sum += i;
            i++;
        }
        console.log(`1부터 10까지 짝수 수만의 총 합 : ${sum}`);
    </script>

 

3. while문 예제2 - 구구단

    <script>
        'use strict';
        const dan = Number(prompt('원하는 단을 입력하세요'));
        document.write(`<p>${dan}단</p>`);
        let i = 1;
        while(i<=9){
            document.write(`<p>${dan} * ${i} = ${dan*i}</p>`);
            i++;
        }
    </script>

 

6) 반복문 - do ~ while문

do{

   조건식의 결과가 참인 동안 반복할 실행문;

   ...

   조건식을 거짓으로 변경할 실행문;

}while(조건식);

    <script>
        'use strict';
        let j = 1;

        do{
            console.log(`현재 j의 값 : ${j}`);
            j++;
        }while(j<=5)
    </script>

 

7) 반복문 - for문

- while문과 달리 자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문

- while문보다 간결하게 반복을 표현

 

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

   조건식의 결과가 참일 동안 반복할 실행문;

   ...

}

    <script>
        'use strict';
        for(let i = 1; i<=5; i++){
            console.log(`${i}번째 반복`);
        }

        let j = 0;
        let sum = 0;
        for(j = 1; j<= 100; j++){
            if(j % 2 == 0){
                sum += j;
            }
        }
        document.write(`1부터 100까지 짝수들의 합 : ${sum}`);
    </script>

 

8) 반복문 - continue문

- 반복중인 문장 내에서 사용하며 해당 문장의 나머지 부분을 건너뛰고 다음 조건식의 판단으로 넘어가게 함

 

while(조건식){

   반복 중인 문장

   ...

     if(조건식) continue;

   ...

}

    <script>
        'use strict';
        for(let i =1; i<=100; i++){
            if(i % 3 == 0){
                document.write(`짝! `);
                continue;
            }
            document.write(`${i} `);
        }
    </script>

 

9) 반복문 - break문

- 반복중인 문장 내에서 사용하여 해당 반복문을 완전히 종료시키고 반복문 다음에 위치한 실행문으로 이동

 

while(조건식){

   반복중인 문장

   ...

     if(조건식) break;

   ...

}

 

1. break문 예제 - while문 사용

    <script>
        'use strict';
        while(true){
            const sel = Number(prompt('원하는 메뉴를 선택하세요(1.치킨 2.파전 3.팥빙수 4.종료'));
            if(sel == 4){
                alert('프로그램 종료');
                break;
            }
            switch(sel){
                case 1:
                    alert('치킨');
                    break;
                case 2:
                    alert('파전');
                    break;
                case 3:
                    alert('팥빙수');
                    break;
            }
        }
    </script>

 

2. break문 예제 - for(;;)문 사용

    <script>
        'use strict';
        for(;;){
            const sel = Number(prompt('원하는 메뉴를 선택하세요(1.치킨 2.파전 3.팥빙수 4.종료'));
            if(sel == 4){
                alert('프로그램 종료');
                break;
            }
            switch(sel){
                case 1:
                    alert('치킨');
                    break;
                case 2:
                    alert('파전');
                    break;
                case 3:
                    alert('팥빙수');
                    break;
            }
        }
    </script>

 

10) 반복문 - 중첩 반복문

- 반복문이 2개 이상 겹쳐있는 문장

 

1. while 중첩 반복문 예제

    <script>
        'use strict';
        let i = 1, j = 1;

        while(i <= 5){
            console.log(`현재 i의 값은 ${i} 👰`);
            while(j <= 5){
                console.log(`현재 j의 값은 ${j} 👩`);
                j++;
            }
            i++;
        }
    </script>

▼실행 결과▼

 

2. for 중첩 반복문 예제

    <script>
        'use strict';
        /*
        🎃🎃🎃🎃🎃
        🎃🎃🎃🎃🎃
        🎃🎃🎃🎃🎃
        🎃🎃🎃🎃🎃
        🎃🎃🎃🎃🎃
        '🎃'한개를 이용하여 반복문으로 위와 같이 출력
        */

        for(let i = 1; i<6; i++){
            //document.write(`🎃`);
            for(let j=1; j<6; j++){
                document.write(`🎃`);
            }
            document.write(`<br>`);
        }
        document.write(`<br><hr><br>`);

        /*
        🎃🎃🎃🎃🎃
        🎃🎃🎃🎃
        🎃🎃🎃
        🎃🎃
        🎃
        '🎃'한개를 이용하여 반복문으로 위와 같이 출력
        */

        for(let i = 1; i<6; i++){
            //document.write(`🎃`);
            for(let j=i; j<6; j++){
                document.write(`🎃`);
            }
            document.write(`<br>`);
        }
        document.write(`<br><hr><br>`);

       
         /*
        🎃
        🎃🎃
        🎃🎃🎃
        🎃🎃🎃🎃
        🎃🎃🎃🎃🎃
        '🎃'한개를 이용하여 반복문으로 위와 같이 출력
        */

      
        for(let i = 1; i<6; i++){
            //document.write(`🎃`);
            for(let j=1; j<=i; j++){
                document.write(`🎃`);
            }
            document.write(`<br>`);
        }
</script>

▼실행 결과▼