dev_or_alive

[JS][연산자] 삼항연산자 본문

Web Programming/JS

[JS][연산자] 삼항연산자

개발로 먹고살자 2025. 3. 22. 17:29

✅ 삼항 연산자란?

삼항 연산자는 조건에 따라 두 가지 결과 중 하나를 선택할 수 있는 조건 표현식입니다.

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

마치 if문처럼 동작하지만, 한 줄로 표현할 수 있어서 코드가 훨씬 간결해 집니다.


✅ 기본 예제

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

console.log(message); // "성인입니다"
  • age >= 18(조건)이 참이면 message 변수에 "성인입니다" 문자열 할당
  • 거짓이면 "미성년자입니다" 문자열 할당
  • 위 예제 코드에서는 age가 20이므로 true인 조건식이고 이에따라 “성인입니다” 문자열이 할당됩니다.

✅ 삼항 연산자의 장점

✨ 코드가 짧고 간결해요

if문을 사용할 경우 비교적 여러줄로 코드를 입력해야 하지만

삼항연산자를 이용할 경우에는 한줄로 조건 판별, 선언, 값 할당을할 수 있습니다.

// if문
let text;
const isLoggedIn = true;
if (isLoggedIn) {
  text = "환영합니다!";
} else {
  text = "로그인해주세요.";
}
// 삼항 연산자
const isLoggedIn = true;
const text = isLoggedIn ? "환영합니다!" : "로그인해주세요.";

✅ 중첩 삼항 연산자

삼항 연산자 안에 또 다른 삼항 연산자를 넣을 수도 있습니다.

조건이 여러 개일 때 유용할 수 있지만, 오히려 가독성이 떨어질 수 있으니 유의해야합니다.

✨ 예제: 점수에 따른 등급 출력

const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
// -> 90점 이상일 경우 "A" 아닐 경우 80점 이상인지 판단 
// -> 80점 이상일 경우 "B" 아닐 경우 70점 이상인지 판단 
// -> 70점 이상일 경우 "C" 아닐 경우 "F" 
console.log(grade); // "B"

🌀 이렇게 여러 조건을 이어서 쓸 수 있지만, 너무 길어지면 차라리 if-else가 나을 수 있습니다.


✅ 삼항 연산자 vs if문

구분 삼항 연산자 if문
코드 길이 짧고 간결함 길어질 수 있음
사용 목적 값을 바로 반환하거나 할당할 때 여러 줄 로직, 복잡한 조건 처리
가독성 조건이 단순하면 좋음 조건이 많을 땐 더 적합함

✅ 마무리 정리

  • 삼항 연산자는 조건 ? A : B 형식으로 동작합니다.
  • if보다 코드가 짧아져 간단한 조건 처리에 유리합니다.
  • 복잡한 로직에 무리하게 쓰기보다는 if문과 병행해서 사용하는게 좋습니다.

✅ 학습 정리 퀴즈

✨ Q1. 아래 코드의 출력 결과는?

const isRainy = true;
const message = isRainy ? "우산 챙기세요" : "쾌청한 날씨네요!";
console.log(message);
  • "우산 챙기세요"
  • "쾌청한 날씨네요!"

✨ Q2. 다음 코드에서 result 변수에 들어갈 값은?

const num = 7;
const result = num % 2 === 0 ? "짝수" : "홀수";
console.log(result);
  • "짝수"
  • "홀수"

✨ Q3. 다음 중 삼항 연산자 사용 예시로 올바른 것은?

  • score > 70 : "통과" ? "불합격"
  • score > 70 ? "통과" : "불합격"
  • ? score > 70 "통과" : "불합격"

✨ Q4. 삼항 연산자는 어떤 상황에 비추천될까요?

  • 조건이 아주 간단할 때
  • 중첩해서 너무 많은 조건을 표현할 때
  • 값을 변수에 바로 넣고 싶을 때

✨ 정답 확인 (드래그해서 확인하기)

Q1: "우산 챙기세요"
Q2: "홀수"
Q3: 두 번째
Q4: 중첩해서 너무 많은 조건을 표현할 때
반응형

'Web Programming > JS' 카테고리의 다른 글

[JS][연산자] 논리 연산자  (0) 2025.03.22
[JS][연산자] 비교 연산자  (0) 2025.03.22
[JS][연산자] 대입 연산자  (0) 2025.03.20
[JS][연산자] 산술 연산자  (0) 2025.03.17
[JS] 연산자(Operators)  (0) 2025.03.17