한국어 번역

JavaScript - 조건 연산자

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 조건 연산자의 마법의 세계로 들어가 보겠습니다. 코드를 한 줄도 적어보지 않았다면 걱정하지 마세요 - 이 흥미로운 여정에서 친절한 안내자로서 여러분을 안내하겠습니다. 그럼 가상의魔杖(키보드)을 손에握고, 조건의 마법을 부르러 가보겠습니다!

조건 연산자는 무엇인가요?

상상해 보세요, 당신이 신호등이 되었습니다. 당신의 임무는 차량이 가야 할지 멈춰야 할지 결정하는 것입니다. 이게 exactamente JavaScript에서 조건 연산자가 하는 일입니다 - 우리의 프로그램이 특정 조건에 따라 결정을 내리는 데 도움을 줍니다.

삼항 연산자: 조건의瑞士軍刀

오늘 우리의 스타는 삼항 연산자입니다. 이건 마치 축소된, super-efficient if-else 문장입니다. 이를 분해해 보겠습니다:

조건 ? 참일때表현 : 거짓일때表현

이건 마치 질문을 하고 있는 것 같습니다:

• 답이 예( 참)라면, 첫 번째 것을 하라.
• 답이 아니요(거짓)라면, 두 번째 것을 하라.

문법: 조건의 마법의 레시피

조건의 요소들을 보겠습니다:

1. 조건: 우리의 질문입니다. 비가 오고 있나요? 사용자가 로그인 했나요? 수는 짝수인가요?
2. ?: "그렇다면..."과 같은 말입니다.
3. 참일때表현: 조건이 참이라면 어떻게 할 것인가요?
4. :: "그렇지 않으면..."과 같은 말입니다.
5. 거짓일때表현: 조건이 거짓이라면 어떻게 할 것인가요?

예제 1: 날씨 결정자

간단한 예제로 시작해 보겠습니다. 날씨에 따라 우산을 가져야 할지 결정하는 프로그램을 만들어 보겠습니다.

let isRaining = true;
let decision = isRaining ? "우산을 가져가세요" : "우산을 집에 두세요";
console.log(decision);

이 코드를 실행하면 다음과 같은 출력이 나옵니다: "우산을 가져가세요"

이를 분해해 보겠습니다:

• isRaining은 우리의 조건입니다. 이는 true로 설정되어 있습니다.
• 만약 비가 오고 있다면 (isRaining이 참이라면), 우리의 표현은 "우산을 가져가세요"를 반환합니다.
• 만약 비가 안 오고 있다면, "우산을 집에 두세요"를 반환합니다.
• 이 결과를 decision 변수에 저장합니다.

isRaining을 false로 바꿔보고 어떤 일이 일어나는지 확인해 보세요!

예제 2: 나이 검증자

이제 누군가가投票할 수 있는 나이인지 확인하는 프로그램을 만들어 보겠습니다.

let age = 20;
let canVote = age >= 18 ? "네,投票할 수 있습니다!" : "죄송합니다, 너무 어리세요.";
console.log(canVote);

이 outputs 다음과 같습니다: "네,投票할 수 있습니다!"

이를 분해해 보겠습니다:

• 우리는 age를 20으로 설정합니다.
• 우리의 조건은 age >= 18입니다(나이가 18 이상인가요?).
• 만약 참이라면, 우리는 "네,投票할 수 있습니다!"를 반환합니다.
• 만약 거짓이라면, "죄송합니다, 너무 어리세요."를 반환합니다.

나이를 16으로 바꿔보고 출력이 어떻게 바뀌는지 확인해 보세요!

예제 3: 성적 부여자

이제 좀 더 복잡한 예제로 넘어가 보겠습니다. 점수에 따라 성적을 부여하는 프로그램을 만들어 보겠습니다.

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`당신의 성적은: ${grade}`);

이 outputs 다음과 같습니다: "당신의 성적은: B"

와, 이건 다릅니다! 우리는 여러 개의 삼항 연산자를 연속으로 사용했습니다. 이건 마치 결정의 водопад 같습니다:

• 먼저 점수가 90 이상인지 확인합니다. 만약 그렇다면, 성적은 'A'입니다.
• 그렇지 않다면, 점수가 80 이상인지 확인합니다. 만약 그렇다면, 성적은 'B'입니다.
• 이렇게 계속 내려가 'F' 점수로 도달합니다.

이 기법은 강력하지만, 너무 많이 사용하면 코드가 읽기 어려워질 수 있습니다!

null 값 처리: null 연산자

때로는 null이나 undefined 값과 다루어야 할 때가 있습니다. 여기서 null 연산자 ??가 등장합니다:

let username = null;
let displayName = username ?? "손님";
console.log(`환영합니다, ${displayName}!`);

이 outputs 다음과 같습니다: "환영합니다, 손님!"

이를 분해해 보겠습니다:

• 만약 username이 null이나 undefined라면, "손님"을 사용합니다.
• 만약 username에 값이 있다면, 그 값을 사용합니다.

기본 값을 제공하는 데 유용한 방법입니다!

조건 연산자 간단한 참고자료

여기서 배운 연산자们的 빠른 참조 표입니다:

연산자	이름	목적
?:	삼항 연산자	조건에 따라 두 가지 값 중 하나를 선택합니다
??	null 연산자	null이나 undefined 처리 시 기본 값을 제공합니다

기억하시기 바랍니다, 연습이 완벽을 만듭니다! 자신만의 예제를 만들어 이 연산자들을 실험해 보세요. 얼마 지나지 않아, 코드에서 조건문을 전체 오케스트라를 지휘할 수 있을 것입니다!

행복하게 코딩하세요, 그리고 조건문이 항상 참이 되길 바랍니다 (원하는 때에)!

Credits: Image by storyset