Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- node
- html 색상적용
- 느슨한 비교
- vue3 fullpage
- nvm
- html 화면 이동
- javascript
- map함수
- vue
- css 적용방법
- fullpage
- 산술연산자
- React
- CSS
- css 길이단위
- vue fullpage
- Linux
- css 색상변경
- html
- html 엔터 입력
- html link
- em rem 차이
- bold처리
- js 연산자
- 연산자
- html 요소 속성
- 엄격한 동등비교
- js
- html 이미지 표출
- form 주요 태그
Archives
- Today
- Total
dev_or_alive
[JS][연산자] 삼항연산자 본문
✅ 삼항 연산자란?
삼항 연산자는 조건에 따라 두 가지 결과 중 하나를 선택할 수 있는 조건 표현식입니다.
조건 ? 참일 때 값 : 거짓일 때 값
마치 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: 중첩해서 너무 많은 조건을 표현할 때
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 |