프론트엔드/JavaScript

제어문 - 조건문

Ryuzy 2025. 4. 10. 01:58
728x90
반응형

1. 제어문

자바스크립트의 제어문은 프로그램의 흐름을 개발자가 원하는 방식으로 조정하기 위해 사용하는 구문입니다. 대표적으로 조건에 따라 실행을 분기하는 if, else if, else, switch 같은 조건문과, 특정 코드를 반복 실행하는 for, while, do...while 같은 반복문이 있습니다. 또한, 반복을 빠져나오거나 건너뛸 수 있는 break와 continue 같은 키워드도 제어문에 포함됩니다. 이러한 제어문을 활용하면 코드의 흐름을 상황에 맞게 결정하고, 반복 작업을 효율적으로 처리할 수 있어 프로그램의 논리를 더 정교하게 구성할 수 있습니다.

 

2. 조건문

자바스크립트의 조건문은 주어진 조건의 참(true) 또는 거짓(false)에 따라 코드의 실행 흐름을 제어하는 데 사용됩니다. 가장 기본적인 형태는 if문으로, 조건이 참일 때 특정 코드를 실행하며, 조건이 거짓일 경우 else 블록을 사용하여 다른 코드를 실행할 수 있습니다. 복수의 조건을 판단할 때는 else if를 활용할 수 있고, 여러 값 중 하나를 선택해야 하는 경우에는 switch 문을 사용하면 더 간결하게 표현할 수 있습니다. 또한, 짧은 조건 판단에는 삼항 연산자 조건 ? 참일 때 : 거짓일 때를 사용하여 코드를 더 간단하게 작성할 수 있습니다. 이러한 조건문은 프로그램이 다양한 상황에 맞게 동작하도록 만드는 핵심적인 제어 구조입니다.

 

1. if 문

if문은 자바스크립트에서 "조건이 맞으면 어떤 일을 해라"라고 지시하는 아주 기본적인 도구입니다. 쉽게 말해서, 어떤 상황이 참(true)일 때만 특정 코드를 실행하고, 그렇지 않으면 그냥 넘어갑니다.

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

 

let age = 20;

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

 

2. else 문

else는 if 조건이 거짓일 때 실행되는 코드를 작성할 때 사용합니다.

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

 

let age = 16;

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

 

3. else if 문

else if는 여러 가지 조건을 순차적으로 검사할 수 있도록 해주는 조건문입니다. if 하나로는 조건이 하나만 가능하지만, else if를 사용하면 다양한 경우를 나눌 수 있습니다.

if (조건1) {
  // 조건1이 참일 때 실행
} else if (조건2) {
  // 조건1은 거짓이고, 조건2가 참일 때 실행
} else {
  // 위 모든 조건이 거짓일 때 실행
}

 

let age = 13;

if (age >= 18) {
  console.log("성인입니다.");
} else if (age >= 13) {
  console.log("청소년입니다.");
} else {
  console.log("어린이입니다.");
}

 

let score = 77;

if (score >= 90) {
  console.log("🎉 A등급! 훌륭해요!");
} else if (score >= 80) {
  console.log("👏 B등급! 잘했어요!");
} else if (score >= 70) {
  console.log("🙂 C등급! 조금만 더 힘내요!");
} else if (score >= 60) {
  console.log("😅 D등급! 아쉬워요, 다음엔 더 잘할 수 있어요!");
} else {
  console.log("😭 F등급! 다시 도전해봅시다!");
}

 

4. switch 문

switch 문은 여러 개의 경우(case)를 비교해야 할 때 사용하는 조건문입니다.
if-else if 문으로도 가능하지만, 값이 하나일 때 여러 경우를 나누는 상황에는 switch 문이 더 보기 쉽고 깔끔합니다.

switch (값) {
  case 값1:
    // 값1일 때 실행할 코드
    break;

  case 값2:
    // 값2일 때 실행할 코드
    break;

  default:
    // 위의 어떤 case에도 해당하지 않을 때 실행할 코드
}

 

let mbti = "ENFP";

switch (mbti) {
  case "ENFP":
    console.log("🔥 열정 가득! 사람들과 어울리는 걸 좋아하는 아이디어 뱅크!");
    break;
  case "INFJ":
    console.log("🌙 조용하지만 깊은 통찰력! 사람들을 도와주는 조용한 리더.");
    break;
  case "ISTJ":
    console.log("📋 원칙과 계획을 중시하는 믿음직한 현실주의자!");
    break;
  case "ENTJ":
    console.log("💼 리더십이 뛰어나고 목표 지향적인 전략가!");
    break;
  default:
    console.log("🤔 아직 등록되지 않은 MBTI예요. 다시 확인해 주세요!");
}

 

const month = 10

switch(month){
    case 1: case 3: case 5: case 7: case 8: case 10: case 12:
        console.log(`${month}월의 마지막 일자는 31일입니다`)
        break
    case 2:
        console.log(`${month}월의 마지막 일자는 28일입니다`)
    break
    case 4: case 6: case 9: case 11:           
        console.log(`${month}월의 마지막 일자는 30일입니다`)
        break
}

 

5. 삼항 연산자

자바스크립트의 삼항 연산자는 조건에 따라 값을 선택할 수 있는 간단한 조건문 표현 방식입니다. 형식은 조건 ? 참일 때의 값 : 거짓일 때의 값으로 작성하며, if-else 문을 한 줄로 줄여서 사용할 수 있는 장점이 있습니다. 예를 들어 const result = age >= 18 ? "성인" : "미성년자";처럼 사용하면, age가 18 이상이면 "성인"이, 그렇지 않으면 "미성년자"가 result에 할당됩니다. 코드가 간결해지고 가독성도 좋아져서, 단순한 조건 처리에 자주 사용됩니다.

조건식 ? 참일 때의 값 : 거짓일 때의 값

 

const age = 20;
const message = age >= 18 ? "성인입니다." : "미성년자입니다.";

console.log(message);

 

const score = 85;

const grade = score >= 90 ? "A" :
              score >= 80 ? "B" :
              score >= 70 ? "C" :
              score >= 60 ? "D" : "F";

console.log(`당신의 성적은 ${grade}입니다.`);

 

728x90
반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

배열  (0) 2025.04.10
제어문 - 기본 반복문  (0) 2025.04.10
연산자  (0) 2025.04.10
변수  (0) 2025.04.09
자바스크립트  (0) 2025.04.08