if else를 코드에서 줄여 나가다 보면 자주 사용하게 되는 단축평가에 대해 정리해보자.

😵‍💫 Truthy & falsy

자바스크립트에는 Truthy 값(참으로 평가되는 값)과 Falsy 값(거짓으로 평가되는 값)이 있다.
이 값들이 조건식에 들어가게 되면 불리언 값으로 암묵적 타입 변환을 한다.

😵 타입변환

🤓 명시적 타입 변환
개발자의 의도에 따라 값의 타입을 변환하는 것을 말한다.

const x = 10;

// 숫자를 문자열로 타입 캐스팅한다.
const str = x.toString();
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x) // number 10

🤫 암묵적 타입 변환
개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 타입이 변환되는 것을 말한다.

const x = 10;

// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
const str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x) // number 10
    

😎 &&

단축 평가 표현식	평가 결과
true && anything	anything
false && anything	false

논리 연산의 결과를 결정하는 피연산자를 타입 변환 없이 그대로 반환한다. 이를 단축 평가라 한다.

논리곱(&&) 연산자를 사용한 예시를 보도록 하자.

export const getDeviceInfo = () => {
  const userAgent = navigator.userAgent;

  const isMobile = /Mobi|Android/i.test(userAgent);
  const isIOS = /iPhone|iPad|iPod/i.test(userAgent);
  
  if (isMobile && isIOS) {
    return "iOS";
  }
  if (isMobile && isAndroid) {
    return "Android";
  }
  return "Web";
 
};

위의 코드는 사용자의 디바이스가 어떤 종류인지 알아내는 코드인데, if문 안의 조건 두개가 모두 참일 경우에만 해당 조건문이 실행된다.
중첩된 if문을 쓰지 않고 논리곱 연산자를 이용한 early return으로 가독성을 높였다.

🤩 ||

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything

이번에는 논리합 연산자를 이용한 예시를 살펴보자.

export const deepCopy = (obj) => {
  if (obj === null || typeof obj !== "object") {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }

  const copiedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copiedObj[key] = deepCopy(obj[key]);
    }
  }

  return copiedObj;
};

위의 코드는 deepCopy를 하는 재귀함수인데 맨 위의 두 조건 중 하나가 참이면 인자를 return하도록 기저조건을 설정했다.

🧐 ??

??는 nullish operator(null 병합 연산자) 인데 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

const foo = null ?? 'default string';
// Expected output: "default string"

const baz = 0 ?? 42;
// Expected output: 0

논리합 연산자(||)와 다른 점은 0을 평가할 때인데 0은 falsy값이라서 논리합 연산자로는 걸러낼 수 없지만 null 병합 연산자로는 걸러낼 수 있다.

😁 회고

이렇게 여러가지 단축 평가를 "잘"사용한다면 가독성을 높인 코드를 작성할 수 있다. 특히 null 병합 연산자와 논리합 연산자의 차이를 잘 몰랐는데 이번 기회에 제대로 공부할 수 있어서 좋았다.