[JavaScript][clean-code] 삼항연산자

* 삼항연산자란?

• JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다.
• 보통 if 명령문의 단축 형태로 사용된다.
• 조건 ? 참(값 혹은 식) : 거짓(값 혹은 식)

* 삼항연산자 예시 코드

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// expected output: "$2.00"

console.log(getFee(false));
// expected output: "$10.00"

console.log(getFee(null));
// expected output: "$10.00"

 

* 삼항연산자가 사용되는곳

• 리액트에서
• 알고리즘 숏코딩
• 삼항연사자를 사용해서 무언가의 값을 만들고 그걸 변수로 담아낼때 사용 
• 혹은 함수가 내뱉는 값이 바로 반환할때 값을 반환하는 간단한 경우라면 사용한다.

// 함수가 내뱉는 값이 바로 반환
function alertMessage(isAdult) {
  return isAdult ? '입장이 가능합니다.' : '입장이 불가능합니다.';
}

// 무언가의 값을 만들고 그걸 변수로 담아낼때
// 한번 만들어 놓은 변수로 계속 활용
function alertMessage(isAdult) {
  const isAdult ? '입장이 가능합니다.' : '입장이 불가능합니다.';

  if (isAdult) {
    // some logic
  }
  if (isAdult && gender === 'MAN') {
    // some logic
  }
  if (isAdult && gender === 'WOMAN') {
    // some logic
  }
}

* 삼항연산자 사용에 대한 일관성에 대한 기준을 만들어야한다.

• 만약 조건의 복잡함이있고 조건이 많다면 삼항연산자를 사용하기보단 if else를 이용하고
• 조건들을 정리하였는데 조건이 너무 많다면 switch case를 추천한다.

* 가독성이 좋은 삼항연산자

• 이런 형태로 작성해주면 가독성도 좋고 적기 편하다.
• 괄호를 이용해서 가독성이 좋게 해준다.
• 괄호를 넣어주면 우선순위로 선정된것처럼 보여지는 효과가 있어서 가독성이 좋다.
• 사람이 이해 할 수 있도록 만들어 주는것이 좋다.

const example = condition1
  ? a === 0 // 참
  : 'negative'; // 거짓

// if안에 if가 있으면
const example = condition1
  ? (a === 0 ? 'zero' : 'positive')
  : 'negative'

* 삼항연산자를 이용한 좋은 예시 (Good)

const welcomeMessage = (isLogin) => {
  const name = isLogin ? getName() : '이름없음';

  return `안녕하세요 ${name}`;
};

* 삼항연산자를 이용한 안좋은 예시 (Bad)

// bad case
function alertMessage(isAdult) {
  isAdult
    ? alert('입장이 가능합니다.')
    : alert('입장이 불가능합니다.')
}

• 삼항연산자를 사용하여 참 혹은 거짓인 값 혹은 식을 이용하면 좋은대 위의 코드는 alert라는 함수를 실행하고있다.
• alert는 반환값이 없는 void이기 때문에 undefined가 들어가게 된다.
• 숏코딩에서 사용되는 억지로 삼항연산자를 사용한 경우이다.
• 이럴 경우 if else를 이용하는 쪽이 더 좋다.

* 위의 Bad case를 if else로 수정한 코드

function alertMessage(isAdult) {
  if(isAdult) {
    alert('입장이 가능합니다.');
  } else {
    alert('입장이 불가능합니다.');
  }
}

 

 

* 3개의 피연산자가 필요없는 경우에도 굳이 삼항연산자를 쓰는 경우가 있다.

- 조건 ? 참(값 혹은 식) : 거짓(값 혹은 식)

• 조건을 기준으로 거짓만 필요한 경우
• 조건을 기준으로 참만 필요한 경우
• 이러한 경우에는 Truthy & Falsy를 이용한다.