📜

JavaScript & TypeScript 치트시트

배열/객체 조작, 비동기 Promise/Async 패턴, TypeScript 핵심 유틸리티 타입 및 실전 팁

#javascript#typescript#es6#frontend#backend#web최종 업데이트: 2026-09-21

JavaScript & TypeScript 치트시트 핵심 명령어 및 실전 가이드

배열/객체 조작, 비동기 Promise/Async 패턴, TypeScript 핵심 유틸리티 타입 및 실전 팁

## 1. 배열 고급 다루기 (Array Methods)
```typescript
// 중복 제거 (Set 활용)
const uniqueList = [...new Set([1, 2, 2, 3, 4, 4])];

// 키 기준으로 객체 배열 그룹화 (ES2024 Object.groupBy)
const grouped = Object.groupBy(items, item => item.category);

// 평탄화 및 매핑 (flatMap)
const tags = posts.flatMap(post => post.tags);

// 특정 조건 만족 여부 검사
const hasAdmin = users.some(u => u.role === 'admin');
const allVerified = users.every(u => u.isVerified);
```

## 2. 객체 구조분해 & 널 병합
```typescript
// 기본값 지정 및 이름 변경 구조분해
const { name: userName, age = 20 } = user;

// 옵셔널 체이닝 & 널 병합 연산자 (?? vs ||)
// ?? 는 null 또는 undefined 일 때만 기본값을 사용 (0, '' 은 유지)
const port = process.env.PORT ?? 3000;
const street = user?.address?.street ?? '주소 미입력';

// 객체 동적 키 추가
const dynamicObj = {
  [dynamicKey]: 'value',
  ...(isAdmin && { permissions: ['ALL'] }),
};
```

## 3. 비동기 제어 & Promise 병렬 처리
```typescript
// 여러 비동기 작업 동시 병렬 실행 (하나라도 실패하면 중단)
const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

// 모든 작업의 성공/실패 여부를 끝까지 집계
const results = await Promise.allSettled(urls.map(fetchData));
results.forEach(res => {
  if (res.status === 'fulfilled') console.log(res.value);
  else console.error(res.reason);
});

// 타임아웃을 지원하는 비동기 래퍼
const timeout = (ms: number) => new Promise((_, reject) => 
  setTimeout(() => reject(new Error('Timeout!')), ms)
);
await Promise.race([fetchData(), timeout(5000)]);
```

## 4. TypeScript 필수 유틸리티 타입
```typescript
interface User {
  id: string;
  name: string;
  email: string;
  avatarUrl?: string;
}

// 모든 속성을 선택(optional)으로 만들기
type PartialUser = Partial<User>;

// 특정 속성만 골라내기
type UserPreview = Pick<User, 'id' | 'name'>;

// 특정 속성만 제외하기
type UserWithoutId = Omit<User, 'id'>;

// 모든 속성을 읽기 전용으로 만들기
type ReadonlyUser = Readonly<User>;

// Record 타입 (키와 값 타입 맵핑)
type RoleMap = Record<string, string[]>;
```

## 5. 타입 가드 (Type Narrowing)
```typescript
// 사용자 정의 타입 가드 (is 연산자)
function isError(value: unknown): value is Error {
  return value instanceof Error;
}

// 식별 가능한 유니온 (Discriminated Union)
type ApiResponse = 
  | { status: 'success'; data: User }
  | { status: 'error'; message: string };

function handleResponse(res: ApiResponse) {
  if (res.status === 'success') {
    console.log(res.data.name); // 타입 안전 보장
  } else {
    console.error(res.message);
  }
}
```

## 6. 클로저 & 디바운스 유틸리티
```typescript
// 검색창 입력 지연 처리용 디바운스(Debounce)
function debounce<T extends (...args: any[]) => any>(
  fn: T, 
  delay: number
) {
  let timer: NodeJS.Timeout;
  return (...args: Parameters<T>) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
```

💬

JavaScript & TypeScript 치트시트

의견 및 질문

댓글 수정

댓글 삭제