[JavaScript] 삼항연산자

조건부 삼항 연산자는 if문의 단축형태임

• JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자임

형태

조건문 ? (true일때 실행할식) : (false일때 실행할 식)

false, null, NaN, 0, "", undefined가 인자로 들어가면 (false일때 실행할 식)을 반환

예시1

let age = 28;
let beverage = (age >= 21) ? "Beer" : "Juice";

console.log(beverage); // Beer

예시2 null 값 처리하기

let 인사 = person => {
	let name = person ? person : 'stranger'
	return `굿모닝, ${name}`
}

console.log(인사('도연')) //굿모닝, 도연
console.log(인사(null)) //굿모닝, stranger


let 인사 = person => {
	let name = person ? person.name : 'stranger' //객체 is truthy
	return `굿모닝, ${name}`
}

console.log(인사({name: '도연'})) //굿모닝, 도연
console.log(인사(null)) //굿모닝, stranger

예시3 연속된 조건문 형식으로 쓸 수 있나?

function 예시(...) {
  if (조건1) { return 값1; }
  else if (조건2) { return 값2; }
  else if (조건3) { return 값3; }
  else { return 값4; }
}

// 반복되는 if문..  삼항연산자로도 쓸 수 있을까?

function 예시(...) {
   return 조건1 ? 값1 
        : 조건2 ? 값2 
        : 조건3 ? 값3 
        : 조건4;
}

예시4 리액트에서 삼항연산자 사용하기(JSX문법)

let arr = [{id:1, name:Dongwoo}, {id:2, name:Honga} , {id:1, name:Doyeon }];

const arrs = () => {
 return(
   <ul>
      {arr.map((name) => {
         const isDoyeon = arr.name === 'Doyeon'
         const decoNameClass = isDoyeon ? 'name name_background_pink' : 'name';

         return (
         <span className={decoNameClass}>{arr.name}</span>
         //이름이 '도연'인 경우, 참값에 해당하는 className을 해당 엘리먼트에 할당하여 이름 배경색을 핑크색으로 바꾼다.
         );
        
      })}
   </ul>
  );
};

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator