평범한 컴공 대학생의 공부일지

자바스크립트(JS) 제어문(if ~ else if, switch 등) 본문

자바스크립트

자바스크립트(JS) 제어문(if ~ else if, switch 등)

Taram 2023. 7. 16. 06:58

이번 글에서는 제어문에 대해서 알려드릴게요.
제어문은 크게 6개로 나뉩니다.
1) if, if ~ else
2) switch
3) for, 중첩 for문
4) while, do ~ while
5) break
6) continue
오늘은 이 6가지 제어문에 대해서 설명해드리겠습니다.

  • if, if ~ else
    이 명령어는 조건에 따라 값을 다르게 출력하게 해주는 역할을 수행합니다.
    예를 들어 설명해드릴게요. 주스 공장이 있다고 생각해봅시다. 그 공장에서는 품질 90%이상만 납품하고 90% 아래는 따로 폐기 처분을 한다고 가정해볼게요. 같은 컨베이어벨트에서 쭉 돌아가면서 품질을 검사하고 폐기 처분과 납품할 주스는 따로 구분해야겠죠? 그래서 품질에 따라 컨베이어 벨트 방향을 바꿔준다고 생각해봅시다.
    그럼 주스가 구분되어 정확하게 나누어질 것입니다.
    여기서 품질 90% 이상은 "조건"이 되는 것이고 컨베이어 벨트 방향은 조건에 따른 제어가 되는 것입니다.
    아래 코드를 통해 다시 한번 설명해 드리겠습니다.
var a = 3;
var b = 2;
if ( a === b )
{
    "a와 b의 값은 같습니다.";
}
else
{
    "a와 b의 값은 다릅니다.";
}

       이 코드는 a와 b의 값을 비교하는 코드입니다. 여기서 if 줄은 조건을 할당합니다.
       조건을 만족한다면 if의 {  } 안에 해당하는 코드를 실행하고 조건을 만족하지 않는다면 else {  } 에 해당하는 코드를
       실행합니다.
       위 코드를 실행해보면 a와 b의 값이 서로 다르기 때문에 if줄이 실행되지 않고
       else줄에 해당하는 내용이 실행되어 "a와 b의 값은 다릅니다." 가 출력되는것을 알 수 있습니다.
       이와 같이 if ~ else if는 조건에 따른 참과 거짓의 결과에 따라 실행되는 코드가 달라집니다.
          - truthy, falsy 값
            이는 추가적으로 알려드리겠습니다. 전 글의 논리 연산자 부분에서 true와 false를 결과로 반환 했었습니다.
            truthy, falsy도 true, false와 유사한 기능입니다.
         
            truthy : true로 인정할 수 있는 값(참으로 인정할 수 있는 값)
            falsy : false로 인정할 수 있는 값(거짓으로 인정할 수 있는 값)
         
            이렇게만 말씀드리면 이걸 도대체 실무에서 어떻게 사용하는지 감이 안오실 겁니다. 예를 들어 설명해드릴게요.
            truthy, falsy 둘 다 사용자 입력 검증과 같은 경우에서 사용할 수 있습니다.
            회원가입 창을 생각해볼까요? 이름, 주민번호, 주소, 이메일과 같이 필수 정보를 입력해야 하는 칸이 있습니다.
            필수 칸은 반드시 입력되어야 하기 때문에 truthy로 한다면 정보가 입력되었는지 판단하여 사용자에게 알려줄 수
            있습니다. falsy도 이와 같은 기능을 수행하는데 사용할 수 있습니다. truthy는 필수 정보가 입력되어 있는지
            판단한다면 falsy는 필수 정보 칸이 비어 있는지 확인하는 기능을 수행하는데 사용됩니다.

  • switch
    switch는 메뉴를 생각해보시면 되겠습니다. 메뉴가 1. 회원가입, 2. 로그인, 3. 종료 이렇게 있다고 생각해봅시다.
    여기서 1번을 입력하면 1번에 해당하는 창으로 이동하고 2번을 입력하면 2번에 해당하는 창으로 이동하겠죠?
    이렇게 여러 개의 조건에 따른 흐름을 제어해 주는 역할을 수행합니다.
    아래의 코드를 보고 다시 설명해드릴게요.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>메뉴 선택</title>
	<link rel="stylesheet" href="css/switch.css">
</head>
<body>	
	<script>
		var menu = prompt("번호를 선택해 주세요. 1.회원가입, 2.로그인, 3.종료", "1");
		
		switch(menu) {
			case "1" : document.write("<p>회원가입 창 입니다.</p>");
				break;
			case "2" : document.write("<p>로그인 창 입니다.</p>");
				break;
			case "3" : document.write("<p>종료합니다.</p>");
				break;
			default: alert("잘못 입력했습니다.");
		}
	</script>
</body>
</html>

     위 코드는 제가 위에서 말씀 드렸던 메뉴에서 번호를 선택하여 해당하는 창으로 이동하는 코드입니다.
     script 부분부터 설명해드릴게요.

     1번째 줄 : menu를 선언하고 prompt 창에 입력한 문자를 출력합니다. 입력되어있는 기본 값은 1입니다.
                      사용자가 입력한 값을 menu 변수에 할당합니다.
     2번째 줄 : 1번째 줄에서 할당한 menu 변수의 값을 기반으로 switch문을 시작합니다. 
     3번째 줄 : menu에 할당한 값이 1이라면 "회원가입 창 입니다"라는 메시지를 출력합니다.
     4번째 줄 : case 1의 처리가 끝나면 switch문을 종료합니다.
     5번째 줄 : menu에 할당한 값이 2라면 "로그인 창 입니다"라는 메시지를 출력합니다.
     7번째 줄 : menu에 할당한 값이 3이라면 "종료합니다"라는 메시지를 출력합니다.
     9번째 줄 : menu에 할당한 값이 case중 아무것도 일치하지 않는다면 "잘못 입력했습니다"라는 경고창을 띄웁니다.
     
     이와 같이 입력한 값에 따라 다른 여러 조건문을 한번에 처리하는 역할을 수행하는 것이 switch문 입니다.

  • for문, 중첩 for문
    for문은 반복문을 의미하며 말 그대로 특정 코드를 특정 횟수만큼 반복하는 역할을 수행합니다.
    간단하게 1부터 10까지 값을 더한다고 생각해볼까요? 그럼 반복문을 사용하지 않는다면 아래와 같은 코드가 됩니다.
var sum = 0;
sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
sum += 6;
sum += 7;
sum += 8;
sum += 9;
sum += 10;
document.write("1부터 10까지 더한 값은 " + sum + "입니다.");

      이렇게 작성하면 보기도 불편하고 처리 속도도 느려집니다. 하지만 이러한 문제점은 for문을 사용함으로써 없어집니다.
      위 코드를 반복문을 사용하여 바꿔볼게요.

var sum = 0;
for (var a = 1; a < 11; a++)
{
	sum += a;
}
document.write("1부터 10까지 더한 값은 " + sum + "입니다.");

     훨씬 보기 편하게 바뀌었죠? 그럼 바로 설명해드리겠습니다.

     1번째 줄 : sum이라는 덧셈 결과를 저장할 변수를 선언하고 0으로 초기화 합니다.
     2번째 줄 : 변수 a를 선언하고 값을 1로 초기화 해줍니다.
                      a의 값이 11보다 작을 때 (조건이 참일 때까지) 반복합니다. -> a의 값이 10이 될 때까지 반복
     3번째 줄 : sum = sum + a로 1부터 더한 값을 차곡차곡 저장합니다.
                      1번째 실행 : sum = 0 + 1 -> 1 저장
                      2번째 실행 : sum = 1 + 2 -> 3 저장 
     이렇게 for문을 사용하여 반복문을 작성할 수 있습니다.
     
      다음은 중첩 for문에 대해서 알려드릴게요. 중첩 for문은 말 그대로 for문이 중첩되어 있는 구조입니다.
      for문안에 또다른 for문이 있는 것이죠. 아래의 예시 코드로 설명해 드릴게요

<script>
        var sum = 0;
        for (var a = 1; a<3;a++)
        { 
            document.write("1번째 for문 입니다.");
            for (var b = 1; b < 4; b++)
            {
                document.write("2번째 for문 입니다.");
            }
        } 
    </script>

      위 코드는 중첩 for문 코드 예시입니다. 1번 for문, 2번 for문으로 나뉘는 것을 확인할 수 있습니다.
      중첩 for문은 기본적으로 1번 for문이 실행되고 2번 for문으로 넘어가 2번 for문이 끝날 때까지 실행됩니다.
      그리고 다시 1번 for문으로 넘어가서 다시 반복됩니다. 결과 화면을 보여드릴게요

중첩 for문

      위 코드에서 1번 for문은 2번 실행되고 2번째 for문은 3번 실행됩니다.
      그럼으로써 순서는 이렇게 됩니다.
      1번 for문 1번째 실행 -> 2번째 for문 3번 실행 -> 1번 for문 2번째 실행 -> 2번 for문 3번 실행
      이제 좀 감이 오시나요? 이 구조가 기본적인 중첩 for문의 구조입니다.

  • while, do ~ while
    while, do ~ while문은 특정 조건을 만족하는 동안 명령을 반복하는 기능을 수행합니다.
    그러면 이렇게 생각하실 수 있을 겁니다. 어? 그러면 for문이랑 다른게 뭐지??? 
    차이점은 여기서 나타납니다. for문은 반복 횟수가 정해져있습니다. 프로그래머가 정해놓은 반복 횟수만큼만 반복되죠. 하지만 while, do ~ while문은 특정 조건을 계속 만족한다면 무한정 반복되는 것입니다.
    아래 코드를 살펴볼까요?
var count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}

      위 코드는 count를 1로 초기화 하고 5보다 작거나 같은 조건을 만족할 때 까지 반복합니다.
      그리고 콘솔에 count를 출력하고 count값을 1 증가 시킵니다. 
      구조에서부터 차이가 나죠? 이렇게 조건을 만족한다면 계속 반복되는 것을 의미합니다.
      여기서 count++을 뺀다면 계속 5보다 작은 조건을 만족하니까 무한 반복도 가능합니다.

      아래는 do ~ while 코드입니다.

var count = 1;

do {
  console.log(count);
  count++;
} while (count <= 5);

      do ~ while은 코드 끝 while 뒤에 조건을 명시해줍니다. while과는 다르게 조건이 뒤에 붙는 구조이죠.
      이를 실제로 실행하면 아래와 같은 결과가 출력됩니다.

do ~ while 출력

      이렇게 값은 똑같이 출력되지만 조건이 뒤에 붙어 결과 값이 false라 해도 문장이 최소한 1번은 무조건 실행됩니다.
      결론적으로 while과 do ~ while의 차이점을 정리해드리면
      while은 조건에 안 맞을 시 명령 실행 X, do ~ while은 조건에 맞지 않아도 최소한 1번 실행 이렇게 정리됩니다.

  • break, continue
    break 문은 위에서 switch문을 설명할 때 사용하고 설명해드렸습니다.
    break 문은 for, switch,while과 같은 반복문 안에서 그 루프를 빠져 나올 때 사용합니다.

    continue문은 주어진 조건에 맞는 값을 만났을 때 실행하던 반복 문장을 건너뛰고 반복문의 맨 앞으로 돌아갑니다.
    아래는 continue 예시 코드입니다.
for (var i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

      위 코드는 i가 1부터 1씩 증가하고 5보다 커질 때까지 반복하며 i의 값을 출력합니다.
      하지만  i가 3이 되면 continue를 통해 다음 반복으로 넘어갑니다. 즉 3번째 console.log(i)는 스킵되는 것이죠.
      그래서 출력을 하게되면 3을 제외한 1,2,4,5가 출력되게 됩니다.

 

오늘은 제어문에 대해서 알아봤습니다. 양이 많은 만큼 더 중요하고 알아야 할 부분이 많은 챕터여서 잘 짚고 넘어가시면 좋겠습니다 :)

'자바스크립트' 카테고리의 다른 글

자바스크립트(JS) 함수 표현식  (0) 2023.08.05
자바스크립트(JS) 함수(let, constant), 전역 변수, 지역 변수  (0) 2023.08.05
자바스크립트(JS) 연산자  (2) 2023.07.16
자바스크립트(JS) 나이 계산하기 (복습)  (3) 2023.06.30
자바스크립트(JS) 변수, 상수, 자료형  (4) 2023.06.29
'자바스크립트' Related Articles more