조건문

2022. 12. 29. 00:51ㆍJavascript/TCP school

제어문(control flow statements)

프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문

1. 조건문

2. 반복문

3. 등..

조건문(conditional statements)

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

1. if 문
2. if / else 문
3. if / else if / else 문
4. switch 문

if 문

표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않음

 

if 문 순서도

 

 

if 문의 문법

if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
}
var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
}
if (x < y) {
    document.write("x가 y보다 작습니다.");
}
if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
    document.write("x가 y보다 큽니다.");
if 문에서 실행될 실행문이 한 줄 뿐이라면 중괄호({})를 생략할 수 있음

프로그래밍 초보자의 실수

변수 x와 y의 값이 같으면 두 변수가 같다는 문자열을 출력하려고 하는 예제

if (x = y) {
    document.write("두 변수 x와 y는 같습니다.");
}

if 문의 표현식에서 동등 연산자(==)를 사용해야 할 곳에 잘못해서 대입 연산자(=)을 사용

수정 후

if (x == y) {
    document.write("두 변수 x와 y는 같습니다.");
}

변수 x에 변수 y의 값을 대입하고자 한다면

if ((x = y)) {
    document.write("두 변수 x와 y는 같습니다.");
}
하지만 if 문과 같은 제어문의 표현식에 위와 같이 대입문을 사용하는 것은 바람직하지 못함

else 문

if 문과 같이 사용할 수 있는 else 문은 if 문의 표현식 결과가 거짓(false)일 때 주어진 실행문을 실행

 

if / else 문 순서도

 

else 문 문법

if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;
}
var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else {
    if (x < y)
        document.write("x가 y보다 작습니다.");
    else // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
        document.write("x가 y보다 큽니다.");
}

else if 문

if 문처럼 표현식을 설정할 수 있음

if 문을 좀 더 간결하게 표현할 수 있음

 

하나의 조건문 안에서 if 문과 else 문은 단 한 번만 사용

else if 문은 여러 번 사용되어 다양한 조건을 설정할 수 있음

 

if / else if / else 문 순서도

 

 

else if 문 문법

if (표현식1) {
    표현식1의 결과가 참일 때 실행하고자 하는 실행문;
} else if (표현식2) {
    표현식2의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;
}
var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else if (x < y) {
    document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
    document.write("x가 y보다 큽니다.");
}

삼항 연산자에 의한 조건문

표현식 ? 반환값1 : 반환값2

 

삼항 연산자에 대한 더 자세한 사항은 자바스크립트 기타 연산자 수업에서 확인

자바스크립트 기타 연산자 수업 확인 =>

switch 문

주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문

if / else 문보다 가독성 측면에서 더 좋음

switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break;
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;
    ...
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
}

default 절

조건 값이 위에 나열된 어떠한 case 절에도 해당하지 않을 때 실행

필요할 때만 선언

 

각 case 절 및 default 절

반드시 break 키워드를 포함

break -  조건 값에 해당하는 case 절이나 default 절이 실행된 뒤에 전체 switch 문을 빠져나가게 해줌

 

default 절의 위치가 반드시 switch 문의 맨 마지막일 필요는 없음

 

break 키워드에 대한 더 자세한 사항은 자바스크립트 기타 제어문 수업에서 확인

자바스크립트 기타 제어문 수업 확인 =>

 

var x = 10;
switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.");
        break;
    case "string":
        document.write("변수 x의 타입은 문자열입니다.");
        break;
    case "object":
        document.write("변수 x의 타입은 객체입니다.");
        break;
    default:
        document.write("변수 x의 타입을 잘 모르겠네요...");
        break;
}
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Conditional Statement</title>
</head>

<body>

	<h1>switch 문</h1>

	<script>
		var x = 10;

		switch (typeof x) {
		case "number":
			document.write("변수 x의 타입은 숫자입니다.");
			break;
		case "string":
			document.write("변수 x의 타입은 문자열입니다.");
			break;
		case "object":
			document.write("변수 x의 타입은 객체입니다.");
			break;
		default:
			document.write("변수 x의 타입을 잘 모르겠네요...");
			break;
		}
	</script>
	
</body>

</html>

 

다음 예제는 case 절과 default 절에 break 키워드가 없을 때

var x = "문자열";
switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.<br>");
    case "string":
        document.write("변수 x의 타입은 문자열입니다.<br>");
    case "object":
        document.write("변수 x의 타입은 객체입니다.<br>");
    default:
        document.write("변수 x의 타입을 잘 모르겠네요...<br>");
}
JavaScript Conditional Statement

 

위의 예제에서 변수 x는 string 타입이므로, 두 번째 case 절의 document.write() 메소드가 맨 먼저 실행

하지만 break 키워드가 없으므로, 두 번째 case 절 이후에 나오는 모든 실행문이 모두 실행

 

따라서 case 절과 default 절은 반드시 break 키워드를 포함하고 있어야 정확하게 동작

 

여러 개의 case 절을 사용하여 여러 개의 조건을 한 번에 표현

var day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)
switch (day) {
    case 1: // 월요일인 경우
    case 2: // 화요일인 경우
    case 3: // 수요일인 경우
    case 4: // 목요일인 경우
    default: // 0부터 6까지의 값이 아닌 경우
        document.write("아직도 주말은 멀었네요... 힘내자구요!!");
        break;
    case 5: // 금요일인 경우
        document.write("오늘은 불금이네요!!");
        break;
    case 6: // 토요일인 경우
    case 0: // 일요일인 경우
        document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고에요!!");
        break;
}

 

참고

http://www.tcpschool.com/javascript/js_control_condition

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

'Javascript > TCP school' 카테고리의 다른 글

기타 제어문  (0) 2022.12.30
반복문  (0) 2022.12.30
기타 연산자  (0) 2022.12.28
비트 연산자  (0) 2022.12.28
논리 연산자  (0) 2022.12.28

관련글

티스토리툴바