조건문으로 상황에 맞게 반응하기

왜 조건문이 필요한가

지금까지의 코드는 위에서 아래로 차례대로 실행되었습니다. 가격을 계산하고, 문장을 만들고, 콘솔에 출력했습니다.

하지만 실제 웹페이지는 늘 같은 일만 하지 않습니다.

• 입력칸이 비어 있으면 "이름을 입력해 주세요"라고 알려 줍니다.

• 주문 금액이 30,000원 이상이면 배송비를 무료로 바꿉니다.

• 비밀번호가 너무 짧으면 가입을 막습니다.

• 사용자가 선택한 메뉴에 따라 다른 화면을 보여 줍니다.

이처럼 상황에 따라 다른 코드를 실행할 때 조건문을 씁니다.

조건문은 컴퓨터에게 이렇게 말하는 문장입니다.

만약 이 조건이 맞다면, 이 코드를 실행해 줘.

자바스크립트에서는 이 문장을 if로 씁니다.

AI 생성 이미지

if 문을 문장처럼 읽기

브라우저 콘솔에 아래 코드를 입력해 보세요.

let age = 20;

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

이 코드는 이렇게 읽을 수 있습니다.

만약 age가 19보다 크거나 같다면, "성인입니다."를 출력한다.

if 뒤의 괄호 안에는 조건식이 들어갑니다.

age >= 19

조건식은 컴퓨터가 true 또는 false로 판단할 수 있는 질문입니다.

console.log(age >= 19);

age가 20이면 20 >= 19는 맞는 말이므로 true입니다. 그래서 중괄호 { } 안의 코드가 실행됩니다.

이번에는 값을 바꿔 보겠습니다.

age = 15;

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

이번에는 아무것도 출력되지 않습니다. 15 >= 19는 false이기 때문입니다. 조건이 맞지 않으면 중괄호 안으로 들어가지 않습니다.

여기서 중괄호는 "조건이 맞을 때 실행할 코드 묶음"입니다.

if (조건식) {
  // 조건이 true일 때 실행할 코드
}

if 문을 처음 볼 때는 괄호와 중괄호가 조금 낯설 수 있습니다. 하지만 문장으로 읽으면 어렵지 않습니다.

• if는 "만약"입니다.

• (조건식)은 "무엇을 확인할지"입니다.

• { } 안은 "조건이 맞으면 무엇을 할지"입니다.

비교 연산자로 조건 만들기

조건식에는 값을 비교하는 기호가 자주 들어갑니다. 이런 기호를 비교 연산자라고 부릅니다. 연산자는 계산이나 비교를 하게 해 주는 기호입니다.

예를 들어 주문 금액이 30,000원 이상인지 확인하고 싶다면 이렇게 쓸 수 있습니다.

const orderPrice = 35000;

if (orderPrice >= 30000) {
  console.log("무료 배송 대상입니다.");
}

비밀번호 길이를 확인할 때도 같은 방식입니다.

const passwordLength = 6;

if (passwordLength < 8) {
  console.log("비밀번호는 8자 이상이어야 합니다.");
}

조건문은 특별한 상황에서만 쓰는 문법이 아닙니다. "이 값이 충분히 큰가?", "이 칸이 비어 있지 않은가?", "이 사용자가 관리자일까?"처럼 프로그램이 스스로 판단해야 할 때 계속 등장합니다.

=와 ===는 다릅니다

초보자가 자주 헷갈리는 기호가 있습니다.

const userName = "민지";

console.log(userName === "민지");

값이 같은지 비교할 때는 ===를 씁니다. 등호가 세 개입니다.

반대로 =는 값을 넣을 때 씁니다.

const userName = "민지";

이 코드는 userName에 "민지"라는 값을 넣는 코드입니다. "같은지 물어보는 코드"가 아닙니다.

둘을 말로 구분하면 더 쉽습니다.

• =: 오른쪽 값을 왼쪽 이름에 넣는다

• ===: 왼쪽과 오른쪽이 같은지 비교한다

그래서 조건문 안에서는 보통 ===를 사용합니다.

const selectedMenu = "coffee";

if (selectedMenu === "coffee") {
  console.log("커피 메뉴를 선택했습니다.");
}

자바스크립트에는 ==라는 비교 기호도 있지만, 처음 배울 때는 되도록 ===를 쓰는 습관을 들이는 편이 좋습니다. ===는 값이 같은지 더 분명하게 비교해 주기 때문에 예상하지 못한 결과를 줄이는 데 도움이 됩니다.

조건이 맞지 않을 때는 else

지금까지는 조건이 맞을 때만 코드를 실행했습니다. 그런데 실제로는 조건이 맞지 않을 때도 무언가를 해야 하는 경우가 많습니다.

예를 들어 나이가 19세 이상이면 "성인입니다."라고 알려 주고, 그렇지 않으면 "미성년자입니다."라고 알려 주고 싶을 수 있습니다.

이럴 때 else를 사용합니다.

let visitorAge = 15;

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

이 코드는 이렇게 읽을 수 있습니다.

만약 visitorAge가 19보다 크거나 같다면 "성인입니다."를 출력한다. 그렇지 않다면 "미성년자입니다."를 출력한다.

else는 "그렇지 않다면"이라는 뜻으로 생각하면 됩니다.

if (조건식) {
  // 조건이 true일 때 실행할 코드
} else {
  // 조건이 false일 때 실행할 코드
}

중요한 점은 둘 중 하나만 실행된다는 것입니다. 조건이 true이면 if 쪽 코드가 실행되고, 조건이 false이면 else 쪽 코드가 실행됩니다.

여러 상황을 나누고 싶을 때는 else if

상황이 두 가지보다 많을 때도 있습니다.

예를 들어 점수에 따라 메시지를 다르게 보여 주고 싶다고 해 보겠습니다.

• 90점 이상이면 "아주 잘했어요!"

• 70점 이상이면 "좋아요!"

• 그보다 낮으면 "조금 더 연습해 봐요."

이럴 때는 else if를 사용합니다.

const score = 82;

if (score >= 90) {
  console.log("아주 잘했어요!");
} else if (score >= 70) {
  console.log("좋아요!");
} else {
  console.log("조금 더 연습해 봐요.");
}

컴퓨터는 위에서 아래로 조건을 확인합니다.

1. score >= 90인지 먼저 봅니다.

2. 아니면 score >= 70인지 봅니다.

3. 그것도 아니면 마지막 else를 실행합니다.

여기서 score는 82입니다. 90점 이상은 아니지만 70점 이상은 맞습니다. 그래서 "좋아요!"가 출력됩니다.

else if를 쓸 때는 순서가 중요합니다. 더 구체적이거나 더 높은 기준을 먼저 쓰는 경우가 많습니다.

아래처럼 순서를 바꾸면 원하는 결과가 나오지 않을 수 있습니다.

const testScore = 95;

if (testScore >= 70) {
  console.log("좋아요!");
} else if (testScore >= 90) {
  console.log("아주 잘했어요!");
}

testScore가 95여도 첫 번째 조건인 testScore >= 70이 이미 true입니다. 그래서 "좋아요!"가 출력되고, 뒤의 else if는 확인하지 않습니다.

조건문은 위에서 아래로 읽힌다는 점을 꼭 기억해 주세요.

조건을 함께 묶는 논리 연산자

조건을 하나만 확인하면 되는 경우도 있지만, 실제로는 두 가지 이상을 함께 확인해야 할 때도 많습니다.

예를 들어 이런 상황을 생각해 볼 수 있습니다.

• 나이가 19세 이상이고, 이용 약관에도 동의해야 가입할 수 있다.

• 쿠폰이 있거나, 주문 금액이 충분히 크면 할인을 받을 수 있다.

• 입력값이 비어 있지 않은지 확인하고 싶다.

이럴 때 사용하는 기호를 논리 연산자라고 합니다.

&&: 둘 다 맞아야 할 때

&&는 양쪽 조건이 모두 맞아야 할 때 씁니다.

const memberAge = 22;
const agreedToTerms = true;

if (memberAge >= 19 && agreedToTerms === true) {
  console.log("가입할 수 있습니다.");
} else {
  console.log("가입 조건을 확인해 주세요.");
}

이 코드는 "나이가 19세 이상이고, 약관 동의도 했는가?"를 확인합니다. 둘 중 하나라도 맞지 않으면 가입할 수 없다는 메시지가 나옵니다.

agreedToTerms처럼 이미 true 또는 false를 담고 있는 값은 이렇게 짧게 쓸 수도 있습니다.

if (memberAge >= 19 && agreedToTerms) {
  console.log("가입할 수 있습니다.");
}

처음에는 agreedToTerms === true처럼 풀어서 써도 괜찮습니다. 익숙해지면 짧은 형태도 자연스럽게 읽히기 시작합니다.

||: 하나라도 맞으면 될 때

||는 양쪽 조건 중 하나라도 맞으면 될 때 씁니다.

const hasCoupon = false;
const cartTotal = 52000;

if (hasCoupon === true || cartTotal >= 50000) {
  console.log("할인을 받을 수 있습니다.");
} else {
  console.log("할인 조건에 해당하지 않습니다.");
}

이 코드는 "쿠폰이 있거나, 장바구니 금액이 50,000원 이상인가?"를 확인합니다. 둘 중 하나만 맞아도 할인 메시지가 나옵니다.

!: 반대로 뒤집고 싶을 때

!는 조건을 반대로 뒤집습니다. 처음에는 조금 낯설 수 있지만, "아니다"라고 읽으면 됩니다.

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("로그인이 필요합니다.");
}

isLoggedIn은 false입니다. 그런데 앞에 !를 붙이면 "로그인하지 않았다면"이라는 뜻이 됩니다. 그래서 "로그인이 필요합니다."가 출력됩니다.

입력칸이 비어 있는지 확인할 때도 비슷하게 쓸 수 있습니다.

const inputText = "";

if (inputText === "") {
  console.log("내용을 입력해 주세요.");
}

위 코드는 빈 문자열 ""인지 직접 비교합니다. 처음에는 이렇게 쓰는 편이 가장 이해하기 쉽습니다.

조건문을 쓸 때 자주 하는 실수

조건문은 모양이 단순해 보여도 처음에는 작은 실수가 자주 납니다. 몇 가지를 미리 알고 있으면 오류를 훨씬 쉽게 찾을 수 있습니다.

1. 비교할 때 =를 쓰는 실수

const role = "user";

if (role === "admin") {
  console.log("관리자입니다.");
}

비교할 때는 ===입니다. =는 값을 넣을 때 사용합니다.

2. 문자열에 따옴표를 빼는 실수

const menu = "tea";

if (menu === "tea") {
  console.log("차를 선택했습니다.");
}

"tea"처럼 글자는 따옴표로 감싸야 합니다. 따옴표가 없으면 자바스크립트는 그것을 글자가 아니라 변수 이름으로 이해하려고 합니다.

3. 중괄호 위치를 헷갈리는 실수

const point = 1200;

if (point >= 1000) {
  console.log("쿠폰을 받을 수 있습니다.");
}

if 다음의 중괄호 { } 안에 들어 있는 코드만 조건의 영향을 받습니다. 조건에 따라 실행하고 싶은 코드는 중괄호 안에 넣어 주세요.

4. 조건 순서를 잘못 쓰는 실수

여러 조건을 검사할 때는 위에서 아래로 확인한다는 점을 기억해야 합니다.

const purchaseAmount = 120000;

if (purchaseAmount >= 100000) {
  console.log("VIP 혜택 대상입니다.");
} else if (purchaseAmount >= 30000) {
  console.log("무료 배송 대상입니다.");
} else {
  console.log("배송비가 추가됩니다.");
}

금액이 큰 혜택부터 먼저 확인하면 원하는 메시지를 더 정확하게 보여 줄 수 있습니다.

작은 예제로 흐름 확인하기

마지막으로 주문 금액에 따라 배송 메시지를 출력하는 코드를 함께 읽어 보겠습니다.

const totalPrice = 28000;
const isFirstOrder = true;

if (totalPrice >= 30000) {
  console.log("무료 배송입니다.");
} else if (isFirstOrder) {
  console.log("첫 주문 무료 배송 쿠폰을 사용할 수 있습니다.");
} else {
  console.log("배송비 3,000원이 추가됩니다.");
}

이 코드는 먼저 주문 금액이 30,000원 이상인지 확인합니다. totalPrice는 28,000원이므로 첫 번째 조건은 맞지 않습니다.

그다음 첫 주문인지 확인합니다. isFirstOrder가 true이므로 두 번째 코드가 실행됩니다.

그래서 콘솔에는 이렇게 출력됩니다.

첫 주문 무료 배송 쿠폰을 사용할 수 있습니다.

조건문을 읽을 때는 한 번에 전체를 이해하려고 하지 않아도 됩니다. 위에서부터 한 줄씩 보면서 "이 조건은 참일까, 거짓일까?"를 차례대로 따져 보면 됩니다.

마무리

조건문은 자바스크립트가 상황에 맞게 반응하도록 만들어 주는 기본 문법입니다.

이번 장에서 배운 핵심은 다음과 같습니다.

• if는 조건이 true일 때만 코드를 실행합니다.

• else는 조건이 맞지 않을 때 실행할 코드를 정합니다.

• else if는 여러 상황을 차례대로 나눌 때 사용합니다.

• >, >=, <, <=, ===, !== 같은 비교 연산자로 조건식을 만듭니다.

• 값을 넣을 때는 =, 같은지 비교할 때는 ===를 사용합니다.

• &&, ||, !를 사용하면 여러 조건을 함께 판단할 수 있습니다.

처음에는 조건문이 괄호와 기호 때문에 복잡해 보일 수 있습니다. 하지만 결국 조건문은 "만약 이렇다면 이렇게 하고, 그렇지 않다면 저렇게 하라"는 아주 일상적인 판단을 코드로 옮긴 것입니다.

다음에 코드를 볼 때 if를 만나면 어렵게 생각하지 말고, 먼저 이렇게 읽어 보세요.

만약 이 조건이 맞다면, 중괄호 안의 일을 한다.