JavaScript

[JavaScript] 조건문에 대해서 알아보기

YaluStar 2023. 1. 11. 01:09

안녕하세요.

 

이번에는 JavaScript 조건문에 대하여 알아보겠습니다.

 

조건문

특정 조건 만족 시 ( 조건이 참인 경우 ) 실행하는 명령의 집합이며, 특정한 조건 속에서 작업을 수행하고 싶을 때 사용한다.

대표적으로 사용하는 방식에는 if 문과 switch문을 사용하는 2가지 방법이 있습니다.

 

1. if 문

기본 작성법은 아래 방법처럼 작성을 하면 되며 방법은 3가지 유형으로 나뉠 수 있습니다.

if ( 조건 ) {
  실행 내용
}

-----------------------

if ( 조건 ) {
  실행 내용
} else {
  실행 내용
}

-----------------------

if ( 조건 ) {
  실행 내용
} else if ( 조건 ) {
  실행 내용
} else if ( 조건 ) {
  실행 내용
} else {
  실행 내용
}

 

1번으로는 if ( 조건 ) { 실행 내용 }으로 if 문 1개만 사용해서 조건이 참이면 밑에 내용을 실행하는 방법입니다.

<!DOCTYPE html>
<html lang="en, ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 실습</title>
    <script>
        var a = prompt("숫자를 입력하세요.");
           console.log('입력 값 : ', a);
        if ( a > 10) {
           console.log( "a > 10");
        } 
    </script>

</head>
<body>
    
</body>
</html>

 

여기서는 입력 값으로 11 이상의 값을 받으면 console.log( “ a > 10”) 명령어를 실행하고, 10 이하의 값을 받으면 아무 일도 안 하게 됩니다.

 

결과 1) if문 실행 X

 

결과 2) if문 실행 O

 

2번 방법으로는 if + else 문으로 if ( 조건 ) 문에서 참이 아닌 경우에는 else 문을 무조건 실행하게 됩니다.

단 if ( 조건 ) 문에서 참이면 else 문을 실행하지 않습니다.

<!DOCTYPE html>
<html lang="en, ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 실습</title>
    <script>
        var a = prompt("숫자를 입력하세요.");

        console.log('입력 값 : ', a);
        if ( a > 10) {
           console.log( "a > 10" );
        }  else {
           console.log( " a <= 10" );
        }
    </script>
</head>
<body>
    
</body>
</html>

 

결과 1) if문 실행 O

 

결과 2) if문 실행 X, else 문 실행 O

 

마지막으로 if + else 뿐만 아니라 여러 가지 조건을 추가하였을 때 사용하는 else if 문입니다.

<!DOCTYPE html>
<html lang="en, ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 실습</title>
    <script>
        var a = prompt("숫자를 입력하세요.");
            console.log('입력 값 : ', a);
        if ( a > 10) {
            console.log( "if문 실행 a > 10" );
        }  else if ( a > 5 ) {
            console.log ( "else if문 실행 a > 5");
        } else {
            console.log( "else문 실행 a <= 5" );
        }
    </script>
</head>
<body>
    
</body>
</html>

 

보시면 아래와 같이 조건에 따라서 결과 값이 출력되는 것을 볼 수 있습니다.

 

결과 1) if문 실행 O

 

결과 2) if문 실행 X, else if문 실행 O

 

결과 3) if문 실행 X, else if문 실행 X, else 문 실행 O

 

 

여기서 else if 문은 1개만 사용할 수 있는 것이 아니라 여러 개 사용할 수 도 있습니다.

단 문법을 꼭 맞춰주셔야 합니다.

 

처음에 if 문이 먼저 나오고 else if 문이 중간에 있고 else 문은 꼭 마지막에 있어야 합니다.

사용할 때 if 문은 필수로 작성이 되어야 하지만 else if문과 else 문은 생략이 가능합니다.

 

if 문과 else if 문은 작성하고 else문은 작성을 하지 않아도 됩니다.

 

 

2. 중첩 if 문

중첩 if 문이란 기본 if 문의 안에다가 if 문을 여러 번 사용하는 방식을 말

<!DOCTYPE html>
<html lang="en, ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 실습</title>
    <script>
        var a = prompt("숫자를 입력하세요.");

        console.log('입력 값 : ', a);

        if ( a > 10) {
            console.log( "if 문 실행 a > 10");
        } else if ( a > 5) {
            console.log( "else if 문 실행 a > 5");
            if (a > 8) {
                console.log ( "else if문 => 중첩 if문 실행 a > 8");
            } else {
                console.log ( "else if문 => 중첩 if문의 else문 실행 5 < a <= 8");
            }
        } else if ( a > 0) {
            console.log( "else if 문 실행 a > 0");
        } else {
            console.log( "else 문 실행 a <= 0");
        }
    </script>
</head>
<body>
    
</body>
</html>

 

코드를 보시면 다른 부분은 기본 if 문과 비슷하지만

else if 문 안에 if 문이 또 들어가 있는 것을 볼 수 있습니다.

이런 식으로 if 문 안에다가 if 문을 다시 넣는 것을 중첩 if 문이라고 합니다.

 

결과 1) 1번 else if 문에서 if 문 실행

 

결과 2) 1번 else if 문에서 else 문 실행

 

 

3. switch 문

if 문과 같이 조건을 걸 수 있지만 범위가 아니라 값으로 지정하는 특징이 있습니다.

 

기본 작성 방법

switch(값 or 변수) {
  case '값':
	실행 명령어
    break;
  case '값2':
	실행 명령어2
	break;
  default:
	실행 명령어
	break;
}

 

switch 문은 if 문처럼 범위를 지정하지는 않고, 특정 값을 기준으로 잡습니다.

switch() 함수에서 값을 받으면 case에 지정된 값을 기준으로 명령어가 실행 명령어가 나뉘게 됩니다.

 

그런데 코드 중간에 break; 라는 명령어가 들어가 있는 것을 볼 수 있습니다.

switch문은 1번 case를 실행해도 끝나지 않고 아래 case까지 그대로 실행하는 특성이 있습니다.

그래서 case가 1개 끝나면 break; 명령어를 이용해서 switch 함수를 강제로 종료를 시켜줘야 합니다.

 

마지막의 default는 모든 case에 해당이 되지 않는 경우에 실행되는 곳입니다.

<!DOCTYPE html>
<html lang="en, ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 실습</title>
    <script>
        var a = prompt("숫자를 입력하세요.");
        console.log('입력 값 : ', a);

        switch(a) {
            case '8':
                console.log("a = 8");
                break;
            default:
                console.log("a != 8");
                break;
        }
    </script>
</head>
<body>
    
</body>
</html>

 

결과 1) default 실행

 

결과 2) case 8 실행

 

3. 삼항 연산자

if, switch 문 말고도 삼항 연산자라는 방법도 있는데 간략하게만 알아보겠습니다.

조건 ? 참일 때의 실행 : 거짓일 때의 실행

 

해당 코드에서는 n은 0보다 큰 3의 값을 가지기 때문에 ‘큼’ 이라는 알림 창이 출력됩니다.

만약, n이 0보다 작은 값을 가지면 ‘작음’ 메시지를 가진 알림 창이 출력이 됩니다.

<script>
  var n = 3;
  n > 0 ? alert(“큼”) : alert(“작음”);
</script>

 

실습 - 1

연산자에 따라서 값 출력하기

더보기 
<!DOCTYPE html>
<html lang="en, ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Document 실습</title>
    <script>
        
        function calculate() {
            var input1 = document.getElementById('input1');
            var input2 = document.getElementById('input2');
            var input3 = document.getElementById('input3');
            var input4 = document.getElementById('input4');
            var result = 0;

            if (input3.value == "+") {
                result = Number(input1.value) + Number(input2.value);
            } else if (input3.value == '-') {
                result = Number(input1.value) - Number(input2.value);
            } else if (input3.value == '*') {
                result = Number(input1.value) * Number(input2.value);
            } else if (input3.value == '/') {
                result = Number(input1.value) / Number(input2.value);
            } else {
                alert('연산자 값을 다시 입력해주세요.')
            }
            input4.value = result;
        }

        function init() {
            var input1 = document.getElementById('input1');
            var input2 = document.getElementById('input2');
            var input3 = document.getElementById('input3');
            var input4 = document.getElementById('input4');
            input1.value = '';
            input2.value = '';
            input3.value = '';
            input4.value = '';
        }
    </script>
</head>
<body>
    <div>
        <span>값1: </span>
        <input type="text" id="input1">
    </div>
    <div>
        <span>값2: </span>
        <input type="text" id="input2">
    </div>
    <div>
        <span>연산자: </span>
        <input type="text" id="input3">
    </div>
    <div>
        <span>결과 </span>
        <input type="text" id="input4">
    </div>
    <div>
        <button type="button" onclick="calculate();">계산하기</button>
        <button type="button" onclick="init();">초기화</button>
    </div>
</body>
</html>

 

 

이상으로 JavaScript 조건문에 대해서 알아보았습니다.

 

감사합니다.

 

반응형
저작자표시 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] return 명령어에 대해서 알아보기  (0) 2023.01.14
[JavaScript] 반복문에 대해서 알아보기  (0) 2023.01.13
[JavaScript] 함수에 대해서 알아보기  (0) 2023.01.09
[JavaScript] 연산자에 대해서 알아보기  (0) 2023.01.07
[JavaScript] 형변환에 대해서 알아보기  (0) 2023.01.06

'JavaScript'의 다른글

  • 현재글[JavaScript] 조건문에 대해서 알아보기

관련글

댓글

티스토리툴바