자바스크립트 - If...Else: 초보자 가이드

안녕하세요, kodding을 꿈꾸는 분들! 오늘 우리는 프로그래밍에서 가장 기본적인 개념 중 하나를 배울 것입니다: if...else 문. 이를 코드 내에서 결정자로 생각해보세요, 교차로에서 차를 안내하는 교통 신호와 같습니다. 시작해보겠습니다!

if-else의 흐름도

코드로 뛰어들기 전에 if...else 문이 어떻게 작동하는지 시각화해보겠습니다. 길이岔로에 서 있는 상상해보세요:

[조건]
/    \
/      \
/        \
[참]      [거짓]
|            |
[작업 1]   [작업 2]

이 간단한 다이어그램은 if...else의 본질을 보여줍니다: 조건이 참이면 하나의 작업을 수행하고, 그렇지 않으면 다른 작업을 수행합니다.

자바스크립트 if 문

먼저 기본적인 'if' 문을 시작해보겠습니다. "Nếu đang mưa면 우산을 챙기세요"라고 말하는 것과 같습니다.

let isRaining = true;

if (isRaining) {
console.log("우산을 잊지 마세요!");
}

이 예제에서 isRaining이 참이면 메시지가 출력됩니다. 거짓이면 아무 일도 일어나지 않습니다. 간단하죠?

다른 예제를 시도해보겠습니다:

let temperature = 25;

if (temperature > 30) {
console.log("밖이 덥습니다!");
}

이 경우, 온도가 30도 이상이면 메시지만 출력됩니다. 이 경우에는 아무것도 출력되지 않습니다. 왜냐하면 25는 30보다 크지 않기 때문입니다.

자바스크립트 if...else 문

그렇다면 조건이 거짓이 될 때 어떤 작업을 수행하고 싶다면요? 그때 'else'가 나타납니다. "Nếu đang mưa면 우산을 챙기세요; 그렇지 않으면 선글라스를 쓰세요"라고 말하는 것과 같습니다.

let isRaining = false;

if (isRaining) {
console.log("우산을 잊지 마세요!");
} else {
console.log("화창한 날을 즐겨보세요!");
}

이 경우, isRaining이 거짓이므로 두 번째 메시지가 출력됩니다.

다른 예제를 시도해보겠습니다:

let age = 15;

if (age >= 18) {
console.log("투표할 수 있습니다!");
} else {
console.log("죄송합니다, 너무 젊어 투표할 수 없습니다.");
}

15세는 18세보다 작므로 "죄송합니다, 너무 젊어 투표할 수 없습니다." 메시지가 표시됩니다.

자바스크립트 if...else if... 문

occasionally, life isn't just black and white. We need more options! That's where 'else if' comes in handy. It's like a multiple-choice question.

let grade = 75;

if (grade >= 90) {
console.log("A - Excellence!");
} else if (grade >= 80) {
console.log("B - Good job!");
} else if (grade >= 70) {
console.log("C - Not bad!");
} else if (grade >= 60) {
console.log("D - You need to study more.");
} else {
console.log("F - Oh no! You failed.");
}

In this example, the grade is 75, so the output will be "C - Not bad!". The code checks each condition in order and stops when it finds a true condition.

Let's try one more:

let time = 14;

if (time < 12) {
console.log("Good morning!");
} else if (time < 18) {
console.log("Good afternoon!");
} else {
console.log("Good evening!");
}

Since the time is 14 (2 PM), the output will be "Good afternoon!".

Nested if...else statements

Sometimes, you might need to check for conditions within conditions. This is where nested if...else statements come in handy.

let isWeekend = true;
let isRaining = false;

if (isWeekend) {
if (isRaining) {
console.log("It's a rainy weekend. Perfect for reading a book!");
} else {
console.log("It's a sunny weekend. Let's go for a picnic!");
}
} else {
console.log("It's a weekday. Time to work!");
}

In this example, we first check if it's a weekend. If it is, we then check if it's raining to decide what activity to suggest.

Comparison Table of If...Else Methods

Here's a handy table summarizing the different if...else methods we've covered:

Method	Syntax	Use Case
if	if (condition) { ... }	When you want to execute code only if a condition is true
if...else	if (condition) { ... } else { ... }	When you want one outcome if a condition is true, and a different outcome if it's false
if...else if...else	if (condition1) { ... } else if (condition2) { ... } else { ... }	When you have multiple conditions to check
Nested if...else	if (condition1) { if (condition2) { ... } else { ... } } else { ... }	When you need to check for conditions within conditions

Remember, coding is all about practice. Don't be afraid to experiment with these concepts. Try changing the values in the examples and see how the output changes. That's the best way to learn!

In my years of teaching, I've found that students who play around with the code and make mistakes learn the fastest. So go ahead, break things, fix them, and have fun in the process!

Happy coding, future programmers!

Credits: Image by storyset