제어문
프로그램 내에서 주어진 조건식의 결과에 따라 명령을 수행하도록 하는 문법
조건문
조건을 제시하는 식 → 결과가 참 또는 거짓 둘 중 하나로 나오는 식
조건에 따라 경우의 수를 나눌 때
프로그램의 흐름을 여러갈래로 나눌 때 (사용자에게 선택지를 준다)
특정 상태를 물어볼 때(값이 있니, 체크박스가 체크되어 있니)
Boolean 타입
참/거짓 → true / false
- 값을 확인할 때
- 값이 존재하는지 확인할 때
-
if / else if/ ~else
if문 조건식 자리에 boolean 타입이 아닌 변수 하나만 쓰는 경우
해당 변수의 값이 존재한다면 true, 아니라면 false
<!DOCTYPE html>
<html lang="en">
<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>if문</title>
</head>
<body>
<script>
let age = 14;
if (age >= 20) {
alert("성인인증 완료");
} else if (age >= 13) {
alert("청소년 입니다");
} else {
alert("어린이는 보호자와 함께 이용해주세요");
}
// early return if → 함수안에서 사용해야 한다.
// if (age >= 13) {
// return alert("청소년입니다.");
// }
age = null;
// 0.은 false
age = 0;
age = parseInt(0);
if (age) {
console.log("사용자 정보가 확인 되었습니다.");
} else {
console.log("사용자 정보가 인증되지 않았습니다.");
}
</script>
</body>
</html>
-
early return if문
else를 쓰지 않아야하는 이유는 스타일상의 문제뿐만 아니라, 반전된 로직을 작성하게 되는 논리적 위험이 있기 때문이다. Early Return으로 코드를 분리하면 로직은 변함이 없으면서 가독성이 좋고 더 명시적인 코드로 리팩토링 할 수 있다.
장점:
1. 들여쓰기의 깊이가 줄어들어 코드를 더욱 읽기 쉽게 만든다.
2. 코드를 읽을 때 return을 발견하면 더 아래쪽 코드를 확인하지 않아도 된다.
3. 코드의 더 아래쪽에서 의도하지 않는 값의 변화를 방지할 수 있다.
const checkValue = (value) => {
if (value > 0) {
return console.log('값은 0보다 크다.');
}
console.log('값은 0보다 작거나 같다.');
};
-
switch ~ case ~ default
if문이랑 비슷, 경우의 수가 변수에 담긴 값의 따라 나뉠 때 사용
변수에 담긴 값에 알맞은 case 내용을 실행
<!DOCTYPE html>
<html lang="en">
<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>switch문</title>
</head>
<body>
<script>
let age = 14;
let result;
if (age >= 20) {
result = "성인";
} else if (age >= 13) {
result = "청소년";
} else {
result = "어린이";
}
switch (result) {
case "성인":
console.log("성인입니다.");
break;
case "청소년":
console.log("청소년입니다.");
break;
case "어린이":
console.log("어린이입니다.");
default:
console.log("잘못 입력했습니다.");
}
</script>
</body>
</html>
삼항연산자
조건식 ? 값1 : 값2
조건식이 true야? true면 값1을 실행 false면 값2를 실행
- 조건식 && 값1
조건식이 true면 값을 보여주어라
→ 조건식 ? 값1 : null
<!DOCTYPE html>
<html lang="en">
<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>삼항연산자</title>
</head>
<body>
<script>
let num = 0;
if (num > 4) {
console.log("1", "참");
} else {
console.log("2", "거짓");
}
num > 4 ? console.log("참") : console.log("거짓");
num > 4
? console.log("참")
: num < 2
? console.log("참")
: console.log("거짓");
// 아무것도 실행이 되지 않는다.
num > 4 && console.log("참");
num && console.log("참");
</script>
</body>
</html>
퀴즈
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
let name = prompt("이름을 입력하세요");
let kor = Number(prompt("국어 점수"));
let math = Number(prompt("수학 점수"));
let eng = Number(prompt("영어 점수"));
let tam = Number(prompt("탐구 점수"));
let avg = (kor + math + eng + tam) / 4;
if (avg >= 90) {
alert("A학점");
} else if (avg >= 80) {
alert("B학점");
} else if (avg >= 70) {
alert("C학점");
} else if (avg >= 60) {
alert("D학점");
} else {
alert("F학점");
}
document.write("이름 : " + name + "<br>");
document.write("국어점수 : " + kor + "<br>");
document.write("수학점수 : " + math + "<br>");
document.write("영어점수 : " + eng + "<br>");
document.write("탐구점수 : " + tam + "<br>");
document.write("평균 : " + avg + "<br>");
</script>
</body>
</html>
발전하기 위한 공부