JavaScript - 분기 다루기

값,식,문

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

// "값"이 들어가야하는 자리에 "식"이 들어감 (X)
<div id={if (condition) {"msg"}}>Hello World</div>

// 삼항연산자는 "값"으로 귀결되기 때문에 사용 가능 (O)
<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를 검사할 때 유용하다.
• 예시)

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

단축평가 (short-circuit evaluation)

• 단축 연산자를 사용하여 불필요한 분기문을 줄이자.
• 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 || '냐옹') + '입니다.';
}

 

Early Return

간단히 말해서 Nested If Statements(중첩 If문)를 지양하고 If 문을 쪼개서 리턴을 해주라는 이야기이다.

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

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


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

부정 조건문 지양하기

• 직관적이지 않은 코드이기 때문에 지양해야한다.
• 프로그래밍 언어 자체가 if문에 긍정 조건이 오고 그 뒤에 else로 실행이 되기 때문에 굳이 뒤바꿔서 사용할 필요가 없다.

Default Case 고려하기

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

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

 

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

• 괄호를 사용하여 우선순위를 만들자

 

Nullish coalescing operator

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

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

드모르간의 법칙

다음과 같이 연산을 간단하게 할 수 있다.

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