5. 없는 값 다루기

5.1 ??, ||, 기본 매개변수 자리에 리터럴을 적지 않습니다

기본값의 출처를 이름으로 드러내고 누락된 데이터의 처리 기준을 유지합니다.

기본값 표현

??, || 오른쪽과 기본값 자리에서는 리터럴 대신 이미 선언된 이름을 참조합니다. 리터럴을 지역 const로 옮기거나 이유 주석을 붙이기만 해서는 규칙을 충족하지 못합니다.

없음으로 취급할 값

선언된 이름이어도 기본값의 의미가 맞아야 하며, 0, false가 유효하면 ??를 씁니다. 채우는 위치는 규칙 5.2가 정합니다.

??, ||, 기본 매개변수 자리에 리터럴을 적습니다.

const supportEmail = settings.supportEmail ?? "help@example.com";
const displayName = user.nickname || "-";
const toPageRequest = (size = 10): PageRequest => { /* … */ };

이미 선언된 이름만 가리킵니다.

const supportEmail = settings.supportEmail ?? support_email_default;
const displayName = user.nickname || empty_display_text;
const toPageRequest = (size = pagination_default_page_size): PageRequest => {
	return {page: pagination_default_page, size};
};

함께 보기

• 5.2 기본값은 값이 들어오는 경계에서 한 번만 채웁니다
• 2.1 프로젝트 전반의 상수는 루트 constant 폴더에 주제별 파일로 둡니다
• 2.2 소유자 전용 상수는 소유자 _constant 폴더에 둡니다

5.2 기본값은 값이 들어오는 경계에서 한 번만 채웁니다

기본값이 선언 한 곳에 남아 아래쪽 코드에서 ??가 되풀이되지 않습니다.

기본값은 필요한지 먼저 확인하고, 필요하면 값이 들어오는 경계에서 한 번 채웁니다. 기본값 표현은 규칙 5.1를 따릅니다.

flowchart LR
	q1{"기본값이<br>필요한가?"} -- 예 --> q2{"경계에서<br>채울 수 있는가?"} -- 예 --> r2("경계에서 한 번 채움")
	q1 -- 아니요 --> r1("선택 값 그대로 소비")
	q2 -- 아니요 --> r3("사용처에 ?? 로 적음")

배열이 필수인 API에는 반환 계약을 바꾸지 않고 선언된 기본값을 경계에서 채웁니다. 이름을 붙일지는 규칙 3.8가 정합니다.

없어도 되는 값에 기본값을 채웁니다.

const productIds = (responseProductSearch.data.rows ?? []).map((row) => row.id);
const isCompact = (variant ?? "default") === "compact";

그대로 비교하면 기본값이 필요 없습니다.

const productIds = responseProductSearch.data.rows?.map((row) => row.id);
const isCompact = variant === "compact";

같은 기본값을 사용처마다 다시 채웁니다.

fetchProducts({pageSize: query.pageSize ?? pagination_default_page_size});
setVisibleRowCount(query.pageSize ?? pagination_default_page_size);

값이 들어오는 경계에서 한 번 채워 이후 코드에서 기본값을 반복하지 않습니다.

/**
 * 상품 목록 search 파라미터. pageSize를 여기서 채우므로 화면에서는 선택 값 아님
 */
const productUrlParsers = {
	pageSize: parseAsInteger.withDefault(pagination_default_page_size),
};

const [query] = useQueryStates(productUrlParsers);

fetchProducts({pageSize: query.pageSize});
setVisibleRowCount(query.pageSize);

경계에서 못 하면 쓰는 자리에 그대로 적습니다.

fetchProducts({pageSize: query.pageSize ?? pagination_default_page_size});

이름을 붙인다면 파생값임이 드러나게 짓습니다.

const effectivePageSize = query.pageSize ?? pagination_default_page_size;

fetchProducts({pageSize: effectivePageSize});
setVisibleRowCount(effectivePageSize);

함께 보기

• 5.1 ??, ||, 기본 매개변수 자리에 리터럴을 적지 않습니다
• 3.8 변수는 재계산을 막거나 복잡한 판정에 이름을 붙일 때만 만듭니다
• 4.3 객체는 구조분해하지 않고 체인으로 읽습니다

5.3 타입이 보장하는 것을 다시 검사하지 않습니다

불필요한 검사를 줄이고 값이 실제로 없을 수 있는 경우만 확인합니다.

다시 검사하지 않을 것

타입이 이미 보장하는 조건은 다시 검사하지 않습니다.

선택 필드의 생략

선택 필드의 생략과 undefined 대입은 소비 계약에 맞춥니다.

타입이 string으로 보장한 값을 다시 검사합니다.

const toRowLabel = (row: ProductRow): string => {
	if (isNil(row.name)) {
		return row.id;
	}

	return row.name.trim();
};

타입이 보장하는 조건은 다시 검사하지 않습니다.

const toRowLabel = (row: ProductRow): string => {
	return row.name.trim();
};

생략과 undefined를 구분하지 않는 내부 계약에서 키를 조건부로 생략합니다.

// 이 내부 표시 계약은 stockCount의 undefined 대입을 허용하고 키 존재 여부를 읽지 않음
return {
	metrics,
	...(stockCount === undefined ? {} : {stockCount}),
};

생략과 같은 뜻이고 타입도 허용하면 undefined를 그대로 넣습니다.

// 이 내부 표시 계약은 stockCount의 undefined 대입을 허용하고 키 존재 여부를 읽지 않음
return {
	metrics,
	stockCount,
};

함께 보기

• 1.6 단언으로 넘기지 않고 unknown을 좁혀서 씁니다
• 5.1 ??, ||, 기본 매개변수 자리에 리터럴을 적지 않습니다
• 5.4 없을 수 있는 값은 경계에서 한 번만 검사합니다

5.4 없을 수 있는 값은 경계에서 한 번만 검사합니다

값이 들어오는 경계에서 검사해 중간 함수의 중복 검사를 줄입니다.

경계가 정한 답

값의 없음 여부는 소유자 안으로 들어오는 경계에서 한 번 검사하고, 결과를 타입으로 전달합니다. 화면의 응답 매핑, select, combine, search 스키마나 컴포넌트가 프롭을 받는 자리가 경계입니다.

없을 때 다른 화면을 렌더하는 분기는 필요한 표시 상태이므로 유지합니다. 판정 결과를 전달하는 방법은 규칙 4.8가 정합니다.

다시 검사가 필요한 때

unknown은 검증 책임이 있는 경계에서 받고, 공개 입력 계약을 내부 호출 하나에 맞춰 좁히지 않습니다. 타입 좁히기는 규칙 1.6을 따릅니다.

경계가 타입을 좁히지 않아 아래 함수마다 같은 값을 다시 검사합니다.

export const toSignedTone = (value: number | null | undefined): Tone => {
	if (isNil(value) || !Number.isFinite(value) || value === 0) {
		return "neutral";
	}
	return value > 0 ? "positive" : "negative";
};

export const formatSignedPercent = (value: number | null | undefined) => {
	if (isNil(value) || !Number.isFinite(value)) {
		return copy_empty_value_text;
	}
	return `${value > 0 ? "+" : ""}${value}%`;
};

경계가 좁힌 number를 받아 두 함수는 자기 판정만 남깁니다.

/**
 * 부호 있는 변화율의 강조 톤. 0은 중립
 */
export const toSignedTone = (value: number): Tone => {
	if (value === 0) {
		return "neutral";
	}
	return value > 0 ? "positive" : "negative";
};

/**
 * 부호를 붙인 변화율 표시 문자열
 */
export const formatSignedPercent = (value: number) => {
	return `${value > 0 ? "+" : ""}${value}%`;
};

경계인 select에서 없음과 유한 수를 한 번 검사해 타입을 좁힙니다.

// page/product-detail/pg-product-detail.tsx: 서버는 계산 전이면 null. 여기서 한 번 좁힘
const responseSummarySuspense = useSuspenseQuery({
	...productDetailSummaryQueryOptions(productId),
	select: (response) => ({
		...response,
		changeRate:
			isNotNil(response.changeRate) && Number.isFinite(response.changeRate) ? response.changeRate : undefined,
	}),
});

없음을 읽는 자리는 화면을 렌더하는 분기 하나입니다.

// page/product-detail/_pg-product-detail-summary.tsx: 없음을 읽는 곳은 렌더하는 분기 하나
{isNotNil(summary.changeRate) && (
	<UiBadge tone={toSignedTone(summary.changeRate)}>{formatSignedPercent(summary.changeRate)}</UiBadge>
)}

함께 보기

• 5.2 기본값은 값이 들어오는 경계에서 한 번만 채웁니다
• 5.3 타입이 보장하는 것을 다시 검사하지 않습니다
• 4.8 판정은 한 번만 하고 결과를 데이터로 전달합니다