[Typescript] 논리연산자를 이용한 short-circuit evaluation

• 타입스크립트에서 && 와 || 로 short-circuit evaluation 을 사용할 수 있다.
  • Python 등 여러 언어에서도 문법은 다를 수 있지만 활용 가능하다.

• ex) 다양한 사이즈의 섬네일 중 url 을 high > medium > default 우선순위로 url 을 가져오기

interface Thumbnails {
  default?: {
    url: string;
  };
  medium?: {
    url: string;
  };
  high?: {
    url: string;
  };
}

• if-else 로 구현한다면 아래와 같이 길고 불편한 코드가 될 것이다.

function getUrl(thumbnails: Thumbnails): string | undefined {
  if (thumbnails.high?.url) {
    return thumbnails.high.url;
  } else if (thumbnails.medium?.url) {
    return thumbnails.medium.url;
  } else if (thumbnails.default?.url) {
    return thumbnails.default.url;
  } else {
    return undefined;
  }
}

• 삼항연산자를 사용한다면 아래와 같이 구현할 수 있다. 하지만 여전히 길고 중복이 많다.

function getUrl(thumbnails: Thumbnails): string | undefined {
  return thumbnails.high?.url
    ? thumbnails.high.url
    : thumbnails.medium?.url
    ? thumbnails.medium.url
    : thumbnails.default?.url
    ? thumbnails.default.url
    : undefined;
}

• 논리 연산자를 이용해 한줄로 간략화하여 구현할 수 있다.

function getUrl(thumbnails: Thumbnails): string | undefined {
  return thumbnails.high?.url || thumbnails.medium?.url || thumbnails.default?.url;
}

const thumbnails1: Thumbnails = {
  default: {
    url: "https://example.com/default.jpg",
  },
  medium: {
    url: "https://example.com/medium.jpg",
  },
  high: {
    url: "https://example.com/high.jpg",
  },
};

const url1 = getUrl(thumbnails1); // "https://example.com/high.jpg"

const thumbnails2: Thumbnails = {
  medium: {
    url: "https://example.com/medium.jpg",
  },
};

const url2 = getUrl(thumbnails2); // "https://example.com/medium.jpg"

const thumbnails3: Thumbnails = {};

const url3 = getUrl(thumbnails3); // undefined