[강의] 클린코드 js 정리

# 분기다루기

## 1. 값식문

> 문법이 중요한 이유

: 프로그래밍도 하나의 언어이기 때문에
: 컴퓨터를 이해 시켜주어야 하기 때문에, 이해시키지 못한다면 문법(syntax)에러 발생 -> 큰 서비스 오류로 이어짐

> Case 1

```js
// JSX 문법
ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);

// is transformed to this JS by Babel:
ReactDOM.render(
  React.createElement("div", { id: "msg" }, "Hello World!"),
  mountNode
);
```

> case 2

: 객체의 값으로 문(if,while)은 들어갈 수 없다.
: 삼항연산자와 같은 식은 값을 할당하기 때문에 객체의 값으로 사용가능하다.

```js
//JSX
<div id={if (condition) {'msg'}}>Hello World</div>

//It is transeformed to this JS by Babel
React.createElement("div", {id: if(condition){'msg'}} , "Hello World");
// 동작하지 않음 : 객체의 값으로 if조건문이 들어갔기 때문에

<div id ={condition ? 'msg' : null}> Hello World </div>
// 정상 동작: 객체의 값으로 삼항연산자 식에 의해 값이 할당되기 때문
```

> case 3

: (꼼수)조건문이 값을 바로 리턴하도록 한다면 사용가능하다. (by IIFE,즉시실행함수)

> case 4

: 조건문을 통해 값을 만드는 것보다, 고차함수를 이용하여 값과 식으로만 코드를 개선할 수 있다.

> case 5

### 요약

함수의 인자들로 조건문,for문 등을 받을 수 있을까에 대한 고민에서 시작

React의 JSX는 Babel에 의해 transeformed 되는데, 이 때 JSX의 요소들은 함수의 인자들로 취급된다.<br />
함수의 인자들은 `값과 식`으로만 이루어져야 하므로 if문,for문 등은 문법오류를 발생시킨다.

즉시실행함수로 감싼다면 조건문들도 사용가능할 수 있지만, 고차함수등을 이용하여 값과 식을 사용하는 것을 지향한다.

## 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문을 고려하고, 단순 숏코딩을 위해서 사용하는 것이 아닌지 체크한다.

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

## 3. Truthy & Falsy

js동적인 타입이기 때문에, 의도하지 않은 형변환이 자주 발생한다.

> Truthy한 값

- true, {} , [] , 42, "0", "false", new Date(), -42, 3.14, 12n, Infinity, -Infinity

> Falsy한 값

- false, null, undefined, 0 ,NaN, '', -0, 0n

: 엄격한 조건보다는 null || undefined를 동시에 체크해야할 때 !Falsy를 통해 주로 사용한다.

## 4. 단축평가 (short-circuit evaluatuion)

: 단축평가란 논리연산자, 삼항연산자를 통해 어디까지 값이 계산되는지를 파악하고, 최대한 계산량을 줄이는 것.
: && 연산자는 하나라도 Falsy가 나오면 계산을 멈춤
: || 연산자는 하나라도 Truthy가 나오면 계산을 멈춤

```js
true && true && "도달 O";
true && false && "도달 X";

false || false || "도달 O";
true || false || "도달 X"; // false 리턴
true || true || "도달 X";
```

> 단축평가를 통해 if문을 줄여서 사용할 수가 있다.

: or연산자는 default값이 정해져있을 때 사용하기 편리하다.
: `return 할당되는값 || default값`

> 01.or연산자 CASE

```js
// BAD Case - if문
function fetchDate() {
  if (state.data) {
    return state.data;
  } else {
    return "Fetching...";
  }
}
// BAD Case - 삼항연산자
function fetchDate() {
  return state.data ? state.data : "Fething...";
}

// GOOD Case - or단축평가
function fetchDate() {
  return state.data || "Fetching...";
}
```

> 02.or연산자 CASE

```js
// BAD CASE
function favoriteDog(someDog) {
  let favoriteDog;
  if (someDog) {
    favoriteDog = someDog;
  } else {
    favoriteDog = "냐옹";
  }

  return favoriteDog + "입니다";
}

// GOOD CASE
function favoriteDog(someDog) {
  return (someDog || "냐옹") + "입니다";
}
```

> 3.

```js
// CASE
const getActiveUserName = (user, isLogin) => {
  if(isLogin){
    if(user){
      if(user.name){
        return user.name
      } else {
        return '이름없음'
      }
    }
  }
}

// GOOD CASE
// &&연산자로 한 depth 처리
const getActiveUserName = (user, isLogin) => {
  if(isLogin && user){
    if(user.name){
      return user.name
    } else {
      return '이름없음'
    }
  }
}

// || 연산자로 default값 처리
const getActiveUserName = (user, isLogin) => {
  if(isLogin && user){
      return user.name || '이름없음'
    }
  }
}
```

## 5. else if 피하기

> 01.BAD CASE - else if 가독성 저하 사례

: (내생각) else if문은 실행되지 않을 것이다.
: else if 문은 promise의 체이닝(`.then().then() ... `) 구조와 다르다.
하지만 코드흐름상 파이프 라인 처럼 실행될 것 처럼 보이기 때문에, else if문의 사용은 지양되며, 여러개의 else if문이 필요할 경우 switch문을 사용한다.
: 혹은 조건은 더 명확히 하여 여러개의 단일 if문으로 작성할 수 있다.

```js
const x = 1;

if (x >= 0) {
  ("x는 0과 같거나 크다");
} else if (x > 0) {
  ("x는 0보다 크다");
} else {
  ("Else");
}
```

## 6. else 피하기

> 01.if-else BADCASE - 단축평가 대체 가능

```js
// BAD
function getActiveUserName(user) {
  if (user.name) {
    return user.name;
  } else {
    return "이름 없음";
  }
}
// BETTER
function getActiveUserName(user) {
  if (user.name) {
    return user.name;
  }
  return "이름 없음";
  }
}
// GOOD
function getActiveUserName(user) {
  return user.name || "이름 없음";
}
```

> 02.if-else BAD CASE - 하나의 함수가 2개의 역할을 할 때

: 함수의 이름만 본다면, 인사를 리턴해야하는 함수이다. 그런데 특정 조건이 추가되면서 2가지 역할을 하는 함수가 되고, else 문으로 인해 함수에 이름에 맞는 동작이 아예 실행되지 않는 케이스가 발생하게 된다.

: 포인트는 습관적으로 `if문과 함께 else를 사용하는 것에 주의`해야한다는 것

```js
/* age가 20 미만 시 특수 함수 실행*/

//BAD - age < 20 일 때, 인사하는 동작이 아예 실행이 안됨.
function getHelloCustomer(user) {
  if (user.age < 20) {
    report(user);
  } else {
    return "안녕하세요";
  }
}

// BETTER - 특수조건에 상관없이 인사하는 동작이 실행되도록 함.
function getHelloCustomer(user) {
  if (user.age < 20) {
    report(user);
  }
  return "안녕하세요";
}
```

## 7. early Return

> 01.if-else문 BADCASE - 중첩되었을 경우

: 로그인 과정<br />
: 1) 로그인 여부 확인 -> 2) 토큰 존재 여부 확인 -> 3)기가입유저 확인 -> 4) 가입 or 로그인
: early Return을 사용할 경우, `사람이 생각하는 대로 코드가 동작`하게 된다.
: 로그인의 예외사항들이 차례대로 리턴되고, 정상동작 코드만이 최종적으로 남게된다.

```js
// BADCASE
function loginService(isLogin, user) {
  if (!isLogin) {
    if (checkToken()) {
      if (!user.nickName) {
        return registerUser(user);
      } else {
        refreshToken();
        return "로그인 성공";
      }
    } else {
      throw new Error("No Token");
    }
  }
}

//GOOD CASE - by Early Return
function loginService(isLogin, user) {
  // 예외1. 로그인 된 경우 early Return
  if (isLogin) {
    return;
  }
  // 예외2. 토큰 없는 경우 에러
  if (!checkToken()) {
    throw new Error("No Token");
  }
  ㅊ;
  if (!user.nickName) {
    return registerUser(user);
  }
  // 정상동작. 로그인 성공
  refreshToken();
  return "로그인 성공";
}
```

> 02.하나의 로직이 많은 의존성이 붙어 있는 경우,

```js
// BAD CASE
function 오늘하루(condition, weather, isJob) {
  if (condition === "Good") {
    공부();
    게임();
    유튜브();
  }

  if (weather === "Good") {
    운동();
    빨래();
  }

  if (isJob === "Good") {
    야간업무();
    조기취침();
  }
}

// GOOD CASE
function 오늘하루(condition, weather, isJob) {
  if (condition !== "Good") {
    return;
  }
  공부();
  게임();
  유튜브();

  if (weather !== "Good") {
    return;
  }
  운동();
  빨래();
  if (isJob !== "Good") {
    return;
  }
  야간업무();
  조기취침();
}
```

### 요약

Early Eeturn을 사용하는 경우, 로직의 흐름을 더 명확하고 간결해내게 표현할 수 있다.

## 8. 부정 조건문 지양하기

지양하는 이유1
: 부정조건의 경우 직관적으로 한 번에 이해하기가 어렵다.
: 따라서 사람이 생각하게 할 것을 최소화한다. ex. if(isNaN(3))

지양하는 이유2
: if-else문은 부정문에 해당하는 것은 후순위이며, else-if문 순으로 사용하는 경우가 없다.
: 프로그래밍 언어 자체가 if문이 처음오고, true부터 실행시킨다.

> BAD CASE - NAN의 경우

```js
const isCondition = true;
const isNotCondition = false;

// NaN : Not a Number

// BAD : 조건 직관적 이해 어려움
if (!isNaN(3)) {
  // 숫자일 때만 동작하도록
  console.log("숫자입니다.");
}

// GooD : 숫자임을 확인하는 util함수 만들어 해결
function isNumber(num) {
  return !Number.isNaN(num) && typeof num === "number";
}
if (isNumber(3)) {
  console.log("숫자입니다.");
}

// Bad: 부정조건을 붙이는 것 보다. 긍정조건에 부정키워드(!)를 곁들여 사용하는 것이 더 바람직
if (isNotCondition) {
}

// Good: 조건이 거짓일 때만 실행
if (!isCondition) {
}
```

### 부정조건문을 사용하는 경우

1. Early Return
2. Form Validation
3. 보안, 검사로직

의 경우 예외적으로 부정조건문을 사용하기도 한다.

## 9. Default Case 고려하기

: Edge Case라고도 하며, 반복되고 당연한 연산의 경우 Default 값을 지정하여 연산을 간단하게 만들 수 있다.

: 사용자의 입력을 받는 경우, 항상 특이 케이스를 유의해야한다.

: 라이브러리의 경우, 수 많은 인자에 대하여 default값을 제공하므로 주의해야한다. (당연하게 사용한다면 모를 수 있다. parseInt의 두번째 인자의 default값이 10이다.)

> 01 Case

```js
// 값이 입력되지 않는다면 1을 default 값으로 한다.
function sum(x, y) {
  x = x || 1;
  y = y || 1;
  return x + y;
}
```

## 10. 명시적인 연산자 사용 지향하기

: 연산자의 순서를 외우는 것도 좋지만, 명시적으로 `()`를 통해 순서를 지정하는 것이 더욱 바람직하다.

: 증감연산자의 사용을 지양한다.
  - 예측가능한 코드를 작성하도록 한다.
  - 디버깅이 가능하도록

> 01 CASE - 괄호를 통한 연산자 숫자 명시
```js
// BAD
if(isLogin && token || user){...}

// GOOD
if( (isLogin && token) || user)
```

> 02 CASE - 예측가능한 코드
```js
// BAD - 루프문 사이에 있거나, 디버깅의 어려움이 존재
function increment(){
  number ++;
}

// GOOD
function increment(){
  number = number + 1
}
```
## 11. Nullish coalscing operator (다시 듣기)

> 널병합 연산자 `??`
: 좌항이 `null` 혹은 `undefined` 인 경우에만 우항이 실행된다.

> 사례로 살펴보기

> Early Return시 유의
> 부작용
널병합 연산자와 || 연산자를 통한 단축평가를 진핼할 때

> 논리연산자와 병합연산자가 동시에 사용될 수 없는 제약이 존재
## 12 드모르간의 법칙
: 드모르간의 법칙으로 논리연산자 1step 벗겨내기

> 새로운 기획으로 로그인 실패로직이 필요해진다면?
> !(A && B) => (!A || !B)

```js
const isValidUser = true; // 서버에서 받아왔다고 가정
const isValidToken = true; //    ""

if(isValideToken && isValidUser){
  console.log('로그인 성공!');
}

// BAD CASE - 따라가기 어려움
if(!(isValidToken && isValidUser)){
  console.log('로그인 실패!!')
}

// GOOD CASE
// Token이 valid 하지 않으면 실패, User가 Valid하지 않으면 실패로 사람의 생각흐름대로 코드가 짜여지게 됨
if(!isValidToken || !isValidUser){
  console.log('로그인 실패!!')
}

```