JavaScript 독학 가이드 3 - 연산자와 조건문
“만약 나이가 20살 이상이면 성인, 아니면 미성년자”처럼 조건에 따라 다르게 동작하는 프로그램을 만들려면 어떻게 해야 할까요? 바로 조건문을 쓰면 됩니다. 근데 그 전에 먼저 비교하는 방법부터 알아야겠죠?
연산자란?
연산자는 값을 계산하거나 비교하는 기호예요. 더하기(+), 빼기(-) 같은 거요.
산술 연산자
let a = 10;
let b = 3;
console.log(a + b); // 13 (덧셈)
console.log(a - b); // 7 (뺄셈)
console.log(a * b); // 30 (곱셈)
console.log(a / b); // 3.333... (나눗셈)
console.log(a % b); // 1 (나머지)
console.log(a ** b); // 1000 (거듭제곱: 10³)
실행 결과:
나머지(%) 어디에 쓰나요?
- 짝수/홀수 판별:
number % 2 === 0(짝수면 true) - 3의 배수 판별:
number % 3 === 0 - 순환 구조: 인덱스가 배열 길이 넘어가면 처음으로
증감 연산자
let count = 0;
count++; // count = count + 1
console.log(count); // 1
count--; // count = count - 1
console.log(count); // 0
실행 결과:
카운터 만들 때 엄청 많이 씁니다.
비교 연산자
let age = 20;
console.log(age > 18); // true (크다)
console.log(age < 18); // false (작다)
console.log(age >= 20); // true (크거나 같다)
console.log(age <= 19); // false (작거나 같다)
console.log(age === 20); // true (같다)
console.log(age !== 19); // true (같지 않다)
실행 결과:
=== vs ==:
console.log(5 == "5"); // true (값만 비교)
console.log(5 === "5"); // false (값과 타입 모두 비교)
실행 결과:
항상 ===를 쓰세요! ==는 예상 못한 결과가 나올 수 있어요.
논리 연산자
여러 조건을 조합할 때 씁니다.
let age = 25;
let hasLicense = true;
// && (and): 둘 다 true여야 true
console.log(age >= 18 && hasLicense); // true
// || (or): 하나만 true여도 true
console.log(age >= 18 || hasLicense); // true
// ! (not): true를 false로, false를 true로
console.log(!hasLicense); // false
실행 결과:
실전 예제:
let age = 17;
let hasParentConsent = true;
// 18살 이상이거나, 부모 동의가 있으면 가입 가능
let canSignup = age >= 18 || hasParentConsent;
console.log(canSignup); // true
실행 결과:
if문 - 조건 분기
가장 기본적인 조건문입니다.
기본 형태
let age = 20;
if (age >= 18) {
console.log("성인입니다");
}
실행 결과:
조건이 true면 중괄호 {} 안의 코드가 실행돼요.
if-else
let age = 15;
if (age >= 18) {
console.log("성인입니다");
} else {
console.log("미성년자입니다");
}
// 출력: 미성년자입니다
실행 결과:
조건이 false면 else 블록이 실행됩니다.
if-else if-else
여러 조건을 체크할 때 씁니다.
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("F학점");
}
// 출력: B학점
실행 결과:
위에서부터 순서대로 체크하고, 처음으로 true인 블록만 실행돼요.
중첩 if문
if문 안에 if문을 넣을 수 있어요.
let age = 20;
let hasTicket = true;
if (age >= 18) {
if (hasTicket) {
console.log("입장 가능합니다");
} else {
console.log("티켓이 필요합니다");
}
} else {
console.log("성인만 입장 가능합니다");
}
근데 너무 깊어지면 읽기 어려우니까, 논리 연산자로 합치는 게 나아요.
if (age >= 18 && hasTicket) {
console.log("입장 가능합니다");
}
삼항 연산자
간단한 조건문은 한 줄로 줄일 수 있어요.
let age = 20;
let message = age >= 18 ? "성인" : "미성년자";
console.log(message); // "성인"
실행 결과:
형식: 조건 ? 참일 때 값 : 거짓일 때 값
if-else보다 짧지만, 복잡한 로직엔 비추천이에요.
switch문
여러 경우의 수를 처리할 때 if문보다 깔끔합니다.
let day = "월요일";
switch (day) {
case "월요일":
console.log("월요병...");
break;
case "금요일":
console.log("불금!");
break;
case "토요일":
case "일요일":
console.log("주말!");
break;
default:
console.log("평일입니다");
}
실행 결과:
주의: break 안 쓰면 아래 케이스도 계속 실행돼요!
let num = 2;
switch (num) {
case 1:
console.log("하나");
case 2:
console.log("둘");
case 3:
console.log("셋");
}
// 출력: 둘, 셋 (break가 없어서 계속 실행됨)
실행 결과:
실전 예제
1. 로그인 체크
let username = "admin";
let password = "1234";
if (username === "admin" && password === "1234") {
console.log("로그인 성공!");
} else {
console.log("아이디 또는 비밀번호가 틀렸습니다");
}
실행 결과:
2. 할인 계산
let price = 50000;
let isMember = true;
let finalPrice;
if (isMember) {
finalPrice = price * 0.9; // 10% 할인
} else {
finalPrice = price;
}
console.log(`최종 가격: ${finalPrice}원`);
실행 결과:
3. 계절 판별
let month = 3;
let season;
if (month >= 3 && month <= 5) {
season = "봄";
} else if (month >= 6 && month <= 8) {
season = "여름";
} else if (month >= 9 && month <= 11) {
season = "가을";
} else {
season = "겨울";
}
console.log(`${month}월은 ${season}입니다`);
실행 결과:
Truthy와 Falsy
JavaScript에서는 true/false가 아닌 값도 조건문에 쓸 수 있어요.
Falsy 값 (false로 취급):
false0""(빈 문자열)nullundefinedNaN
Truthy 값 (true로 취급):
- 위 6개 빼고 전부!
let name = "";
if (name) {
console.log("이름이 있습니다");
} else {
console.log("이름을 입력하세요");
}
// 출력: 이름을 입력하세요 (빈 문자열은 falsy)
실행 결과:
자주 하는 실수
1. = 하나만 쓰기
let age = 20;
if (age = 18) { // 틀림! (할당 연산자)
console.log("18살");
}
if (age === 18) { // 맞음! (비교 연산자)
console.log("18살");
}
2. 조건문 끝에 세미콜론
if (age >= 18); { // 틀림! 세미콜론 있으면 안 됨
console.log("성인");
}
3. 중괄호 생략의 함정
// 한 줄이면 중괄호 생략 가능
if (age >= 18)
console.log("성인");
// 근데 이렇게 하면?
if (age >= 18)
console.log("성인");
console.log("환영합니다"); // 항상 실행됨!
중괄호 항상 쓰는 걸 추천합니다.
다음 단계
다음 글에서는 반복문과 배열을 배웁니다. 같은 작업을 여러 번 반복하거나, 여러 개의 데이터를 한 번에 관리하는 방법을 알아볼 거예요.
조건문은 프로그래밍의 핵심이에요. “만약 ~라면”이라는 논리를 코드로 표현하는 거거든요. 연습 많이 하세요!
JavaScript 독학 가이드 시리즈:
← 블로그 목록으로