▶ JavaScript Tutorial

JavaScript If Else

JavaScript If Else: 조건문의 이해와 활용

JavaScript에서 if...else 조건문은 조건에 따라 코드의 실행 흐름을 제어하는 데 사용됩니다. 특정 조건이 **참(True)**일 때와 **거짓(False)**일 때 각각 다른 코드를 실행할 수 있습니다. if...else는 웹 애플리케이션이나 프로그램의 논리적 흐름을 제어하는 데 중요한 역할을 합니다.

이 가이드는 JavaScript에서 if...else 구조와 그 변형을 설명하고, 다양한 사용 방법을 다룹니다.

1. `if` 조건문

if 조건문은 주어진 조건이 참일 때만 코드를 실행합니다. 조건이 거짓이면 if 블록 내의 코드는 실행되지 않습니다.

1.1. 기본 구문

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

1.2. 사용 예시

const age = 18;

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

2. `if...else` 조건문

if...else 조건문은 조건이 참일 때 if 블록의 코드를 실행하고, 거짓일 때 else 블록의 코드를 실행합니다.

2.1. 기본 구문

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

2.2. 사용 예시

const age = 16;

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

3. `if...else if...else` 조건문

*else if*는 여러 조건을 순차적으로 검사할 때 사용됩니다. 첫 번째 if 조건이 거짓이면, else if 조건을 검사하고, 그 조건이 참이면 해당 블록이 실행됩니다. 모든 조건이 거짓일 경우 마지막의 else 블록이 실행됩니다.

3.1. 기본 구문

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

3.2. 사용 예시

const 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학점");
}
// 출력: "B학점"

4. 중첩 `if` 조건문

중첩 if 조건문은 if 블록 안에 또 다른 if 문을 포함하여 조건을 세분화할 때 사용합니다.

4.1. 사용 예시

const age = 20;
const hasID = true;

if (age >= 18) {
    if (hasID) {
        console.log("입장 가능합니다.");
    } else {
        console.log("신분증이 필요합니다.");
    }
} else {
    console.log("입장 불가합니다.");
}
// 출력: "입장 가능합니다."

5. 조건부 연산자 (삼항 연산자)

삼항 연산자는 **if...else**를 간단히 표현할 수 있는 방법으로, 하나의 조건에 대한 참/거짓에 따라 다른 값을 반환합니다. 삼항 연산자는 주로 짧은 조건문을 처리할 때 유용합니다.

5.1. 기본 구문

조건 ? 참일 때 값 : 거짓일 때 값;

5.2. 사용 예시

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

console.log(message);  // 출력: "성인입니다."

6. 논리 연산자와 함께 사용하기

조건문에서 논리 연산자를 사용하면 여러 조건을 결합하여 하나의 조건으로 평가할 수 있습니다.

6.1. `&&` (AND) 연산자

&& 연산자는 모든 조건이 참일 때만 참을 반환합니다.

const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("운전 가능합니다.");
} else {
    console.log("운전 불가합니다.");
}
// 출력: "운전 가능합니다."

6.2. `||` (OR) 연산자

|| 연산자는 하나라도 참이면 참을 반환합니다.

const hasID = false;
const knowsPassword = true;

if (hasID || knowsPassword) {
    console.log("로그인 가능합니다.");
} else {
    console.log("로그인 불가합니다.");
}
// 출력: "로그인 가능합니다."

6.3. `!` (NOT) 연산자

! 연산자는 조건을 반전시킵니다. 참은 거짓으로, 거짓은 참으로 변경됩니다.

const isVerified = false;

if (!isVerified) {
    console.log("인증이 필요합니다.");
} else {
    console.log("인증되었습니다.");
}
// 출력: "인증이 필요합니다."

7. 비교 연산자와 함께 사용하기

if 조건문에서는 비교 연산자를 사용하여 값의 크기나 동등성을 비교할 수 있습니다. 일반적으로 다음과 같은 연산자를 사용합니다:

==: 값이 동등한지 비교 (형 변환 허용)
===: 값과 타입이 모두 같은지 비교 (형 변환 허용하지 않음)
!=: 값이 동등하지 않은지 비교
!==: 값과 타입이 모두 다른지 비교
>, <, >=, <=: 크기 비교

const a = 5;
const b = "5";

if (a === b) {
    console.log("값과 타입이 모두 같습니다.");
} else {
    console.log("값 또는 타입이 다릅니다.");
}
// 출력: "값 또는 타입이 다릅니다."

8. 주의사항

else 없이 if만 사용할 수 있음: else는 선택사항이므로, 필요하지 않으면 사용하지 않아도 됩니다.
복잡한 조건: 여러 조건을 처리할 때는 논리 연산자(&&, ||)를 사용하여 조건을 간결하게 표현할 수 있습니다.
중첩 if 주의: 중첩된 if는 코드 가독성을 떨어뜨릴 수 있으므로 가능한 한 단순하게 작성하는 것이 좋습니다.

요약

if 조건문: 주어진 조건이 참일 때 코드를 실행합니다.
if...else: 조건이 참일 때와 거짓일 때 각각 다른 코드를 실행합니다.
else if: 여러 조건을 순차적으로 검사할 수 있습니다.
중첩 if: if 블록 안에 다른 if를 사용할 수 있지만, 가독성에 주의해야 합니다.
삼항 연산자: 간단한 if...else 구문을 짧게 표현할 수 있습니다.

if...else 조건문은 코드의 논리적 흐름을 제어하는 데 필수적인 요소입니다. 조건에 따라 코드의 실행을 제어함으로써 유연한 프로그램을 작성할 수 있습니다.

코딩 스쿨 JavaScript