TIL 22.10.17 | Nullish Coalescing Operator (JS), in 연산자 (JS, TS)

1. Nullish Coalescing Operator (??)

- 개요

• 삼항연산자를 A ? A : B 와 같이 사용하는 것을 A ?? B 로 작성할 수 있습니다.
• 삼항연산자를 위와 같이 A 를 두 번 반복하여 적는 경우가 많았는데 ?? 연산자로 보다 직관적이면서 짧게 작성할 수 있습니다.

- || vs ??

• || 연산자 : 첫 번째 truthy 값을 반환합니다.
• ?? 연산자 : 첫 번째 정의된(defined) 값을 반환합니다.
• 코드 비교

const height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

참조 : JAVASCRIPT.iNFO

2. in 연산자

- 개요

• in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환합니다.
• API 등으로 두 가지 이상의 데이터 스키마(인터페이스)를 | 연사자 사용하여 하나의 타입명으로 받을 경우 사용합니다.
• 문법이 JS(TS) 보다 Python 처럼 더 자연어스러운게 신기해서 기록해서 기억하려고 합니다.

- 실제 사용예시

import { NativeStackScreenProps } from "@react-navigation/native-stack";
import React, { useEffect } from "react";
import styled from "styled-components/native";
import Poster from "../components/Poster";
import { Movie, Tv } from "../interfaces";

type RootStackParamList = {
  Detail: Movie | Tv;
};

type DetailScreenProps = NativeStackScreenProps<RootStackParamList, "Detail">;

const Container = styled.ScrollView`
  background-color: ${(props) => props.theme.mainBgColor};
`;

const Detail: React.FC<DetailScreenProps> = ({
  navigation: { setOptions },
  route: { params },
}) => {
  useEffect(() => {
    setOptions({
      title:
        "original_title" in params
          ? params.original_title
          : params.original_name,
    });
  }, []);
  return (
    <Container>
      <Poster poster_path={params.poster_path || ""} />
    </Container>
  );
};

export default Detail;

참조 : MDN, 노마드코더