자바스크립트 튜토리얼 10 | 제어문 | if, if ... else if, if else 제어문
제어문은 프로그램의 흐름을 조절하는 기능을 한다.
학창시절 flow chart 를 배울 때 나오는 조건 분기문이다.
제어문이라고 너무 어렵게 생각할 필요는 없다. 아래 그림처럼 단순한 원리로 작동한다.
'되냐? 안되냐?' 그것을 물어보는 것이다. 지나친 단순화라고 생각할 수도 있지만 이와 같은 질문을 한번이 아니라 여러번에 걸쳐서 하면 중첩 제어문이 되고 반복문(for, while)에 끼워넣으면 반복문의 조건이 되고 반복문의 중간에 break와 continue와 같이 사용하면 흐름 제어가 된다.
스무고개라는 놀이가 있다. 한 사람이 마음속에 떠올린 것이 무엇인지 아무 힌트도 없이 예/아니오의 대답을 들을 수 있는 20번의 질문을 하면서 알아내는 게임이다.
이 게임의 재미는 한 사람에게 20번 질문하는 사이 그 사람이 마음속 생각까지 알아낼 수 있다는 발상에 있다. 흥미로운 것은 인공지능의 사고와 유사하다는 것이다. 자신의 데이터 베이스와 네트워크의 빅데이터에 접속하여 답이 나올 때까지 질문을 한다. 인간에게 스무번은 긴 질문이지만 컴퓨터는 조건식과 입력값만 주어지면 1초도 안되는 시간에 스무번이 아니라 수억번도 질문하여 답을 낼 수 있다. 아직은 질문하고 답을 내는 능력이 인간에게 미치지는 못하지만 학습을 하는 단계에 있기 때문에 곧 인간에게 의미있는 답을 낼 가능성도 있다.
if 제어문
제어문에 관한 프로그래밍 교재들을 보면 거의 비슷하게 설명이 되있다. 그도 그럴 것이 C언어 스타일을 계승하거나 변형한 형태가 대부분이라서 그렇다. 자바스크립트도 이 부분에서는 C언어와 유사하다.
if 제어문부터 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="heading">자바스크립트 예제</h1>
<script>
var num = prompt("숫자를 입력하세요");
if (num > 0) {
document.write("0보다 큽니다.")
}
else if (num == 0){
document.write("0입니다.")
}
else {
document.write("0보다 작습니다.")
}
</script>
</body>
</html>
if 문은 조건문을 분석하여 조건문이 참이면 중괄호의 코드블록을 실행한다. if 문은 단독으로 사용가능하다. 실행될 수 있기도 없기도 하다.
if (조건문) {
조건 성립시 실행;
}
if else 문은 if 조건문이 참이면 실행 거짓이면 else 의 중괄호 코드블록을 실행한다. if문이나 else문 하나는 실행된다.
if (조건문) {
조건 성립시 실행;
} else {
조건 성립안되면 실행;
}
if ... else if 문은 첫번째 if 조건문이 실행되지 않았을 경우 조건문을 검사하여 참이면 코드블록을 실행한다. 하나도 실행되지 않을 수 있다.
if (조건문) {
조건 성립시 실행;
} else if (조건문) {
조건 성립시 실행;
}
if ... else if else if 체인은 몇 개라도 상관없이 추가할 수 있다. 단 이런 경우 코드 가독성이 떨어진다. 이런 경우를 위해 switch case 문이 존재한다. (switch case 문의 특별난 기능이 없어보여도 가독성이 else if 보다 좋다.
if (조건문) {
조건 성립시 실행;
} else if (조건문) {
조건 성립시 실행;
} else if (조건문) {
조건 성립시 실행;
} else if (조건문) {
조건 성립시 실행;
} else if (조건문) {
조건 성립시 실행;
}
if ... else if else 문은 if 조건문 검사 후 실행되면 종료, 실행되지 않으면 else if 문을 검사하고 여기서도 실행되지 않으면 else 문이 실행된다. 하나의 문장이 실행되면 전체 if문 체인을 종료한다. 중간의 else if 체인은 몇개를 넣어도 상관이 없다.
if (조건문) {
조건 성립시 실행;
} else if (조건문) {
조건 성립시 실행;
} else {
조건 성립안되면 실행;
}
*조건문
조건문, 조건식이라고 한다. 조건식은 비교식 > < 과 같이 ... 보다 크다 ... 보다 작다 가 될 수 있으며 비교연산자 논리연산자 또는 일반 표현식으로 true 참값 혹은 false 거짓값을 반환한다. if 문은 true 참값이면 코드블록을 실행 false 거짓값이면 코드블록을 건너 뛴다. 심플하다.
비교연산자
아래 연산자는 조건문에 사용하는 비교연산자와 비교식이다. if 문은 반환값을 기준으로 블록의 실행여부를 결정한다.
| 조건 | 연산자 | 비교식 | 반환값 |
| a = 3, b = 5 인 경우 | < | a < b | true |
| == | a == b | false | |
| != | a != b | true | |
| > | a > b | false | |
| <= | a <= b | true | |
| >= | a >= b | false |
논리연산자
논리연산자는 논리게이트의 그 논리식이다. 기본 OR, AND, NOT을 제공한다.
| 조건 | 연산자 | 논리식 | 반환값 |
| a = 7 , b = 99 경우 | OR || | a > 5 || b < 50 | true |
| AND && | a > 5 && b > 77 | true | |
| NOT ! | ! (a < 5) | true |
이것은 프로그래밍에서 구현하는 것도 좋지만 논리회로의 원리를 알아야 제대로 사용할 수 있다.
논리회로 AND, OR, NAND, NOR, XOR, XNOR (tistory.com)
논리회로 AND, OR, NAND, NOR, XOR, XNOR
논리회로는 컴퓨터를 학습하다 보면 언젠가 알아야 하는 것이다. 다지털 논리회로의 작동원리이며 컴퓨터는 0과 1로 이루어져 있다는 말을 할 때의 근거로 사용된다. XOR 게이트 하나만 사용해서
digiconfactory.tistory.com
* 일반 표현식의 경우
if 조건문에서 일반 표현식의 경우 예외같이 사용하는 값이 있다. 이것은 자바스크립트 언어에서 정한 규칙이라 보면 된다.
- 0은 false 로 처리한다.
- "" 빈문자열은 false 로 처리한다
- null 유요하지 않은 값은 false로 처리한다.
- 정수값, 실수값 처럼 값이 있으면 true이다.
- 문자열은 true이다
* 예제 홀수와 짝수 판별하기
if 문과 함께 사용하면 비로소 나머지 연산자 % 의 유용성을 알게 된다. 홀수, 짝수, ...의 배수 등을 쉽게 구할 수 있다. 난수 생성의 범위를 지정하는데도 쓰이는 등 쓸모가 많다.
<script>
var num = prompt("숫자를 입력하세요");
if (num % 2 == 1) {
document.write(num + "은 홀수입니다")
}
else {
document.write(num + "은 짝수입니다")
}
</script>
여기까지 숙지했다면 이제 프로그램의 흐름을 제어할 수 있다.
