JavaScript 조건 분기 탐구

소개

이 랩에서는 참가자들이 JavaScript 의 조건 분기 세계에 깊이 들어가 의사 결정을 내리고 프로그램 흐름을 제어하는 다양한 기술을 탐구합니다. 이 랩은 단일 분기 if 문, if...else 로직, 다중 조건 문, switch 문과 같은 필수 개념을 다루며, 다양한 조건 구조에 대한 실질적인 경험을 제공합니다.

실용적인 코딩 연습을 통해 학습자는 조건 로직 구현, 다양한 분기 기술 비교, 특정 프로그래밍 시나리오에 가장 적합한 접근 방식을 선택하는 방법을 이해하는 데 능숙해질 것입니다. 연령 확인, 성적 평가, 케이스 처리를 포함하는 단계별 예제를 통해 작업함으로써 참가자들은 JavaScript 의 조건 프로그래밍 기능에 대한 탄탄한 기반을 다질 것입니다.

단일 분기 if 문 이해

이 단계에서는 특정 조건에 따라 코드를 조건부로 실행할 수 있게 해주는 JavaScript 의 기본 단일 분기 if 문에 대해 배우게 됩니다.

먼저, 단일 분기 if 문을 탐구하기 위해 JavaScript 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 conditional-basics.js라는 새 파일을 만듭니다.

// 간단한 연령 확인 예제 생성
let age = 18;

// 단일 분기 if 문
if (age >= 18) {
  console.log("You are eligible to vote!");
}

이 예제에서 if 문은 age가 18 이상인지 확인합니다. 조건이 참이면 중괄호 {} 안의 코드 블록이 실행됩니다.

스크립트를 실행하여 출력을 확인해 보겠습니다.

node ~/project/conditional-basics.js

예시 출력:

You are eligible to vote!

이제 조건이 거짓일 때 if 문이 어떻게 작동하는지 보여주는 다른 예제를 시도해 보겠습니다.

// 이전 파일 수정
let temperature = 15;

if (temperature < 10) {
  console.log("It's cold outside. Wear a jacket!");
}

이 경우, 온도가 15 도 (10 도 미만이 아님) 이므로 스크립트를 실행해도 아무것도 출력되지 않습니다.

if...else 조건 로직 구현

이 단계에서는 JavaScript 의 if...else 조건 로직에 대해 배우게 됩니다. 이를 통해 조건이 참인지 거짓인지에 따라 다른 코드 블록을 실행할 수 있습니다.

WebIDE 를 열고 ~/project 디렉토리에 conditional-else.js라는 새 파일을 만듭니다. if...else가 어떻게 작동하는지 보여주는 간단한 예제를 만들어 보겠습니다.

// 간단한 성적 평가 예제 생성
let score = 75;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

이 예제에서 if...else 문은 score가 60 이상인지 확인합니다. 조건이 참이면 합격 메시지를 출력합니다. 그렇지 않으면 불합격 메시지를 출력합니다.

스크립트를 실행하여 출력을 확인해 보겠습니다.

node ~/project/conditional-else.js

예시 출력:

Congratulations! You passed the exam.

이제 점수를 변경하여 else 부분을 보여주기 위해 스크립트를 수정해 보겠습니다.

// 이전 파일 수정
let score = 45;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

이 스크립트를 실행하면 다른 출력이 표시됩니다.

예시 출력:

Sorry, you did not pass the exam.

if...else가 다양한 유형의 조건과 함께 어떻게 사용될 수 있는지 보여주는 다른 예제를 만들어 보겠습니다.

// 파일에 다른 예제 추가
let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella with you.");
} else {
  console.log("Enjoy the sunny day!");
}

이 예제는 if...else가 부울 조건과 함께 어떻게 작동할 수 있는지 보여줍니다.

다중 조건 if...else if...else 문 생성

이 단계에서는 JavaScript 에서 if...else if...else 문을 사용하여 더 복잡한 의사 결정 시나리오를 처리하는 방법을 배우게 됩니다.

WebIDE 를 열고 ~/project 디렉토리에 multi-condition.js라는 새 파일을 만듭니다.

// 성적 분류 예제 생성
let score = 85;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

이 예제에서 if...else if...else 문은 여러 조건을 순차적으로 확인합니다. 참으로 평가되는 첫 번째 조건의 코드 블록이 실행되고 나머지 조건은 건너뜁니다.

스크립트를 실행하여 출력을 확인해 보겠습니다.

node ~/project/multi-condition.js

예시 출력:

Great job! You got a B grade.

이제 점수를 수정하여 다른 조건이 어떻게 작동하는지 살펴보겠습니다.

// 다른 점수 시나리오 시도
let score = 55;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

이 스크립트를 실행하면 다른 출력이 표시됩니다.

예시 출력:

Sorry, you failed the exam.

다른 시나리오로 다중 조건 로직을 보여주는 다른 예제를 만들어 보겠습니다.

// 날씨 조건 예제
let temperature = 25;

if (temperature > 30) {
  console.log("It's very hot outside.");
} else if (temperature > 20) {
  console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
  console.log("It's a bit cool today.");
} else {
  console.log("It's cold outside.");
}

이 예제는 if...else if...else를 사용하여 다양한 결과로 여러 조건을 처리하는 방법을 보여줍니다.

다중 케이스 처리를 위한 Switch 문 사용

이 단계에서는 JavaScript 의 switch 문에 대해 배우게 됩니다. 이 문은 단일 변수에 대한 여러 조건을 처리하는 대체 방법을 제공합니다.

WebIDE 를 열고 ~/project 디렉토리에 switch-statement.js라는 새 파일을 만듭니다.

// switch 문을 사용하여 요일 예제 생성
let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

이 예제에서 switch 문은 day의 값을 확인합니다. 각 case는 특정 값을 나타내며, 값이 일치하면 해당 코드 블록이 실행됩니다. break 문은 다음 case 로의 fall-through 를 방지합니다.

스크립트를 실행하여 출력을 확인해 보겠습니다.

node ~/project/switch-statement.js

예시 출력:

Wednesday

이제 default 케이스를 보여주는 다른 예제를 만들어 보겠습니다.

// switch 문을 사용한 성적 분류
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent performance!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Satisfactory performance.");
    break;
  case "D":
    console.log("Needs improvement.");
    break;
  default:
    console.log("Invalid grade.");
}

이 스크립트를 실행하면 다음을 볼 수 있습니다.

예시 출력:

Good job!

여러 케이스가 동일한 코드 블록을 공유하는 방법을 보여드리겠습니다.

// switch 문을 사용한 주말 감지
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
}

이 예제는 동일한 작업으로 여러 케이스를 처리하는 방법을 보여줍니다.

if 문과 switch 문 비교 및 선택

이 단계에서는 if 문과 switch 문의 주요 차이점을 배우고 각 접근 방식을 언제 사용해야 하는지 이해하게 됩니다.

WebIDE 를 열고 ~/project 디렉토리에 conditional-comparison.js라는 새 파일을 만듭니다.

// 다양한 시나리오에 대한 if 와 switch 비교

// 시나리오 1: 단순 동등성 검사
let fruit = "apple";

// if 문 사용
if (fruit === "apple") {
  console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
  console.log("If Statement: It's a banana.");
} else {
  console.log("If Statement: Unknown fruit.");
}

// switch 문 사용
switch (fruit) {
  case "apple":
    console.log("Switch Statement: It's an apple.");
    break;
  case "banana":
    console.log("Switch Statement: It's a banana.");
    break;
  default:
    console.log("Switch Statement: Unknown fruit.");
}

// 시나리오 2: 복잡한 조건
let score = 85;

// 복잡한 조건에는 if 문이 더 적합합니다.
if (score >= 90 && score <= 100) {
  console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
  console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
  console.log("Satisfactory grade (C)");
} else {
  console.log("Needs improvement");
}

// switch 는 범위 기반 또는 복잡한 조건에 덜 적합합니다.

스크립트를 실행하여 출력을 확인해 보겠습니다.

node ~/project/conditional-comparison.js

예시 출력:

If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)

기억해야 할 주요 차이점:

1. if 문은 더 유연하며 복잡한 조건을 처리할 수 있습니다.
2. switch 문은 정확한 값 일치에 가장 적합합니다.
3. if는 다른 유형을 비교하고 복잡한 논리 연산자를 사용할 수 있습니다.
4. switch는 엄격한 동등성 검사로 제한됩니다.

이러한 점을 설명하기 위해 마지막 예제를 만들어 보겠습니다.

// if 와 switch 중에서 선택하기

function recommendConditional(input) {
  // 단순하고 정확한 값 일치에는 switch 사용
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch for simple value checks");
      break;

    // 더 복잡한 조건에는 if 사용
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if for range and type checking");
      } else {
        console.log("Complex conditions are better with if statements");
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

요약

이 랩에서는 JavaScript 의 조건 분기 기술을 탐구하며, 다양한 유형의 조건문을 중점적으로 다루었습니다. 랩은 단일 분기 if 문을 이해하는 것으로 시작하여, 나이 확인 및 온도 검사와 같은 특정 조건에 따라 코드를 실행하는 방법을 시연했습니다. 학습자들은 지정된 조건이 참일 때만 코드가 실행되도록 하는 간단한 조건 로직을 생성하는 연습을 했습니다.

그런 다음 랩은 두 방향 분기를 처리하기 위한 if...else 문, 복잡한 의사 결정을 위한 다중 조건 if...else if...else 문, 그리고 여러 케이스 시나리오를 처리하기 위한 switch 문을 포함하여 보다 진보된 조건 기술로 진행되었습니다. 참가자들은 다양한 조건적 접근 방식을 비교하고, JavaScript 프로그래밍에서 각 방법의 구문과 실제 적용을 이해하는 방법을 배웠습니다.