[자바스크립트] 삼항 조건 연산자

송히·2023년 8월 4일
0

개발 공부 🐨

목록 보기
3/15
post-thumbnail

알고리즘에서도 사용되고 개발에서도 사용되는 삼항 연산자 !!

if문을 길게 나열하지 않고 한 줄로 깔끔하게 적을 수 있는 자바스크립트의 삼항 조건 연산자에 대해 공부했습니다😊


1. 삼항 조건 연산자

if문을 간결하게 사용하고 싶을 때 사용되는 삼항 조건 연산자(Ternary operator)는 참, 거짓에 따라 결과를 내놓는다.
(조건) ? (true일 때 실행 값) : (false일 때 실행 값)의 형식으로 사용한다.`


1-1. 삼항 조건 연산자 예시

같은 조건의 if문과 삼항 연산자같은 결과를 반환한다.

//if문
let a = 100;
let b = 5;

if(a > b) console.log(true);
else console.log(false);

//삼항 조건 연산자
let result = a > b ? true : false;
console.log(result);

a > b100 > 5 이므로, if문과 삼항 연산자의 결과는 모두 true가 출력된다.


1-2. 다중 삼항 조건 연산자 예시

(조건1) ? (true1일 때 실행 값) : (조건2) ? (true2일 때 실행 값) : ...(반복) : (조건n) ? (true_n일 때 실행 값) : (false_n일 때 실행 값)
조건이 여러 개일 때도 위와 같이 조건 삼항 연산자를 사용할 수 있다.
또한, 조건이 여러 개인 if문과 삼항 연산자같은 결과를 반환한다.

//if문
let a = 45;

if(a < 5) console.log("5보다 작은 수 입니다.");
else if(a < 10) console.log("5 이상 10보다 작은 수 입니다.");
else if(a < 50) console.log("10 이상 50보다 작은 수 입니다.");
else console.log("50이상의 수 입니다.");

//삼항 조건 연산자
let result = a < 5 ? "5보다 작은 수 입니다."
		: a < 10 ? "5 이상 10보다 작은 수 입니다."
		: a < 50 ? "10 이상 50보다 작은 수 입니다."
		: "50 이상의 수 입니다."

console.log(result);

10 < a < 50이므로, if문과 삼항 연산자의 결과는 모두 "10 이상 50보다 작은 수 입니다."가 출력된다.

참고한 자료: [Javascript] 물음표(?) / 삼항 연산자 / 조건 연산자 / 조건문

profile
데브코스 프론트엔드 5기

0개의 댓글

관련 채용 정보