[JS] 삼항연산자

Hyun·2021년 12월 30일
0

JS

목록 보기
5/20
post-thumbnail

삼항연산자란?

JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자
맨 앞에 조건문, 물음표(?), 조건이 참(truthy)이라면 실행할 식, 콜론(:), 조건이 거짓(falsy)이라면 실행할 식으로 이루어진다.
보통 if 명령문의 단축 형태로 쓰입니다.

구문

condition ? exprIfTrue : exprIfFalse

매개변수

condition (조건문)
조건문으로 들어갈 표현식
exprIfTrue (참일 때 실행할 식)
조건문이 Truthy일 때 실행되는 표현식입니다. (true일 때 치환될 값입니다).
exprIfFalse (거짓일 때 실행할 식)
조건문이 falsy일 때 실행되는 표현식입니다. (false일 때 치환될 값입니다).

<Truthy 와 Falsy의 개념>

false외에도 null,NaN, 0, 비어있는 문자 값 (""), 그리고 undefined으로 조건문에 false 값으로 사용 가능 합니다.
이 값들이 조건문으로 사용된다면 exprIfFalse이 결과로 나오게 됩니다.

let a = 5;

if (a > 0) {
  console.log("양수");
} else {
  console.log("음수");
}

 //<결과>
 //양수

양수라는 결과를 얻을 수 있다.
간단한 조건식에 5줄이나 되는 코드를 삼항연산자를 이용하면 1줄로 만들 수 있다!

let a = 5;

a > 0 ? console.log("양수") : console.log("음수");

 //<결과>
 //양수

let a = [];

if (a.length === 0) {
  console.log("빈 배열");
} else {
  console.log("안 빈 배열");
}

 //<결과>
 //빈 배열

이 코드를 삼항연산자를 이용하면

let a = [];

a.length === 0 ? console.log("빈 배열") : console.log("안 빈 배열");

 //<결과>
 //빈 배열

한줄로 줄일 수 있다!
또, 이 코드를 아래와같이 값만 입력하여 할수도있다.

let a = [];

const arrayStatus = a.length === 0 ? "빈 배열" : "안 빈 배열";
console.log(arrayStatus);

 //<결과>
 //빈 배열

let a = [];

const result = a ? true : false;
console.log(result);

//<결과>
//true

삼항연산자에 Truthy 와 Falsy의 개념을 넣어 사용할 수도 있다.


let score = 40;

score >= 90
  ? console.log("A+")
  : score >= 50
  ? console.log("B+")
  : console.log("F");
  
  //<결과>
  //F

위와같이 삼항연산자를 중첩으로 사용할경우, 가독성이 떨어지기때문에 if문을 사용하는것이 좋다

let score = 40;


if (score >= 90) {
  console.log("A+");
} else if (score >= 50) {
  console.log("B+");
} else {
  console.log("F");
}
 
  //<결과>
  //F
profile
FrontEnd Developer (with 구글신)

1개의 댓글

comment-user-thumbnail
2022년 10월 9일

감사합니다

답글 달기