[js] 코드 최적화 - falsy값, 삼항 연산자, fallback값(nullish값 체크)

falsy값 체크, 삼항 연산자, fallback값(nullish값 체크)의 코드 최적화 방법 (클린코드)

 

1. falsy값 체크

타입스크립트가 아니라 자바스크립트를 사용한다면 꼭 해야하는게 타입 체크이다.
특히, null ,undefined ,0 ,false ,NaN , "" 값을 체크해서 점검해야 할 때가 있다.

논리 부정연산자인 "!" 를 이용하면 쉽게 쓸 수 있다.

const isFalsy = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
const isFalsy2 = (value) => !value;

isFalsy(value), isFalsy2(value)는 동일하게 동작한다.

 - value가 falsy값이라면 true 아니라면 false가 반환된다.

2023.02.03 - [개발 용어 정리] - [개발용어] 거짓같은 값(falsy)

[개발용어] 거짓같은 값(falsy)

 

 

2. 삼항 연산자

 2-1) 조건이 복잡한 if-else 문이 아니라면 삼항 연산자로 코드를 깔끔하게 유지할 수 있다.

let info;
if (value < minValue) {
  info = "Value is smaller than minValue";
} else if (value > maxValue) {
  info = "Value is bigger than maxValue";
} else {
  info = "Value is in range";
}

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
const info2 =
  value < minValue
    ? "Value is smaller than minValue";
    : value > maxValue 
    ? "Value is bigger than maxValue";
    : "Value is in range";

info의 값과 info2의 값은 동일하게

1. value의 값이 minValue보다 작으면 "Value is smaller than minValue"이다.

2. value의 값이 maxValue보다 크면 "Value is bigger than maxValue"이다.

3. value의 값이 minValue보다 크거나 같고 maxValue보다 작거나 같으면 "Value is in range"이다.

 

 2-2) 함수 또한 삼항 연산자로 코드를 깔끔하게 유지할 수 있다.

function function1() {
  return console.log("function1 실행");
}
function function2() {
  return console.log("function2 실행");
}

if (value) {
  function1();
} else {
  function2();
}

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
(value ? function1 : function2)();

value가 true라면 function1이 실행된다. (function1 실행이 콘솔에 찍힌다)

value가 false라면 function2가 실행된다. (function2 실행이 콘솔에 찍힌다)

 

 

3. fallback 값 할당

let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다. (삼항 연산자 사용)
const name2 = user?.name ? user.name : "Anonymous";

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다. (|| 사용)
const name3 = user?.name || "Anonymous";

// 아래 코드는 위 코드들과 조금 다르게 동작한다. (?? 사용)
const name4 = user?.name ?? "Anonymous";

console.log("name = ", name,"name2 = ", name2,
            "name3 = ", name3,"name4 = ", name4)

 

1. user.name이 존재하면 name, name2, name3과 name4에 user.name이 할당된다.

3. user.name이 nullish값(null, undefined)이면 name, name2, name3과 name4에 Anonymous가 할당된다.

2. user.name이 nullish값이 아닌 falsy값이면 name, name2, name3에 Anonymous가 할당되고 name4에는 fasly값이 할당된다.

4. user.name을 받아왔을 때, 존재하지 않을 수도 있지만 아직 값이 받아지지 않았을 수 있기 때문에 ??, ||와 같은 연산자를 적절하게 사용해야한다.

2023.02.03 - [언어/Javascript,TypeScript] - [js] Nullish coalescing operator(??, ||)

[js] Nullish coalescing operator(??, ||)