조건문(conditional statement)
조건문은 해당 수업 중 가장 중요한 부분이다. 컴퓨터가 계산기와 구분되는 가장 중요한 차이 중 하나이다.
그리고 조건문은 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것으로 우리가 만든 프로그램을 똑똑하게 만드는 것이다.
1. Boolean
조건문과 Boolean은 뗄레야 뗄 수 없는 관계인 만큼 아주 밀첩한 관계이다.
2. 조건문의 문법
2-1. if
조건문은 if로 시작한다. if 뒤에는 괄호가 나오고 그 괄호 안에는 true 혹은 false만 올 수 있다.
그리고 중괄호가 나오고 중괄호 구문에는 조건문의 내용이 들어온다.
[예시]
if(true){
alert('result : true');
}
if(false){
alert('result : true');
}
if 뒤에 따라오는 괄호 안에 true가 오면 중괄호 안의 내용이 실행되고, false이면 실행되지 않는다.
그렇기에 if와 Boolean은 뗄레야 뗄 수 없는 관계이다.
2-2. else
if 만으로는 조건문을 통해서 더 복잡한 상황을 처리하는데 부족하다.
if 문의 조건이 참이라면 if의 중괄호 구간이 실행되고, 거짓이라면 else의 중괄호 구간이 실행된다.
[예시]
if(true){
alert(1); // 실행됨
} else {
alert(2); // 실행되지 않음
}
[결과]
참일 때는 if 안의 내용만 실행되고 else 안의 내용은 실행되지 않는다.
2-3. else if
if 만으로는 조건문을 통해서 복잡한 현실의 문제를 해결하는 데에 어려움이 있기에 else if를 이용하여 좀 더 풍부하게 할 수 있다.
[예시]
if(false){
alert(1); // 실행되지 않음
} else if(true) {
alert(2); // 실행됨
} else if(true) {
alert(3); // 앞에서 실행됐기에 건너뛰므로 실행되지 않음
} else {
alert(4); // 역시 실행되지 않음
}
[결과]
2 출력
변수와 비교연산자
if(true)는 조건문답지 않은 코드이다. 다만 if 안쪽에 Boolean이 들어가는 것을 설명하기 위해 만든 코드이므로 실용적인 코드는 아니다.
그래서 조건문이라는 것과 변수가 결합하게 된다.
[예시]
a = 1;
if(a === 1) {
alert(1);
}
if 구문 안의 a의 값이 가변적인 변수로 바뀌었다. 그래서 변수를 바꾸므로써 if 안에 값이 true가 될 수 있고 false가 될 수 있다.
따라서 조건문은 상황에 따라서 다른 실행을 할 수 있게 되는 가변적으로 된다.
[실습]
alert(prompt('당신의 나이는?')); // prompt가 먼저 실행되고 입력한 값을 alert으로 띄워준다
[실습]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var id = prompt('아이디를 입력해주세요.');
if(id=='egoing'){
alert('아이디가 일치 합니다.');
} else {
alert('아이디가 일치하지 않습니다.');
}
</script>
</body>
</html>
[결과]
id에 입력한 값이 egoing이라면 '아이디가 일치합니다'라는 뜨고 일치하지 않다면 '아이디가 일치하지 않습니다'라고 뜰 것임
조건문의 중첩
조건문은 조건문 안에 또 다른 조건문을 넣을 수 있다.
비밀번호를 입력받는 코드를 만들어보자.
[실습]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var id = prompt('아이디를 입력해주세요.');
if(id=='egoing'){
var password = prompt('비밀번호를 입력해주세요');
if(password == '111111') {
alert('로그인 하셨습니다.');
} else {
alert('비밀번호가 일치하지 않습니다.');
}
} else {
alert('아이디가 일치하지 않습니다.');
}
</script>
</body>
</html>
[결과]
입력한 값과 아이디의 값이 일치하는지 확인 후 일치한다면 비밀번호를 입력으로 넘어간다.
비밀번호도 일치한다면 '로그인 하셨습니다.'라고 뜨고 그렇지 않다면 '비밀번호가 일치하지 않습니다.'라고 뜬다.
처음부터 아이디가 맞지 않는다면 '아이디가 일치하지 않습니다.'라고 뜬다.
논리연산자
논리연산자는 조건문을 좀더 간결하고 다양한 방법으로 구사할 수 있도록 도와준다.
1. &&(and / 그리고)
좌항과 우항이 모두 참일 때만 참이 되고 둘 중 하나라도 거짓이라면 거짓이 된다.
[실습]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var id = prompt('아이디를 입력해주세요.');
var password = prompt('비밀번호를 입력해주세요');
if(id=='egoing' && password == '111111') {
alert('로그인 하셨습니다. ' + id + '님 반갑습니다.');
} else {
alert('아이디가 일치하지 않습니다.');
}
</script>
</body>
</html>
[결과]
아이디와 비밀번호가 설정한 값과 일치하면 로그인이 됐음을 알리는 문구가 뜨고 그렇지 않다면 일치하지 않는다는 문구가 뜬다
2. ||(or / 또는)
좌항과 우항 중 하나라도 참이라면 참이 되는 논리 연산자이며 둘 다 거짓이라면 거짓이 된다.
[예제]
if(true || true){
alert(1); // 실행
}
if(true || false){
alert(2); // 실행
}
if(false || true){
alert(3); // 실행
}
if(false || false){
alert(4); // 실행되지 않음
}
[실습]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var id = prompt('아이디를 입력해주세요.');
var password = prompt('비밀번호를 입력해주세요');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111') {
alert('인증했습니다.');
} else {
alert('인증에 실패했습니다.');
}
</script>
</body>
</html>
[결과]
아이디의 값이 'egoing' or 'k8805' or 'sorialgi' 이고 비밀번호도 '111111' 이라면 인증했다고 알림이 뜨고 그렇지 않다면 실패했다고 알림이 뜬다.
3. !(not / 부정)
boolean의 값을 역전시킨다.
[예제]
if(!true && !true){ // false && false
alert(1); // 실행되지 않음
}
if(!false && !true){ // true && false
alert(2); // 실행되지 않음
}
if(!true && !false){ // false && true
alert(3); // 실행되지 않음
}
if(!false && !false){ // true && true
alert(4); // 실행
}
boolena의 대체제
조건문에서 if 다음 괄호 안에는 꼭 boolean만 들어가는 것은 아니다.
1. 0 / 1
이 방법은 사용하지 않는 것이 좋다.
[예제]
if(0){ // 0 = false
alert(1)
}
if(1){ // 1 = true
alert(2)
}
2. 기타 false로 간주하는 데이터 형
빈문자열, undefined, 변수에 값을 지정하지 않은 경우, null, NaN는 false로 간주된다.
[예제]
if(!''){ // 빈 문자열은 false로 간주하지만 앞에 !를 붙여주었기에 true로 변경
alert('빈 문자열'); // 실행
}
if(!undefined){ // undefined은 false로 간주하지만 앞에 !를 붙여주었기에 true로 변경
alert('undefined'); // 실행
}
var a; // 어떠한 값을 주어지지 않았기에 a는 undefined이다.
if(!a){ // a는 undefined로 false로 간주하지만 앞에 !를 붙여주었기에 true로 변경
alert('값이 할당되지 않은 변수'); // 실행
}
if(!null){ // null은 false로 간주하지만 앞에 !를 붙여주었기에 true로 변경
alert('null'); // 실행
}
if(!NaN){ // NaN은 false로 간주하지만 앞에 !를 붙여주었기에 true로 변경
alert('NaN'); // 실행
}
출처: 생활코딩
'개발이야기 > JavaScript' 카테고리의 다른 글
| 7. 함수 (0) | 2019.04.10 |
|---|---|
| 6. 반복문 (0) | 2019.03.08 |
| 4. 비교연산자 (0) | 2019.03.05 |
| 3. 변수/주석/세미콜론과 들여쓰기 (0) | 2019.03.05 |
| 2. 숫자와문자 (0) | 2019.03.05 |
