JavaScript 독학 가이드 3 - 연산자와 조건문

learning by Seven Fingers Studio 16분
JavaScript연산자조건문if문switch문프로그래밍

“만약 나이가 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³)

실행 결과:

> console.log(a + b)
13
> console.log(a - b)
7
> console.log(a * b)
30
> console.log(a / b)
3.3333333333333335
> console.log(a % b)
1
> console.log(a ** b)
1000

나머지(%) 어디에 쓰나요?

  • 짝수/홀수 판별: 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

실행 결과:

> count++
> console.log(count)
1
> count--
> 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 (같지 않다)

실행 결과:

> 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 (값과 타입 모두 비교)

실행 결과:

> 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

실행 결과:

> console.log(age >= 18 && hasLicense)
true
> console.log(age >= 18 || hasLicense)
true
> console.log(!hasLicense)
false

실전 예제:

let age = 17;
let hasParentConsent = true;

// 18살 이상이거나, 부모 동의가 있으면 가입 가능
let canSignup = age >= 18 || hasParentConsent;
console.log(canSignup); // true

실행 결과:

> let canSignup = age >= 18 || hasParentConsent
> console.log(canSignup)
true

if문 - 조건 분기

가장 기본적인 조건문입니다.

기본 형태

let age = 20;

if (age >= 18) {
    console.log("성인입니다");
}

실행 결과:

> if (age >= 18) { console.log("성인입니다") }
성인입니다

조건이 true면 중괄호 {} 안의 코드가 실행돼요.

if-else

let age = 15;

if (age >= 18) {
    console.log("성인입니다");
} else {
    console.log("미성년자입니다");
}
// 출력: 미성년자입니다

실행 결과:

> if (age >= 18) { console.log("성인입니다") } else { console.log("미성년자입니다") }
미성년자입니다

조건이 falseelse 블록이 실행됩니다.

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학점

실행 결과:

> let score = 85
> if (score >= 90) { ... } else if (score >= 80) { console.log("B학점") } ...
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); // "성인"

실행 결과:

> 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("평일입니다");
}

실행 결과:

> switch (day) { case "월요일": console.log("월요병...") ... }
월요병...

주의: break 안 쓰면 아래 케이스도 계속 실행돼요!

let num = 2;

switch (num) {
    case 1:
        console.log("하나");
    case 2:
        console.log("둘");
    case 3:
        console.log("셋");
}
// 출력: 둘, 셋 (break가 없어서 계속 실행됨)

실행 결과:

> switch (num) { case 1: ... case 2: console.log("둘") case 3: ... }
⚠️ break가 없어서 다음 case도 실행됨!

실전 예제

1. 로그인 체크

let username = "admin";
let password = "1234";

if (username === "admin" && password === "1234") {
    console.log("로그인 성공!");
} else {
    console.log("아이디 또는 비밀번호가 틀렸습니다");
}

실행 결과:

> if (username === "admin" && password === "1234") { ... }
로그인 성공!

2. 할인 계산

let price = 50000;
let isMember = true;

let finalPrice;

if (isMember) {
    finalPrice = price * 0.9; // 10% 할인
} else {
    finalPrice = price;
}

console.log(`최종 가격: ${finalPrice}원`);

실행 결과:

> console.log(`최종 가격: ${finalPrice}원`)
최종 가격: 45000원

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}입니다`);

실행 결과:

> console.log(`${month}월은 ${season}입니다`)
3월은 봄입니다

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)

실행 결과:

> let name = ""
> if (name) { ... } else { console.log("이름을 입력하세요") }
이름을 입력하세요

자주 하는 실수

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 독학 가이드 시리즈:

← 블로그 목록으로