티스토리 뷰
1. 조건문의 의미
조건문(conditional statement)은 조건의 참과 거짓에 따라 실행할 코드를 선택하는 문법이다. 프로그램은 기본적으로 위에서 아래로 순서대로 실행되지만, 조건문을 사용하면 특정 상황에서만 코드를 실행하거나, 서로 다른 실행 경로를 선택할 수 있다.
예를 들어 사용자의 나이가 18세 이상이면 “성인”을 출력하고, 그렇지 않으면 “미성년자”를 출력할 수 있다.
let age = 20;
if (age >= 18) {
console.log("성인입니다.");
}위 코드에서 age >= 18은 조건식이다. age의 값이 20이므로 20 >= 18은 참이다. 따라서 중괄호 { } 안의 코드가 실행된다.
실행 결과는 다음과 같다.
성인입니다.2. Boolean 값
조건문을 이해하려면 먼저 불리언(Boolean) 값을 알아야 한다. Boolean은 참과 거짓을 나타내는 자료형이다. 자바스크립트에서 Boolean 값은 true 또는 false 두 가지뿐이다.
let isLogin = true;
let isAdult = false;- true는 참을 의미한다.
- false는 거짓을 의미한다.
비교 연산자는 Boolean 값을 만든다.
console.log(10 > 5);
console.log(10 < 5);true
false- 10 > 5는 참이므로 true이다.\
- 0 < 5는 거짓이므로 false이다.
조건문은 이 Boolean 값을 기준으로 실행 여부를 결정한다.
3. 비교식과 조건식
조건문 안에는 보통 비교식이 들어간다. 비교식은 두 값을 비교하여 true 또는 false를 만든다.
let score = 85;
console.log(score >= 80);truescore의 값은 85이고, 85 >= 80은 참이다. 따라서 결과는 true이다.
| 비교 | 의미 | 예 | 결과 |
| > | 크다 | 10 > 5 | true |
| < | 작다 | 10 < 5 | false |
| >= | 크거나 같다 | 10 >= 10 | true |
| <= | 작거나 같다 | 10 <= 5 | false |
| == | 값이 같다 | 5 == "5" | true |
| === | 값과 자료형이 같다 | 5 === "5" | false |
| != | 값이 같지 않다 | 5 != 3 | true |
| !== | 값 또는 자료형이 같지 않다 | 5 !== "5" | true |
조건문에서는 ==보다 ===를 사용하는 것이 더 명확하다. ===는 값뿐 아니라 자료형까지 함께 비교하기 때문이다.
console.log(5 == "5");
console.log(5 === "5");true
false5 === "5"는 숫자 5와 문자열 "5"의 자료형이 다르므로 거짓이 된다.
4. if 문
if 문은 조건이 참일 때만 코드 블록을 실행한다. 가장 기본적인 조건문이다.
if (조건식) {
조건식이 true일 때 실행할 코드
}예제는 다음과 같다.
let score = 90;
if (score >= 80) {
console.log("합격입니다.");
}합격입니다.score >= 80의 결과가 true이므로 중괄호 안의 코드가 실행된다.
조건이 거짓이면 코드 블록은 실행되지 않는다.
let score = 60;
if (score >= 80) {
console.log("합격입니다.");
}5. else 문
else 문은 if 조건이 거짓일 때 실행할 코드를 작성하는 문법이다. if만 사용하면 조건이 참일 때만 처리할 수 있지만, else를 함께 사용하면 참과 거짓의 두 경우를 모두 처리할 수 있다.
기본 형식은 다음과 같다.
if (조건식) {
조건식이 true일 때 실행할 코드
} else {
조건식이 false일 때 실행할 코드
}예제는 다음과 같다.
let score = 60;
if (score >= 80) {
console.log("합격입니다.");
} else {
console.log("재평가 대상입니다.");
}재평가 대상입니다.score >= 80의 결과가 false이므로 else 블록이 실행된다.
6. else if 문
조건이 두 개 이상일 때는 else if 문을 사용한다. 여러 조건을 순서대로 검사하고, 처음으로 참이 되는 코드 블록만 실행한다.
기본 형식은 다음과 같다.
if (조건식1) {
조건식1이 true일 때 실행할 코드
} else if (조건식2) {
조건식2가 true일 때 실행할 코드
} else {
모든 조건이 false일 때 실행할 코드
}점수에 따라 등급을 출력하는 예제는 다음과 같다.
let score = 85;
if (score >= 90) {
console.log("A 등급");
} else if (score >= 80) {
console.log("B 등급");
} else if (score >= 70) {
console.log("C 등급");
} else {
console.log("D 등급 이하");
}B 등급코드의 흐름은 다음과 같다.
score >= 90은 85 >= 90이므로 거짓이다.
score >= 80은 85 >= 80이므로 참이다.
따라서 "B 등급"이 출력된다.
한 조건이 참이 되면 그 아래의 else if와 else는 더 이상 실행되지 않는다.
7. 논리 연산자
논리 연산자(logical operator)는 여러 조건을 결합하거나 조건의 의미를 반대로 바꿀 때 사용한다. 자바스크립트의 대표적인 논리 연산자는 &&, ||, !이다.
| 논리 연산자 | 이름 | 의미 |
| && | AND | 두 조건이 모두 참이면 참 |
| ` | ` | |
| ! | NOT | 참은 거짓으로, 거짓은 참으로 바꿈 |
8. AND 연산자 &&
&&는 두 조건이 모두 참일 때만 전체 결과가 참이 된다.
let age = 20;
let hasTicket = true;
if (age >= 18 && hasTicket === true) {
console.log("입장할 수 있습니다.");
} else {
console.log("입장할 수 없습니다.");
}입장할 수 있습니다.age >= 18은 참이다.
hasTicket === true도 참이다.
두 조건이 모두 참이므로 전체 조건은 참이다.
다음 예제에서는 두 조건 중 하나가 거짓이다.
let age = 16;
let hasTicket = true;
if (age >= 18 && hasTicket === true) {
console.log("입장할 수 있습니다.");
} else {
console.log("입장할 수 없습니다.");
}입장할 수 없습니다.9. OR 연산자 ||
||는 두 조건 중 하나만 참이어도 전체 결과가 참이 된다.
let isMember = false;
let hasCoupon = true;
if (isMember === true || hasCoupon === true) {
console.log("할인을 받을 수 있습니다.");
} else {
console.log("할인을 받을 수 없습니다.");
}할인을 받을 수 있습니다.isMember === true는 거짓이다.
hasCoupon === true는 참이다.
두 조건 중 하나가 참이므로 전체 조건은 참이다.
10. NOT 연산자 !
!는 Boolean 값을 반대로 바꾼다. true는 false가 되고, false는 true가 된다.
let isLogin = false;
if (!isLogin) {
console.log("로그인이 필요합니다.");
}로그인이 필요합니다.isLogin은 false이다.
!isLogin은 true가 된다.
따라서 조건문 안의 코드가 실행된다.
!는 로그인 여부, 체크 여부, 숨김 여부와 같이 상태를 반대로 판단할 때 자주 사용된다.
11. 삼항 연산자
삼항 연산자(ternary operator)는 조건에 따라 두 값 중 하나를 선택하는 문법이다. if...else 문을 짧게 표현할 수 있다.
기본 형식은 다음과 같다.
조건식 ? 참일 때 값 : 거짓일 때 값예제는 다음과 같다.
let age = 20;
let result = age >= 18 ? "성인" : "미성년자";
console.log(result);실행 결과는 다음과 같다.
성인age >= 18이 참이면 "성인"이 선택되고, 거짓이면 "미성년자"가 선택된다.
위 코드는 다음 if...else 문과 같은 의미이다.
let age = 20;
let result;
if (age >= 18) {
result = "성인";
} else {
result = "미성년자";
}
console.log(result);삼항 연산자는 조건이 단순하고 결과값을 바로 변수에 저장할 때 적합하다.
let score = 75;
let message = score >= 60 ? "통과" : "미통과";
console.log(message);통과조건이 복잡하거나 실행할 코드가 여러 줄이면 삼항 연산자보다 if...else 문이 더 읽기 쉽다.
12. Nullish 병합 연산자 ??
삼항 연산자와 함께 자주 비교되는 조건 처리 방식으로 Nullish 병합 연산자(nullish coalescing operator)가 있다. ??는 왼쪽 값이 null 또는 undefined일 때 오른쪽 값을 선택한다.
let userName = null;
let displayName = userName ?? "이름 없음";
console.log(displayName);이름 없음userName이 null이므로 오른쪽 값인 "이름 없음"이 선택된다.
다음 예제에서는 왼쪽 값이 존재하므로 왼쪽 값이 사용된다.
let userName = "홍길동";
let displayName = userName ?? "이름 없음";
console.log(displayName);홍길동13. Optional Chaining ?.
옵셔널 체이닝(optional chaining)은 객체의 속성에 접근할 때, 중간 값이 null 또는 undefined이면 오류를 발생시키지 않고 undefined를 반환하는 문법이다.
const user = {
name: "홍길동",
address: {
city: "부산"
}
};
console.log(user.address?.city);부산user.address가 존재하므로 city 값을 가져온다.
다음 예제에서는 address가 없다.
const user = {
name: "홍길동"
};
console.log(user.address?.city);undefined14. switch 문
switch 문은 하나의 값을 여러 경우와 비교하여 실행할 코드를 선택하는 조건문이다. 값이 특정 경우 중 하나에 해당하는지 판단할 때 사용한다.
기본 형식은 다음과 같다.
switch (표현식) {
case 값1:
실행할 코드
break;
case 값2:
실행할 코드
break;
default:
일치하는 case가 없을 때 실행할 코드
}요일 번호를 요일 이름으로 바꾸는 예제는 다음과 같다.
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = "월요일";
break;
case 2:
dayName = "화요일";
break;
case 3:
dayName = "수요일";
break;
case 4:
dayName = "목요일";
break;
case 5:
dayName = "금요일";
break;
default:
dayName = "주말 또는 알 수 없는 값";
}
console.log(dayName);수요일day의 값이 3이므로 case 3의 코드가 실행된다.
break는 해당 case 실행 후 switch 문을 빠져나오게 한다.
default는 일치하는 case가 없을 때 실행된다.
15. break의 역할
switch 문에서 break가 없으면 일치한 case 아래의 코드가 계속 실행될 수 있다. 이를 fall-through라고 한다.
let day = 3;
switch (day) {
case 1:
console.log("월요일");
case 2:
console.log("화요일");
case 3:
console.log("수요일");
case 4:
console.log("목요일");
}실행 결과는 다음과 같다.
수요일
목요일case 3이 일치한 뒤 break가 없기 때문에 아래의 case 4 코드까지 실행된다.
각 경우를 독립적으로 처리하려면 break를 작성하여야 한다.
let day = 3;
switch (day) {
case 3:
console.log("수요일");
break;
case 4:
console.log("목요일");
break;
}수요일16. 여러 case에서 같은 코드 실행하기
여러 값이 같은 결과를 가져야 할 때는 case를 연속으로 작성할 수 있다.
let day = 6;
let result;
switch (day) {
case 1:
case 2:
case 3:
case 4:
case 5:
result = "평일";
break;
case 6:
case 7:
result = "주말";
break;
default:
result = "알 수 없는 값";
}
console.log(result);실행 결과는 다음과 같다.
주말case 6과 case 7은 같은 실행 결과를 공유한다. 이처럼 여러 경우를 같은 범주로 묶을 수 있다.
17. if 문과 switch 문의 차이
if 문은 조건식이 자유롭다. 크기 비교, 범위 비교, 논리 연산 등 다양한 조건을 만들 수 있다.
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C 이하");
}switch 문은 하나의 값이 어떤 경우에 해당하는지 비교할 때 구조가 명확하다.
let menu = "coffee";
switch (menu) {
case "coffee":
console.log("커피를 선택하였습니다.");
break;
case "tea":
console.log("차를 선택하였습니다.");
break;
default:
console.log("메뉴를 선택하지 않았습니다.");
}정리하면, 범위나 복잡한 조건은 if...else if...else 문이 적합하고, 하나의 값이 여러 고정 값 중 무엇인지 판단할 때는 switch 문이 적합하다.
18. 종합 예제: 로그인 상태와 등급 확인
다음 예제는 Boolean, 비교 연산자, 논리 연산자, if...else if...else 문을 함께 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript if</title>
</head>
<body>
<h1>조건문 예제</h1>
<p id="result"></p>
<script>
const isLogin = true;
const userLevel = "member";
const orderPrice = 60000;
let message;
if (!isLogin) {
message = "로그인이 필요합니다.";
} else if (userLevel === "vip" || orderPrice >= 50000) {
message = "할인 혜택을 받을 수 있습니다.";
} else {
message = "일반 결제 대상입니다.";
}
document.getElementById("result").innerHTML = message;
</script>
</body>
</html>코드의 흐름은 다음과 같다.
isLogin은 로그인 여부를 저장하는 Boolean 값이다.
!isLogin은 로그인하지 않은 상태인지 확인한다.
userLevel === "vip"는 사용자의 등급이 VIP인지 확인한다.
orderPrice >= 50000은 주문 금액이 50,000원 이상인지 확인한다.
||는 두 조건 중 하나 이상이 참인지 확인한다.
실행 결과는 다음과 같다.
할인 혜택을 받을 수 있습니다.isLogin은 true이므로 첫 번째 조건은 실행되지 않는다.
userLevel === "vip"는 거짓이지만, orderPrice >= 50000은 참이다.
|| 연산자는 둘 중 하나만 참이어도 참이므로 할인 문구가 출력된다.
19. 종합 예제: 요일별 안내 문구
다음 예제는 switch 문을 사용하여 요일별 안내 문구를 출력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript switch</title>
</head>
<body>
<h1>요일 안내</h1>
<p id="result"></p>
<script>
const day = 5;
let message;
switch (day) {
case 1:
message = "월요일입니다. 한 주가 시작됩니다.";
break;
case 2:
case 3:
case 4:
message = "평일입니다. 일정을 확인합니다.";
break;
case 5:
message = "금요일입니다. 주간 작업을 마무리합니다.";
break;
case 6:
case 7:
message = "주말입니다.";
break;
default:
message = "올바르지 않은 요일 값입니다.";
}
document.getElementById("result").innerHTML = message;
</script>
</body>
</html>금요일입니다. 주간 작업을 마무리합니다.day의 값은 5이므로 case 5가 실행된다. break를 만나면 switch 문이 종료된다.
20. 핵심 정리
조건문은 조건의 참과 거짓에 따라 실행할 코드를 선택하는 문법이다. 조건문의 판단 결과는 Boolean 값인 true 또는 false로 표현된다.
if 문은 조건이 참일 때만 코드를 실행한다. else 문은 조건이 거짓일 때 실행할 코드를 작성한다. 조건이 여러 개이면 else if 문을 사용하여 순서대로 검사한다.
논리 연산자는 여러 조건을 결합할 때 사용한다. &&는 두 조건이 모두 참일 때 참이고, ||는 두 조건 중 하나 이상이 참일 때 참이다. !는 참과 거짓을 반대로 바꾼다.
삼항 연산자 ? :는 단순한 조건 판단을 짧게 표현할 때 사용한다. 조건식 ? 참일 때 값 : 거짓일 때 값의 형태로 작성한다. ??는 값이 null 또는 undefined일 때 기본값을 지정하는 데 사용하고, ?.는 객체 속성 접근 과정에서 오류를 줄이는 데 사용한다.
switch 문은 하나의 값이 여러 경우 중 어느 경우에 해당하는지 선택할 때 사용한다. 각 case는 비교할 값을 나타내며, break는 해당 경우를 실행한 뒤 switch 문을 종료한다. default는 일치하는 경우가 없을 때 실행된다.
- Total
- Today
- Yesterday
- python
- pygame
- 파이썬 기초
- 파이썬
- 텍스트마이닝
- 라이브러리
- 텍스트 마이닝
- HCI
- UX
- 스마트기술
- UI
- 컴퓨팅사고력
- Idle
- 자바스크립트
- 파이썬기초
- 안드로이드
- matplotlib
- 프로토타입
- Text Mining
- 데이터R지
- 초보자를 위한 텍스트마이닝
- 휴리스틱평가
- 피그마
- 데이타R지
- figma
- 4차산업혁명
- 관계자분석
- 챗GPT
- 챗봇
- HIG
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 29 | 30 | 31 |