[자바스크립트]자바스크립트 조건문 완전 정복: 기초부터 실전까지 한 번에 배우기

자바스크립트 조건문은 로직을 제어하는 데 필수적인 역할을 합니다. 이번 포스팅에서는 자바스크립트의 다양한 조건문에 대해 알아보고, 초보자도 쉽게 이해할 수 있는 예제와 실습을 통해 활용법을 익혀보겠습니다.

≣ 목차

• 조건문의 기본 개념📚
• if 문✅
• else와 else if🔄
• switch 문🔀
• 삼항 연산자🎭
• 실습 문제🛠️
• 고급 조건문 사용법🚀
• 핵심 내용👀

자바스크립트 조건문은 연산자와 함께 유용하게 사용할 수 있습니다. 자바스크립트 연산자에 대한 자세한 내용은 아래 포스팅을 참고해 주세요😁

[자바스크립트]자바스크립트 연산자 완벽 가이드

---

조건문의 기본 개념📚

조건문은 프로그램의 흐름을 제어하는 데 사용됩니다. 특정 조건을 만족할 때만 코드 블록이 실행되도록 합니다. 자바스크립트에서는 if, else, else if, switch, 그리고 삼항 연산자(? :)를 사용하여 조건문을 작성할 수 있습니다.

---

if 문✅

자바스크립트 if 문은 가장 기본적인 조건문입니다. 조건이 참일 때 코드 블록을 실행합니다.
if 문은 단일 조건을 처리할 때 가장 자주 사용됩니다. 조건이 참일 때만 코드 블록을 실행하고, 거짓일 경우에는 아무런 동작도 하지 않습니다. 이는 매우 간단한 조건 처리에 유용합니다.

if (condition) {
  // 조건이 참일 때 실행되는 코드
}

• 예제

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

---

else와 else if🔄

else 문은 if 문의 조건이 거짓일 때 실행되는 코드를 정의합니다. else if 문은 여러 조건을 처리할 때 사용됩니다.
else if 문을 사용하면 복잡한 조건을 순차적으로 검사할 수 있습니다. 각 조건은 순서대로 평가되며, 첫 번째로 참인 조건의 코드 블록이 실행됩니다. 모든 조건이 거짓일 경우 else 블록이 실행됩니다.

if (condition1) {
  // 조건1이 참일 때 실행되는 코드
} else if (condition2) {
  // 조건2가 참일 때 실행되는 코드
} else {
  // 모든 조건이 거짓일 때 실행되는 코드
}

• 예제

let score = 75;
if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else if (score >= 70) {
  console.log("C 학점");
} else {
  console.log("F 학점");
}

---

switch 문🔀

자바스크립트 switch 문은 다중 조건을 처리할 때 유용합니다. 각 조건을 case로 나열하고, 조건이 일치하는 경우 해당 코드를 실행합니다.
switch 문은 여러 개의 if-else 문을 단순화할 수 있습니다. 각 case는 특정 값과 일치하는지 검사하며, 일치할 경우 해당 코드 블록이 실행됩니다. break 문은 case 블록을 종료시키며, default 블록은 모든 case가 일치하지 않을 때 실행됩니다.

switch (expression) {
  case value1:
    // value1이 일치할 때 실행되는 코드
    break;
  case value2:
    // value2가 일치할 때 실행되는 코드
    break;
  default:
    // 모든 조건이 일치하지 않을 때 실행되는 코드
}

• 예제

let day = 3;
switch (day) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  default:
    console.log("주말");
}

---

삼항 연산자🎭

삼항 연산자는 if-else 문을 짧게 작성할 때 사용됩니다. 삼항 연산자는 세 개의 피연산자를 취하기 때문에 삼항(ternary)이라는 이름이 붙었습니다. 기본 구조는 다음과 같습니다.

condition ? expr1 : expr2;

여기서 condition이 참이면 expr1이 실행되고, 거짓이면 expr2가 실행됩니다.

• 예제

let age = 18;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);

삼항 연산자는 간단한 조건문을 한 줄로 작성할 수 있어 코드가 짧고 깔끔해집니다. 그러나 조건이 복잡해지면 가독성이 떨어질 수 있으므로, 간단한 경우에만 사용하는 것이 좋습니다.

---

실습 문제🛠️

다음은 직접 풀어볼 수 있는 실습 문제입니다.

1. 숫자를 입력받아 짝수인지 홀수인지 판별하는 조건문 작성하기.
2. 사용자 점수를 입력받아 학점을 출력하는 프로그램 작성하기.
3. 요일을 입력받아 주중인지 주말인지 출력하는 switch 문 작성하기.

• 풀이

// 1. 짝수 홀수 판별
let num = 10;
if (num % 2 === 0) {
  console.log("짝수");
} else {
  console.log("홀수");
}

// 2. 학점 출력
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 학점");
}

// 3. 주중 주말 출력
let day = "Saturday";
switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("주중");
    break;
  case "Saturday":
  case "Sunday":
    console.log("주말");
    break;
  default:
    console.log("잘못된 입력");
}

---

고급 조건문 사용법🚀

자바스크립트 논리 연산자(&&, ||, !)와 자바스크립트 조건문을 결합하여 더 복잡한 조건을 처리할 수 있습니다. 또한 조건문을 최적화하여 성능을 향상할 수 있습니다.

let a = true;
let b = false;
if (a && b) {
  console.log("둘 다 참");
} else if (a || b) {
  console.log("둘 중 하나 참");
} else {
  console.log("둘 다 거짓");
}

조건문을 사용할 때는 가독성을 높이기 위해 간단명료하게 작성하는 것이 중요합니다.

---

핵심 내용👀