JavaScript 자바스크립트 기초

🌐 FrontEnd/JavaScript

JavaScript 자바스크립트 기초 - 제어문

m-ur-phy 2022. 5. 29. 02:27

시작하면서

자바스크립트 기초를 공부합니다. 이번엔 제어문을 예제와 함께 공부합니다.

1. 제어문이란?

제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문을 말합니다.
제어문은 세 가지로 분류할 수 있습니다.
1. '조건 만족 여부에 따라 실행문을 제어할 수 있는 조건문' -> if / else / else if
2. '변수에 일치하는 경우의 값에 따라 실행문을 제어할 수 있는 선택문' -> switch
3. '특정 실행문을 여러 번 반복 실행할 수 있도록 하는 반복문' -> while / for

2. 조건문

(1) if 문

if 문은 조건식을 만족(true)할 경우에만 실행문을 실행합니다.

// 기본형

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

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>if 문</title>
	<script type="text/javascript">
		let exerciseTime = prompt("일주일에 몇 분 운동하나요?", "0");

		if (exerciseTime >= 150) { // 일주일에 150분 이상일 경우에만 출력문을 실행합니다
			document.write("잘 하고 계세요!")
		}
	</script>
</head>
<body>
    
</body>
</html>

(2) else 문

else 문은 조건식을 만족(true)할 경우와 만족하지 않았을(false) 경우에 따라 실행되는 실행문이 달라집니다.
즉, 두 가지 결과가 나올 수 있습니다.

// 기본형

if (조건식) {
	실행문1;
} else {
	실행문2;
}

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>else 문</title>
    <script type="text/javascript">
        let exerciseTime = prompt("일주일에 몇 분 운동하나요?", "0");

        if (exerciseTime >= 150) { // 일주일에 150분 이상일 경우에만 출력문을 실행합니다
            document.write("잘 하고 계세요!")
        } else { // 150분 미만일 경우 실행합니다
            document.write("세계보건기구(WHO)는 성인들에게 일주일에 150분 이상 운동할 것을 권장하고 있습니다!")
        }
    </script>
</head>
<body>
    
</body>
</html>

(3) else if 문

else if 문은 두 가지 이상의 조건식이 있습니다.
그 밖에 정해놓은 조건을 만족하지 않았을 때의 실행문 또한 존재합니다.

// 기본형

if (조건식1) {
	실행문1;
} else if (조건식2) {
	실행문2;
} else if (조건식3) {
	실행문3;
} else {
	실행문4;
}

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>else if 문</title>
    <script type="text/javascript">
        let exerciseTime = prompt("일주일에 몇 분 운동하나요?", "0");

        if (exerciseTime >= 2940) { // 일주일에 2940분 이상일 경우 (주 7일 7시간 이상 ㄷㄷ)
            document.write("선수이시군요! 항상 좋은 결과가 따르길 바랍니다!")
        } else if (exerciseTime < 2940 && exerciseTime >= 150) { // 150분 이상 ~ 2940분 미만인 경우
            document.write("운동을 잘 챙기시고 있군요! 건강이 최고입니다!")
        } else if (exerciseTime < 150 && exerciseTime >= 1) { // 1분 이상 ~ 150분 미만
            document.write("운동량을 조금 더 늘려볼까요? 시작은 10분씩만 더 늘리기로!")
        } else {
            document.write("?? : 이건 좀..")
        }
    </script>
</head>
<body>
    
</body>
</html>

(4) 중첩 if 문

중첩 if 문은 if 문 내부에 if 문이 중첩되어 있는 것을 말합니다.

// 기본형

if (조건식1) {
	if (조건식2) {
    	실행문;
	}
}

(4) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>중첩 if문</title>
    <script type="text/javascript">
        let id = "id"; // 아이디
        let pwd = "12345a"; // 비밀번호

        // 방문자에게 아이디를 입력받습니다
        let user_id = prompt("아이디를 입력해주세요.", "");
        // 방문자에게 비밀번호를 입력받습니다.
        let user_pwd = prompt("비밀번호를 입력해주세요.", "");

        if (id == user_id) { // 아이디가 일치할 경우
            if (pwd == user_pwd) { // 아이디가 일치하면서 비밀번호가 일치할 경우
                document.write(user_id + "님 반갑습니다!")
            } else { // 아이디는 일치하지만 비밀번호가 일치하지 않을 경우
                alert("비밀번호가 일치하지 않습니다. 다시 입력해주세요.")
                location.reload(); // 브라우저 새로 고침
            }
        } else { // 아이디가 일치하지 않을 경우
            alert("아이디가 일치하지 않습니다. 다시 입력해주세요.");
            location.reload();
        }
    </script>
</head>
<body>
    
</body>
</html>

3. 선택문

(1) switch 문

switch 문은 어떤 변수의 값에 따라서 문장을 실행할 수 있도록 하는 제어문입니다.
if 문과 비슷하지만 switch 문은 모든 조건을 확인하지 않고, 조건에 맞게되면 break 를 통해 즉시 조건문장에서 벗어날 수 있습니다.

// 기본형

let 변수 = 초기 값;

switch (변수) {
	case 값1:
    	실행문1;
        break;
	case 값2:
    	실행문2;
        break;
	default:
    	실행문3;
}

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스위치 문</title>
    <script type="text/javascript">
        let site = prompt("네이버, 다음, 구글 중 즐겨 사용하는 포털 사이트를 입력해주세요.", "");

        switch (site) {
            case "네이버":
                document.write("네이버를 선택하셨군요!"); // "네이버" 를 입력한 경우
                break;
            case "다음":
                document.write("다음을 선택하셨군요!"); // "다음" 을 입력한 경우
                break;
            case "구글":
                document.write("구글을 선택하셨군요!"); // "구글" 을 입력한 경우
                break;
            // 일치하는 값이 없을 경우
            default:
                alert("보기 중에 없는 사이트입니다.");
                location.reload();
        }
    </script>
</head>
<body>
    
</body>
</html>

4. 반복문

(1) while 문

while 문은 조건식이 true 일 경우 계속 반복하는 반복문입니다.

// 기본형

let 변수 = 초기 값;

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

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while 문</title>
    <script type="text/javascript">
        let i = 1;
        
        while (i <= 10) {
            document.write("반복" + i, "<br/>");
            i++;
        }
    </script>
</head>
<body>
    
</body>
</html>

(2) do while 문

while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다.
반면 do while 문은 반드시 한 번은 실행문을 실행하고, 조건식을 검사합니다.

// 기본형

let 변수 = 초기 값;
do {
	실행문;
	증감식;
} while (조건식)

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>do while 문</title>
    <script type="text/javascript">
        let result = '';
        let i = 0;

        do {
            i += 1;
            result = result + i;
        } while (i < 5);

        document.write(result); // 결과는 12345 (한 번은 무조건 실행하기 때문입니다)
    </script>
</head>
<body>
    
</body>
</html>

(3) for 문

for 문 또한 while 문과 같이 반복문입니다. 조건식을 만족할 때 까지 특정 실행문을 반복하여 실행합니다.

// 기본형

for (초기 값; 조건식; 증감식) {
	실행문;
}

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>for 문</title>
    <script type="text/javascript">
        for (let i = 1; i <= 10; i++) { // 중괄호 내에 실행문을 10번 반복합니다
            // 변수 i가 1씩 증가되어 10번 출력됩니다
            document.write("반복" + i, "<br/>");
        }
    </script>
</head>
<body>
    
</body>
</html>

(4) break 문

반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료 시킵니다.

// 기본형

for (초기 값; 조건식; 증감식) {
	break;
	실행문;
}

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

(4) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>break</title>
    <script type="text/javascript">
        for (let i = 1; i <= 10; i++) {
            if (i == 6) {
                break;
            }
            document.write(i, "<br/>")
        }
    </script>
</head>
<body>
    
</body>
</html>

(5) continue 문

반복문에서만 사용할 수 있습니다.
while 문에 사용했을 경우 continue 문 다음에 실행문을 무시하고 바로 조건식으로 이동하여 조건 검사를 수행합니다.
break 와 유사하지만, break 는 반복문 자체를 탈출할 때 주로 사용하고 continue 는 반복문 내에 특정 조건 한 부분만을 제외하고자 할 때 사용합니다.

// 기본형

for (초기 값; 조건식; 증감식) {
	continue; // 다음에 오는 실행문을 무시하고 바로 증감식으로 이동합니다
	실행문;
}

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

(5) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>continue 문</title>
    <script type="text/javascript">
        for (let i = 1; i <= 10; i++) { // 변수 i의 값이 10이 될 때까지 반복문을 실행합니다
            if (i % 2 == 0) {
                continue; // 변수 i의 값이 2의 배수일 경우에만 실행합니다
            }
            // 변수 i의 값이 2의 배수가 아닐 경우에만 출력문을 실행합니다
            document.write(i, "<br/>")
        }
    </script>
</head>
<body>
    
</body>
</html>

(6) 중첩 for 문

중첩 if 문과 같이 for 문 내부에 for 문을 사용한 것을 중첩 for 문이라고 합니다.

// 기본형

for (초기 값; 조건식; 증감식) { // 바깥쪽 for 문
	for (초기 값; 조건식; 증감식) { // 안쪽 for 문
    	실행문;
	}
}

(6) 예제 - 구구단

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>구구단 만들기</title>
    <script type="text/javascript">
        for (let i = 2; i <= 9; i++) {
            document.write("<h1>" + i + "단</h1>") // 2단부터 9단까지 단수 출력
            for (let j = 1; j <= 9; j++){
                document.write(i + "x" + j + "=" + i*j + "<br/>")
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

마무리하며

이렇게 자바스크립트의 제어문을 공부해 보았습니다.

제어문의 동작 원리가 처음엔 다소 생소하실 수 있지만, 계속 접하시다보면 익숙해지실 것입니다 :-)

댓글과 공감은 항상 환영입니다!