JavaScript 조건문 완벽 가이드 if, else, else if 문의 모든 것

안녕하세요, 코딩하는곰입니다! JavaScript를 배우시는 많은 분들이 처음 마주치는 중요한 개념이 바로 ‘조건문’입니다. 오늘은 JavaScript의 핵심 제어문 중 하나인 if, else, else if 문에 대해 깊이 있게 알아보고, 실제 코딩에서 어떻게 활용하는지 다양한 예제와 함께 설명드리겠습니다. 프로그래밍에서 조건에 따른 결정을 내리는 것은 가장 기본적이면서도 중요한 기술입니다. 이 글을 통해 조건문의 모든 것을 마스터해보세요!

🎮 게임 개발에 관심이 있다면, (자바 기초) 메서드 정의와 호출 완벽 가이드 - 매개변수와 반환값 구조 이해하기를 참고해보세요.

JavaScript 조건문의 기본 개념

조건문은 프로그래밍에서 가장 기본적이면서도 핵심적인 제어 구조입니다. 특정 조건이 참(true)인지 거짓(false)인지에 따라 다른 코드 블록을 실행하도록 하는 문법입니다. JavaScript에서 조건문은 if, else, else if 문으로 구현됩니다.

조건문의 필요성

왜 조건문이 필요할까요? 현실 세계에서 우리는 매순간 조건에 따라 결정을 내립니다. “비가 오면 우산을 챙긴다”, “배가 고프면 밥을 먹는다”와 같은 일상적인 결정들 모두 조건에 따른 행동입니다. 프로그래밍에서도 마찬가지로 다양한 상황에 따라 다른 처리가 필요합니다.

기본 문법 구조

JavaScript에서 if 문의 가장 기본적인 형태는 다음과 같습니다:

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

조건식은 반드시 불리언 값(true/false)으로 평가되어야 합니다. 조건식이 true로 평가되면 중괄호 {} 안의 코드가 실행되고, false로 평가되면 코드 블록을 건너뜁니다.

조건식 작성하기

조건식에는 다양한 표현식을 사용할 수 있습니다:

// 비교 연산자 사용
if (age >= 18) {
  console.log("성인입니다.");
}
// 논리 연산자 사용
if (isLoggedIn && hasPermission) {
  console.log("접근이 허용되었습니다.");
}
// 함수 호출 결과 사용
if (isValidUser(user)) {
  console.log("유효한 사용자입니다.");
}

truthy와 falsy 값

JavaScript에서는 명시적으로 true/false가 아닌 값도 조건식에서 true/false로 변환되어 평가됩니다. 이를 truthy와 falsy 값이라고 합니다. falsy 값 (false로 평가되는 값):

• false
• 0, -0
• "" (빈 문자열)
• null
• undefined
• NaN truthy 값 (true로 평가되는 값):
• falsy 값이 아닌 모든 값
• “0”, “false” (비어있지 않은 문자열)
• [] (빈 배열)
• {} (빈 객체)
• function() {} (함수)

if ("hello") { // truthy - 실행됨
  console.log("이 코드는 실행됩니다.");
}
if ("") { // falsy - 실행되지 않음
  console.log("이 코드는 실행되지 않습니다.");
}

💻 프로그래밍에 관심이 많다면, (Java 기초) main 메서드는 왜 static일까? - static의 개념과 진짜 이유를 참고해보세요.

else 문: 대안 실행로 제공하기

if 문만으로는 조건이 false일 때 아무런 동작도 하지 않습니다. 여기에 else 문을 추가하면 조건이 false일 때 실행할 대안 코드를 제공할 수 있습니다.

else 문 기본 구조

if (조건식) {
  // 조건이 참일 때 실행할 코드
} else {
  // 조건이 거짓일 때 실행할 코드
}

실전 예제: 로그인 상태 확인

let isLoggedIn = true;
if (isLoggedIn) {
  console.log("환영합니다! 대시보드로 이동합니다.");
  showDashboard();
} else {
  console.log("로그인이 필요합니다.");
  showLoginForm();
}

실전 예제: 숫자 짝수/홀수 판별

let number = 7;
if (number % 2 === 0) {
  console.log(number + "은(는) 짝수입니다.");
} else {
  console.log(number + "은(는) 홀수입니다.");
}
// 출력: "7은(는) 홀수입니다."

실전 예제: 성인 여부 확인

let age = 16;
if (age >= 18) {
  console.log("성인입니다. 모든 콘텐츠에 접근 가능합니다.");
} else {
  console.log("미성년자입니다. 일부 콘텐츠가 제한됩니다.");
  restrictContent();
}

else if 문: 다중 조건 처리

두 가지 이상의 조건을 확인해야 할 때는 else if 문을 사용합니다. 여러 개의 조건을 순차적으로 검사하고, 처음으로 true가 되는 조건의 코드 블록을 실행합니다.

else if 문 기본 구조

if (조건식1) {
  // 조건식1이 참일 때 실행
} else if (조건식2) {
  // 조건식2가 참일 때 실행
} else if (조건식3) {
  // 조건식3이 참일 때 실행
} else {
  // 모든 조건이 거짓일 때 실행
}

실전 예제: 성적 등급 계산

let score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else if (score >= 60) {
  grade = "D";
} else {
  grade = "F";
}
console.log("성적: " + score + ", 등급: " + grade);
// 출력: "성적: 85, 등급: B"

실전 예제: 시간대 인사 메시지

let hour = new Date().getHours();
let greeting;
if (hour < 6) {
  greeting = "좋은 새벽이에요!";
} else if (hour < 12) {
  greeting = "좋은 아침이에요!";
} else if (hour < 18) {
  greeting = "좋은 오후에요!";
} else {
  greeting = "좋은 저녁이에요!";
}
console.log(greeting);

실전 예제: 할인율 계산

let purchaseAmount = 150000;
let discountRate;
if (purchaseAmount > 200000) {
  discountRate = 0.2;
} else if (purchaseAmount > 100000) {
  discountRate = 0.1;
} else if (purchaseAmount > 50000) {
  discountRate = 0.05;
} else {
  discountRate = 0;
}
let finalAmount = purchaseAmount * (1 - discountRate);
console.log("최종 결제 금액: " + finalAmount + "원");

이미지에서 주요 색상을 추출해 디자인에 활용하고 싶다면, 이미지 기반 컬러 추출기를 사용해보는 것도 좋은 방법입니다.

고급 조건문 활용技巧

중첩 조건문 (Nested If Statements)

조건문 안에 또 다른 조건문을 넣어 더 복잡한 논리를 구현할 수 있습니다.

let age = 25;
let hasDriverLicense = true;
if (age >= 18) {
  console.log("성인입니다.");
  
  if (hasDriverLicense) {
    console.log("운전 가능합니다.");
  } else {
    console.log("운전면허가 필요합니다.");
  }
} else {
  console.log("미성년자입니다.");
}

논리 연산자를 활용한 복합 조건

AND(&&), OR(||), NOT(!) 연산자를 사용하여 여러 조건을 조합할 수 있습니다.

// AND 연산자
let age = 22;
let hasID = true;
if (age >= 18 && hasID) {
  console.log("클럽 입장 가능합니다.");
} else {
  console.log("입장이 제한됩니다.");
}
// OR 연산자
let isWeekend = true;
let isHoliday = false;
if (isWeekend || isHoliday) {
  console.log("쉬는 날입니다!");
} else {
  console.log("평일입니다.");
}
// NOT 연산자
let isRaining = false;
if (!isRaining) {
  console.log("날씨가 좋아요! 외출하기 좋은 날입니다.");
} else {
  console.log("비가 오네요. 우산을 챙기세요.");
}

삼항 연산자 (Ternary Operator)

간단한 조건문은 삼항 연산자로 더 concise하게 작성할 수 있습니다.

// 기본 if-else
let age = 20;
let message;
if (age >= 18) {
  message = "성인";
} else {
  message = "미성년자";
}
// 삼항 연산자로 변환
let message = age >= 18 ? "성인" : "미성년자";
console.log(message);
// 중첩 삼항 연산자 (가독성을 위해 괄호 사용)
let score = 85;
let grade = score >= 90 ? "A" : 
           (score >= 80 ? "B" : 
           (score >= 70 ? "C" : 
           (score >= 60 ? "D" : "F")));
console.log("등급: " + grade);

switch 문과의 비교

다중 조건 처리时 switch 문도 고려해볼 수 있습니다.

let day = 3;
let dayName;
// else if 사용
if (day === 1) {
  dayName = "월요일";
} else if (day === 2) {
  dayName = "화요일";
} else if (day === 3) {
  dayName = "수요일";
} else if (day === 4) {
  dayName = "목요일";
} else if (day === 5) {
  dayName = "금요일";
} else {
  dayName = "주말";
}
// switch 사용 (동일한 기능)
switch(day) {
  case 1:
    dayName = "월요일";
    break;
  case 2:
    dayName = "화요일";
    break;
  case 3:
    dayName = "수요일";
    break;
  case 4:
    dayName = "목요일";
    break;
  case 5:
    dayName = "금요일";
    break;
  default:
    dayName = "주말";
}

실무에서 자주 마주치는 조건문 패턴

// 기본값 설정
let userName = getUserName() || "익명 사용자";
// 단축 평가 (Short-circuit evaluation)
let isAdmin = user && user.role === 'admin';
// 옵셔널 체이닝과 nullish coalescing
let userAddress = user?.address?.city ?? "주소 정보 없음";
// 조건부 함수 실행
isLoading && showSpinner();
isAuthenticated || redirectToLogin();

성능 고려사항

조건문을 작성할 때는 성능도 고려해야 합니다:

// 효율적인 조건문 순서 (자주 true가 되는 조건을 앞에)
if (mostCommonCondition) {
  // 가장 흔한 경우
} else if (lessCommonCondition) {
  // 덜 흔한 경우
} else {
  // 가장 드문 경우
}
// 불필요한 조건 검사 피하기
if (user && user.profile && user.profile.name) {
  // 안전하게 접근
}

이미지에서 주요 색상을 추출해 디자인에 활용하고 싶다면, 이미지 기반 컬러 추출기를 사용해보는 것도 좋은 방법입니다.

JavaScript의 if, else, else if 문은 프로그래밍의 가장 기본이 되는 핵심 개념입니다. 오늘 알아본 내용들을 잘 이해하고 활용하면 다양한 상황에 맞는 유연한 프로그램을 작성할 수 있을 거예요. 조건문은 처음에는 어려울 수 있지만, 계속 연습하다 보면 자연스럽게 익숙해질 것입니다. 실제 프로젝트에서 조건문을 작성할 때는 가독성과 유지보수성을 항상 염두에 두세요. 너무 복잡한 조건문은 함수로 분리하거나, 삼항 연산자로 간결하게 표현하는 것도 좋은 방법입니다. 여러분도 오늘 배운 내용을 바탕으로 자신만의 프로젝트에 조건문을 활용해보세요! 궁금한 점이 있으면 언제든 댓글로 질문해주시면 답변드리겠습니다. 다음 시간에는 JavaScript의 또 다른 흥미로운 주제로 찾아뵙겠습니다. 코딩하는곰이었습니다!

👍 믿을 수 있는 건강기능식품 트렌드를 알고 싶다면, 코큐텐골드를 참고해보세요.