“만약 나이가 20살 이상이면 성인, 아니면 미성년자”처럼 조건에 따라 다르게 동작하는 프로그램을 만들려면 어떻게 해야 할까요? 바로 조건문을 쓰면 됩니다. 근데 그 전에 먼저 비교하는 방법부터 알아야겠죠?

== 랑 === 차이 모르고 == 만 썼다가 “5” == 5 가 true 나와서 당황했던 기억이 나네요. 그때부터 무조건 === 만 씁니다.

연산자란?

연산자는 값을 계산하거나 비교하는 기호예요. 더하기(+), 빼기(-) 같은 거요.

산술 연산자

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로 취급):

• false
• 0
• "" (빈 문자열)
• null
• undefined
• NaN

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("환영합니다"); // 항상 실행됨!

중괄호 항상 쓰는 걸 추천합니다.

운영자 실전 노트

실제 프로젝트 진행하며 겪은 문제

• API에서 받은 숫자 문자열 “123”을 == 로 비교해서 의도치 않게 true 발생 → 모든 비교를 ===로 변경
• 사용자 입력값 타입 체크 없이 연산해서 NaN 에러 → Number()로 명시적 타입 변환 추가

이 경험을 통해 알게 된 점

• ==는 타입 강제 변환을 하기 때문에 예측 불가능한 결과가 나온다 (항상 === 사용)
• 타입 체크를 위해 typeof 연산자와 함께 isNaN(), Number.isInteger() 같은 헬퍼 함수 활용

다음 단계

다음 글에서는 반복문과 배열을 배운다. 같은 작업을 여러 번 반복하거나, 여러 개의 데이터를 한 번에 관리하는 방법을 알아볼 예정이다.

조건문 쓸 때는 항상 ===를 사용하고, 복잡한 조건은 함수로 빼서 이름을 붙인다. if (age >= 18 && hasLicense && !isSuspended) 보다는 if (canDrive(user))가 훨씬 읽기 쉽다.

---

JavaScript 독학 가이드 시리즈:

• 이전: JavaScript 독학 가이드 - 변수와 데이터 타입
• 다음: JavaScript 독학 가이드 - 반복문과 배열

← 블로그 목록으로