동양 식자재 마트 몰 프로젝트

## 2. 삼항 연산자 다루기

> 삼항연산자의 일관성

: 삼항 연산자를 이용한 나만의 방법이 있는가? 숏코딩에 주로 사용하는가?
: 삼항연산자를 사용함에 있어서 일관성을 가지는 것이 중요하다.

> 삼항연산자 조건

: 삼항연산자는 3개의 `피연산자`를 가진다.
: `조건` ? `참`[식] : `거짓` [식]
: 참과 거짓 연산자는 `식`임에 주의 (if문, for문 불가)

> 01.삼항연산자 BadCase

: if-else 문을 사용하는 것이 훨씬 더 직관적으로 이해하기 좋다
: if-else 문 보다는 switch문을 이용하는 게 더 적합하다.
: edge케이스를 else로 처리하는 것보다 default로 처리하는 것이 현업에서 더 자주 사용

```js
function example() {
  return condition1
    ? value1
    : condition2
    ? value2
    : condition3
    ? value3
    : value4;
}

function example() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}

function example() {
  const condition = condition1 || condition2 || condition3 || condition4;
  let value = "";

  switch (condition) {
    case conditon1:
      value = value1;
      break;
    case conditon2:
      value = value2;
      break;
    case conditon3:
      value = value3;
      break;
    default:
      value = value4;
  }
  return value;
}
```

> 02.삼항연산자 BAD Case

: 삼항연산자가 중첩되어 있기 때문에, 직관적으로 파악하기 어렵다.
: 따라서 사람중심적으로 생각하여 이해가 쉽도록 한다.
: `괄호`를 통래 우선순위를 직관적으로 파악할 수 있도록 한다.

```js
//BAD CASE
const example = condition1 ? (a === 0 ? "zero" : "positive") : "negative";

//BETTER CASE
const exampler = condition1 ? (a === 0 ? "zero" : "positive") : "negative";
```

> 03.삼함연산자 GODD CASE
> : Nullable 한 상황에서 예외처리를 위해 삼항연산자를 사용할 수 있다.

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

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

//if문을 이용한 BAD CASE
const welcomeMessage = (isLogin) => {
  if (isLogin) {
    return `안녕하세요 ${getName()}`;
  }
  return `안녕하세요 이름없음`;
};
```

> 04.삼항연산자 BAD CASE

: alert는 인자에 상관없이 'undefined'를 반환하기 때문에, 사실상 isAdult에 따라서 같은 값을 반환하고 있다.
: 따라서 삼항연산자의 본질보다는 `숏코딩`에 가까운 CASE이다.

```js
function alertMessage(isAdult) {
  isAdult ? alert("입장이 가능합니다.") : alert("입장이 불가능합니다.");
}

//BETTER CASE
function alertMessage(isAdult) {
  if (isAdult) {
    alert("입장이 가능합니다.");
  } else {
    alert("입장이 불가능합니다.");
  }
}
```

> 05.Poco의 삼항연산자 사용 CASE

: 1. 삼항연산자를 사용해서 무언가의 값을 만들고 변수로 담아낼 때
`const name = isLogin ? getName() : "이름없음"; `
: 2. 함수가 내뱉는 값이 간단할 때
`return isAdult ? '입장이 가능합니다' : '입장이 불가합니다'; `

### 요약

삼항연산자는 3개의 피연산자를 가지고, 피연산자는 `식`임에 주의해야한다.
삼항연산자는 주로 조건에 따라 다른 값을 뱉어낼 때 사용된다.
삼항연산자를 중첩해서 사용한다면 사용자가 직관적이해가 어려울 수 있으므로 if-else문, switch문을 고려하고, 단순 숏코딩을 위해서 사용하는 것이 아닌지 체크한다.

삼항연산자 사용은 자신만의 기준을 가지고 일관성 있게 사용하는 것이 바람직하다.