티스토리 뷰

Programming/JavaScript, jQuery

[javascript 6강] 조건문(제어문)

국브 2019. 2. 11. 00:00

 [javascript 6강] 조건문(제어문)



이번글에서는 자바스크립트의 조건문에 대해서 알아보겠습니다.

이또한 다른 개발언와 기능 및 문법이 비슷합니다.

조건문은 말그대로 조건이 있고 조건에 맞으면 실행하고,

조건에 맞지 않으면 실행을 하지 않는것 입니다.

조건문에 들어가기전 자바스크립트 기본글에 대해 링크를 달아두겠습니다.

모르는 부분이 있다면 하단의 링크를 확인부탁드립니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정


2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법


2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형


2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자


2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열



 if, if ~else, if ~else if, if ~else if ~ else 문


조건문중에 가장많이 쓰이는 것이 바로 if 문입니다.

사용방법도 쉬우며.. 복수로도 사용이 쉽습니다.

또한 논리적로직에서도 실행되어야 할 부분만 실행되고 나머지는 실행되지않아 자원또한 아낄수 있습니다.


 사용법 및 문법 


 1. if 문


if(조건식){ 조건이 true 인 경우 실행 }


2. if ~else 문


if(조건식1){ 조건식1이 true 인 경우 실행 } else { 위의 조건식1이 false 일 경우 실행 }


3. if ~else if 문 (else if 는 복수계로 사용가능)


if(조건식1){ 조건식1이 true 인 경우 실행} else if (조건식2) { 위의 조건식1이 false 이고 조건식2가 true 일때 실행  }


4.  if ~else if ~ else 문 (else if 는 복수계로 사용가능)


if(조건식1){ 조건식1이 true 인 경우 실행} else if (조건식2) { 위의 조건식1이 false 이고 조건식2가 true 일때 실행  }

else { 조건식1이 false 이고 조건식2도 false 일때 실행 }



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var it1 = 10;
            var it2 = 5;
            
            if(it1 < it2){
                console.log("it2 가 더크다!");
            } else if(it1 == it2){
                console.log("it1 과 it2 강다!");
            } else {
                console.log("it1 가 더크다!");
            }
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


우선 결론부터 말하면 else 의 실행문이 실행되어 "it1 가 더크다!" 로 출력되었습니다.

변수 it1 = 10 , it2 = 5 입니다.

if 의 조건문은 it < it2 입니다. it1 이 더크기 때문에 false 로나오며.. else if 조건문으로 넘어가게 됩니다.

else if 조건문에서는 it1 == it2 입니다. 두 변수의 값이 다르므로 false 가 나오게 됩니다. 그래서 else 로 넘어가 console.log("it1 가 더크다!"); 가 실행되었습니다.




 switch 문


조건문에는 switch 문 또한 존제합니다.

하지만 if 문에 비해 논리적로직에서 조건에 true 일때까지 돌아가기때문에..

잘못사용한다면 자원낭비를 할수있습니다.


 사용법 및 문법 

 

switch(비교값) {

case 조건1: 조건1이 true인 경우 실행문

break;


case 조건2: 조건2이 true인 경우 실행문

break;


case 조건3: 조건3이 true인 경우 실행문

break;


default:

 모든 조건이 false 인 경우 실행문

break;

}




(case 는 복수계로 마음껏 사용해도 됨.)


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var it1 = 10;
            
            switch(it1){
                case 1 : 
                    console.log("it1 은 1이다!");
                    break;
                case 10 : 
                    console.log("it1 은 10이다!");
                    break;
                default :
                    console.log("일치하는 숫자가 없음..");
                break;
            }
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



우선 결론부터 말씀드리면.. case 10 의 실행문이 실행되어 "it1 은 10이다!" 로 출력되었습니다.

it1 = 10 인 변수가 있습니다.

switch 에 it1 의 값을 넣어 기준을 잡아주었습니다.

그다음 case 1 로 넘어갑니다. case 1 을 풀어적으면.. it1 == 1 이라는 조건문이 나옵니다. 당연히 false 가 나옵니다. 그래서 다음 case 10 으로 넘어갑니다.

case 10 으로 넘어가.. case 10 을 풀어적으면 it1 == 10 이라는 조건문이 나옵니다. it1 은 10 이기 떄문에 true 의 값이 나오고.. console.log("it1 은 10이다!"); 출력되고.. break 구문에 걸려 조건문은 끝나게 됩니다




 삼항연산자


삼항연산자또한 조건에 맞게 실행문을 실행할수 있습니다.

이또한 다른 조건문과 다르지않으며 조건과 실행문으로 이루어져있습니다.

간간히 많이 사용됩니다.


 사용법 및 문법 

 

(조건식) ? 조건식이 true인 경우 실행문:조건식이 false 인 경우 실행문



 예제 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var it1 = 10;
            var it2 = 5;
            var it3 = (it1>it2) ? it1 : it2;
            
            console.log(it3);
 
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



변수 it1 =10, it2=5 입니다.

그로 변수 it3 에는 삼항연산자를 사용하여 값을 할당해 주었습니다.

(it1>it2) ? it1 : it2; 를 보면.. 괄호안에 조건만 it1 > it2 는 참이기 때문에 true 의 값이 나오고..

true일때 실행될 실행문은 it1 입니다.

그래서 it3 = it1 이 적용됩니다.

그다음 console.log(it3); 실행결과 10이라고 출력되는것을 확인할수 있습니다.




 글을 마치며..


이번글을 통해 조건문에 대해 알아보았습니다.

다음글엣서는 제어문에서 반복문이라는 것에 대해 알아보겠습니다.

모두 수고하세요.


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 8강] 함수  (0) 2019.02.12
[javascript 7강] 반복문(제어문)  (0) 2019.02.11
[javascript 5강] 배열  (0) 2019.02.10
[javascript 4강] 연산자  (0) 2019.02.10
[javascript 3강] 변수와 자료형  (0) 2019.02.09
댓글