Clean Code Javascript

유데미 클린코드 자바스크립트 강의를 학습하며 실제로 적용해볼 수 있는 사례나 이론을 기록한 내용이다.

Early Return을 활용한 else if 피하기

else if 및 else로 nested 된 이해하기 어려운 코드를 ealry return을 통해 좀 더 간결하고 이해하기 쉽게 만들 수 있다.

• 수정 전 로그인 로직

function loginService(isLogin, user) {
  if (!isLogin) {
    if (checkToken()) {
      if (!user.nickname) {
        return registerUser(user);
      } else {
        refreshToken();

        return "로그인 성공";
      }
    } else {
      throw new Error("No Token");
    }
  }
}

• 수정 후 로그인 로직

function login() {
  refreshToken();

  return "로그인 성공";
}

function loginService(isLogin, user) {
  if (!isLogin) {
    return;
  }

  if (!checkToken()) {
    throw new Error("No Token");
  }

  if (!user.nickname) {
    return registerUser(user);
  }

  login();
}

Default Case 고려하기

공통으로 사용하는 함수를 정의하다보면 간혹 기본값을 고려하지 않는 경우가 많다. default case를 명시적으로 선언해주지 않으면 의도하지 않았던 값이나 빈값을 넣었을 때 해당 함수가 어떤걸 내뱉을지 모른다. 아래와 같이 edge case를 고려하는 코드를 지양하도록 하자.

function sum(x,y) {
  x = x || 1
  y = y || 1
  
  return x + y;
}

sum(100,200); // 300

// default case를 고려했기에 2를 리턴한다.
sum(); // 2

Nullish Coalescing Operator

Nullish Operator ?? 는 undefined , null만 평가할 수 있는 논리 연산자이다.

• 사용 예제

(null || undefined) ?? "foo"; // foo

• 주의할 점

null 병합 연산자는 OR 연산자와 혼합해서 쓸 경우 SyntaxError를 발생시키므로 주의해야한다.

null || undefined ?? "foo" // SyntaxError
true || undefined ?? "foo" // SyntaxError