Hidden Side Effects → Explicit Separation

#6PredictabilityEasy

Hidden Side Effects → Explicit Separation

Hidden Side Effects — 부수효과를 이름으로 드러내기

getUser, calculateTotal, formatDate — 이름만 보면 순수한 getter / calculator / formatter. 하지만 안에는 분석 트래킹, localStorage 쓰기, 콘솔 로그 같은 부수효과가 숨어 있습니다. 사용하는 사람이 함수 본문을 안 보면 모르고 호출 하게 되는 게 문제.

할 일

부수효과를 별도 함수로 추출하고 동사형 이름 으로 명시: trackUserFetch, persistTotal, logFormatting
원래 함수는 순수하게 만들고, side effect 가 필요한 자리에서 명시적으로 호출
동작은 그대로 — 호출 흐름만 명시화

좋은 fix

function getUser() { return cache.get('user'); } (순수)
function trackUserFetch() { analytics.track('user_fetched'); } (별도)
호출하는 쪽: const u = getUser(); trackUserFetch();

안 되는 fix

함수에 JSDoc 주석으로 "이 함수는 분석도 함" 만 적기
부수효과를 제거해서 동작이 사라지게 하기 (분석 호출은 명시적으로 어디선가 일어나야 함)

학습 포인트

이름은 계약. get/calculate/format 은 "읽기만 한다"는 약속
부수효과는 드러나야 호출자가 안전하게 쓸 수 있음

// 외부 의존성 stub — 학습자가 건드릴 필요 X
export const __trackCalls: string[] = [];
export const analytics = { track: (name: string) => { __trackCalls.push(name); } };
export const __cacheStore: Record<string, unknown> = { user: { id: 1, name: 'Alice' } };
export const cache = { get: (k: string) => __cacheStore[k] };
export const __storage: Record<string, string> = {};
export const localStorageShim = {
  getItem: (k: string) => __storage[k] ?? null,
  setItem: (k: string, v: string) => { __storage[k] = v; },
};

export interface Item { id: number; price: number }

// TODO: 아래 함수들의 숨은 부수효과를 별도 함수로 분리하세요.
//       getUser/calculateTotal/formatDate 는 "이름이 약속하는 동작" 만 하도록.
//       부수효과 함수는 동사형 이름으로 export 하세요
//       (예: trackUserFetch, persistLastTotal, logDateFormat).
//       기존 export 시그니처는 유지하면서 추가로 export 만 하면 됩니다.

export function getUser() {
  const user = cache.get('user');
  analytics.track('user_fetched');
  return user;
}

export function calculateTotal(items: Item[]) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  localStorageShim.setItem('lastTotal', String(total));
  return total;
}

export function formatDate(date: Date) {
  console.log('Formatting date:', date);
  return date.toISOString().slice(0, 10);
}

Sandpack 로드 중…

// 외부 의존성 stub — 학습자가 건드릴 필요 X
export const __trackCalls: string[] = [];
export const analytics = { track: (name: string) => { __trackCalls.push(name); } };
export const __cacheStore: Record<string, unknown> = { user: { id: 1, name: 'Alice' } };
export const cache = { get: (k: string) => __cacheStore[k] };
export const __storage: Record<string, string> = {};
export const localStorageShim = {
  getItem: (k: string) => __storage[k] ?? null,
  setItem: (k: string, v: string) => { __storage[k] = v; },
};

export interface Item { id: number; price: number }

// TODO: 아래 함수들의 숨은 부수효과를 별도 함수로 분리하세요.
//       getUser/calculateTotal/formatDate 는 "이름이 약속하는 동작" 만 하도록.
//       부수효과 함수는 동사형 이름으로 export 하세요
//       (예: trackUserFetch, persistLastTotal, logDateFormat).
//       기존 export 시그니처는 유지하면서 추가로 export 만 하면 됩니다.

export function getUser() {
  const user = cache.get('user');
  analytics.track('user_fetched');
  return user;
}

export function calculateTotal(items: Item[]) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  localStorageShim.setItem('lastTotal', String(total));
  return total;
}

export function formatDate(date: Date) {
  console.log('Formatting date:', date);
  return date.toISOString().slice(0, 10);
}