[클린코드 자바스크립트]Section 5: 분기 다루기

이번 강의는 세션중에 가장 길었던 부분이였다.
분기처리에 관해 배웠는데, 내가 잘 사용하고 있던 부분도 있었고
이렇게 하면 안되는구나를 배웠다.

어쨌든 결론은 내가 읽기 쉬운 코드는 남도 읽기 쉽고
쉽게 짠 코드가 좋은것!

값,식,문

• 문법을 간과하는 경우가 있는데, 문법은 컴퓨터를 이해시켜야하기 때문에 중요함!
• 값과 식과 문을 구분하자.
  

    //'값'이 들어가야하는 자리에 '식'이 들어감
    <div id={if (condition) {'msg'}}> Hello World</div>
    
    //삼항연산자는 '값'으로 귀결되기 때문에 사용가능
    <div id={condition ? 'msg' : null}> Hello World</div>

• () : 함수, 우선순위
• {} : 값과 식만 들어가야함.
• 바로 리턴되는 분기문은 논리연산자를 사용하자.

if (conditionOne) {return <span>one</span>;}

{conditionOne && <span>one</span>}

삼항연산자

• 피 연산자가 조건, 참일 때, 거짓일 때 세개 인것을 잊지말자.
• 삼항연산자를 과도하게 중복해서 사용하는 경우를 피하자
  1. if를 사용하여 조건을 나누자
  2. else-if를 과도하게 사용하는 것 보다는 switch가 더 효과적
• 조건이 여러개일 경우 가독성을 생각해서 작성하자
• 반환 값이 없는 함수는 삼항연산자로 사용하지 말자

truthy & falsy

• boolean 타입이 아니여도 참과 거짓으로 귀결되는 값이 있음.
• null과 undefined를 검사할 때 유용함!
• 여기서 자세히 보자

단축 연산자

• 단축 연산자를 사용하여 불필요한 분기문을 줄이자.
• AND 연산자와 OR 연산자
  

    //참->참=>리턴
    true && true && '도달 O'
    //참->거짓 =>리턴
    true && false && '도달 X'
    
    //거짓 -> 거짓 => 리턴
    false || false || '도달 O'
    //참 -> 즉시 리턴
    true || true || '도달 X'

• or연산자 : Default 값이 있을 때 사용하기 좋음.
  

    function favoriteDog(someDog){
        let favoriteDog;
        if(someDog){
            favoriteDog = dog;
        }
        else {
            favoriteDog = '냐옹';
        }
        return favoriteDog + '입니다.';
    }
    
    //someDog가 들어있으면 True, someDog출력
    //someDog가 null이거나 undefined면 냐옹 출력
    function favoriteDog(someDog){
        return (someDog || '냐옹') + '입니다.';
    }

내 코드에 적용하기

• 개인프로젝트로 진행했던 코드를 수정했다.
• 리액트로 처음 만들어보는 프로젝트라 가독성과 효율이 정말 별로였는데 읽기 좋아졌다.

원래코드

const handleInputName = e => {
    setName(e.target.value);
			gender !== "" && name !== "" && grade !== "" && targetSe !== ""
      ? setIsActive(true)
      : setIsActive(false);
    returnActive() ? setIsActive(true) : setIsActive(false);
  };

const handleInputBelong = e => {
    let value = e.target.value;
    value === null || value === "" || value === " "
      ? setBelong("-")
      : setBelong(e.target.value);
  };

수정 후 코드

const returnActive = () => {
    return gender && name && grade && targetSe;
  };
const handleInputName = e => {
    setName(e.target.value);
    returnActive() ? setIsActive(true) : setIsActive(false);
  };

const handleInputGrade = e => {
    let value = e.target.value;
    value  ? setGrade("-") : setGrade(value);
  };

if문

• if문의 크기를 줄이자.

else - if 피하기

• else if의 경우 if문이 처리되고, else에서 다시 if문을 작동하는 것과 같다.
• if문을 써서 조건을 명확하게 나누자.
• 정 안된다면 switch 문을 사용해서 나누자.

else 피하기

• 자바스크립트는 return되면 return 이후의 코드는 실행되지 않는다.
• else문을 꼭 작성할 필요가 없고, 잘못 사용시 로직이 생각처럼 흐르지 않을 수 있다.

//사용자에게 인사를 하는 함수
//단, 미성년자가 오면 report필요
function getHelloCustomer(user){
  if (user.age < 20){
    report(user) 
  }
  else{
    return '안녕하세요.'
  }
}
//위와 같은 경우 미성년자 고객에겐 인사가 리포트가 안되는 이슈가 있음 -> 로직 문제

//아래와 같이 작성하면 의도한 대로 동작함.
function getHelloCustomer(user){
  if (user.age < 20){
    report(user) 
  }
  return '안녕하세요.'
}

Early Return

• 하나의 로직에 많은 의존성을 담고 있을 때 사용한다.
• 동작하지 않을 경우의 분기문을 작성해서 함수를 미리 종료시킨다.
• 코드가 더 직관적으로 읽힌다.

function loginService(isLogin, user) {
  if (!isLogin) {
    if (checkToken()) {
      if (!user.nickName) {
        return registerUser(user);
      } else {
        refreshToken();
      }
    } else {
      throw new Error("No Token");
    }
  }
}

/*
	위와 같은 코드를 Early Return을 사용하여 
	같은 로직이니만 아래처럼 직관적으로 바꿀 수 있다.
*/

function loginService(isLogin, user) {
  if (isLogin) {
    return;
  }
  if (!checkToken()) {
    throw new Error("No Token");
  }
  if (!user.nickName) {
    return registerUser(user);
  }

		login();
}

function login(){

	refreshToken();
  return "로그인 성공";
}

부정 조건문 지양하기

• 직관적이지 않은 코드이기 때문에 지양해야한다.
• 프로그래밍 언어 자체가 if문에 긍정 조건이 오고 그 뒤에 else로 실행이 되기 때문에 굳이 뒤바꿔서 사용할 필요가 없다.
• 부정 조건문을 사용하는 경우
  1. Early Return
  2. Form Validation
  3. 보안 혹은 검사하는 로직

Default Case 고려하기

• 함수를 작성할 때 매개변수가 없어도 동작하도록 해야 조금 더 안전한 코딩을 할 수 있다.
• 특히 프론트엔드 개발자로써, 디폴트 케이스를 넣어주면 사용자의 실수로 에러가 나는 것을 방지할 수 있다.
• 만들어진 함수를 다시 만들어서 사용하는 것도 가능하다.

function safeParseInt(number,radix){
	return parseInt(number, radix || 10);	
}

명시적인 연산자 사용 지양하기

• 괄호를 사용해서 눈에 보이는 우선순위를 만들어주자.

null 병합 연산자

• 0은 falsy라서 false로 리턴되는데, 다른 Falsy값을 제외하고
  null과 undefined만 구분할 때 사용하면 좋다.

function safeParseInt(number,radix){
	return parseInt(number, radix ?? 10);	
}

드모르간 법칙

!(A && B) == !A || !B

• 연산을 간단하게 할 수 있음
• 항상 간단한 연산을 작성할 수 있도록 하자.