김신건의 로그 - 위키 / javascript

[JavaScript] AbortController: 비동기 취소

koa (김신건) — Mon, 29 Jun 2026 00:00:00 GMT

정의

AbortController 는 비동기 작업 (fetch, event listener 등) 을 취소 하기 위한 표준 인터페이스.

기본 사용

const controller = new AbortController();

fetch('/api/slow', { signal: controller.signal })
    .then(r => r.json())
    .catch(err => {
        if (err.name === 'AbortError') console.log('cancelled');
        else throw err;
    });

// 5초 후 취소
setTimeout(() => controller.abort(), 5000);

이벤트 리스너 취소

같은 signal 을 재사용해 여러 리스너를 한 번에 정리:

const controller = new AbortController();
window.addEventListener('scroll', onScroll, { signal: controller.signal });
window.addEventListener('resize', onResize, { signal: controller.signal });

// 컴포넌트 언마운트 시
controller.abort();

AbortSignal.timeout

ES2022+:

fetch('/api', { signal: AbortSignal.timeout(5000) });
// 5초 후 자동 취소

AbortSignal.any (2024+)

여러 signal 중 하나라도 abort 되면 취소:

const signal = AbortSignal.any([userSignal, timeoutSignal]);

참고

관련 [[js-fetch|fetch]]
관련 [[js-async-await|async/await]]

[JavaScript] fetch API: 현대 HTTP 클라이언트

koa (김신건) — Mon, 29 Jun 2026 00:00:00 GMT

정의

fetch 는 Promise 기반의 표준 HTTP 클라이언트. XMLHttpRequest (2000) 를 대체.

기본 사용

const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

POST + JSON

await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Alice' }),
});

함정 1: 4xx/5xx 는 reject 안 함

404, 500 도 fetch 는 성공 으로 봄. 반드시 res.ok 또는 res.status 검증.

const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);

함정 2: 스트리밍

응답 body 는 한 번만 소비 가능. .json(), .text(), .arrayBuffer() 중 하나만.

여러 번 필요하면 clone:

const res = await fetch(url);
const text = await res.clone().text();
const json = await res.json();

취소

[[js-abort-controller|AbortController]] 로:

const ctl = new AbortController();
fetch(url, { signal: ctl.signal });
setTimeout(() => ctl.abort(), 5000);

타임아웃

fetch(url, { signal: AbortSignal.timeout(5000) });

참고

관련 [[js-abort-controller|AbortController]]
관련 [[js-promise|Promise]]
관련 [[http-1-1|HTTP/1.1]]

[JavaScript] requestAnimationFrame: 브라우저 애니메이션 루프

koa (김신건) — Mon, 29 Jun 2026 00:00:00 GMT

정의

requestAnimationFrame (rAF) 은 브라우저에게 다음 리페인트 직전에 콜백을 실행해달라고 요청합니다. 60Hz 모니터 기준 약 16.67ms 주기.

왜 setTimeout 이 아닌가

주사율에 자동 맞춤: 120Hz 화면에서는 8ms 주기, 절전 모드에서는 늦춰짐
탭 비활성 시 정지: 백그라운드 탭에서 안 돎, CPU 절약
동기화: 브라우저 렌더링 파이프라인과 정렬

기본 사용

let start;

function animate(timestamp) {
    if (!start) start = timestamp;
    const elapsed = timestamp - start;

    ball.style.left = elapsed * 0.1 + 'px';

    if (elapsed < 3000) requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

취소

const handle = requestAnimationFrame(animate);
cancelAnimationFrame(handle);

함정

CSS 애니메이션이 더 효율적: 순수 transform/opacity 는 CSS 로
setTimeout 이 필요한 경우: 정확한 인터벌 필요 시 (게임 서버 sync 등)
첫 프레임 지연: 첫 rAF 콜백은 다음 프레임까지 대기 (수 ms)

참고

관련 [[settimeout-macrotask|setTimeout]]
관련 [[js-event-loop|Event Loop]]

[JavaScript] String: 메서드, 정규식, 템플릿 리터럴

koa (김신건) — Mon, 29 Jun 2026 00:00:00 GMT

정의

JavaScript 문자열은 불변 (immutable) UTF-16 시퀀스. 메서드는 새 문자열을 반환.

자주 쓰는 메서드

const s = 'Hello, World!';

s.length;                    // 13
s.indexOf('W');              // 7
s.slice(7, 12);              // 'World'
s.substring(7);              // 'World!'
s.replace('World', 'JS');    // 'Hello, JS!'
s.replaceAll('l', 'L');      // 'HeLLo, WorLd!'
s.split(', ');               // ['Hello', 'World!']
s.toLowerCase();             // 'hello, world!'
s.trim();                    // 공백 제거
s.padStart(20, '*');         // '*******Hello, World!'
s.at(-1);                    // '!'
s.includes('World');         // true

정규식

// literal
const re = /hello/i;
'Hello world'.match(re);     // ['Hello']

// group + replace
'2026-06-29'.replace(/(\d+)-(\d+)-(\d+)/, '$3/$2/$1');  // '29/06/2026'

// exec 반복
const re2 = /\w+/g;
let m;
while ((m = re2.exec(s)) !== null) console.log(m[0]);

템플릿 리터럴

const name = 'A';
const greeting = `Hello, ${name}!`;

// 여러 줄
const multi = `line 1
line 2`;

// 태그드
function html(strings, ...values) {
    return strings.reduce((r, s, i) => r + s + (values[i] ?? ''), '');
}
html`<p>${name}</p>`;

참고

관련 [[js-regex|Regex]]
관련 [[js-encoding|UTF-16 인코딩]]

[Frontend] SPA Architecture: CSR, SSR, SSG, hydration

koa (김신건) — Tue, 23 Jun 2026 00:00:00 GMT

정의

SPA (Single Page Application) 는 첫 로딩 시 받은 HTML / JS 번들 하나로 모든 화면 전환을 클라이언트에서 처리하는 웹 앱 구조. URL 변경, 데이터 fetch, 화면 갱신 모두 JavaScript 가 담당. 전체 페이지 reload 없음.

기존 MPA (Multi Page App, 페이지마다 서버가 HTML 반환) 와 대비. React / Vue / Angular / Svelte 가 대표 framework.

이 페이지는 SPA 의 렌더링 전략 (CSR / SSR / SSG / ISR) 과 hydration 같은 핵심 메커니즘을 다룬다.

시각화

{}

세 모드의 server / browser / user 시간순 흐름을 비교. CSR 은 빈 HTML + JS 후속, SSR 은 매 요청 서버 렌더링, SSG 은 빌드 시점 미리 생성.

4가지 렌더링 모드

모드	HTML 생성 시점	장점	단점
CSR (Client-Side Rendering)	브라우저에서 JS 실행	단순 배포, 무거운 인터랙션 자연스러움	초기 로딩 느림, SEO 어려움, FCP / LCP 나쁨
SSR (Server-Side Rendering)	매 요청마다 서버에서	SEO / FCP 좋음, 동적 콘텐츠	서버 부하, TTFB 증가, hydration 비용
SSG (Static Site Generation)	빌드 시점에 미리	가장 빠름 (CDN 캐싱), 안전	빌드 시간, 정적 내용만
ISR (Incremental Static Regeneration)	빌드 + 주기적 재생성	SSG 장점 + 일부 동적	복잡, 캐시 무효화 어려움

대표 framework:

CSR: Create React App (legacy), Vite + React
SSR: Next.js, Nuxt, Remix, SvelteKit
SSG: Astro, Eleventy, Hugo, Gatsby (전통적)
ISR: Next.js, SvelteKit (revalidate 옵션)

대부분 모던 framework 는 하이브리드: 페이지마다 다른 모드 선택 가능.

CSR 흐름

요청        ← 빈 HTML + JS bundle (~몇 MB)
JS 실행     ← React/Vue 가 DOM 구축
API fetch   ← 데이터 로딩
화면 표시   ← 사용자에게 최종 UI

index.html 은 보통:

<!DOCTYPE html>
<html>
<head><title>App</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

#root 는 비어 있다. JS 가 React tree 렌더링.

문제: 첫 페인트 = JS 다운로드 + 파싱 + 실행 + API + render. 모바일 네트워크에서 10초+ 가능. SEO 봇은 빈 HTML 만 보고 떠남 (Google 은 부분 지원).

SSR 흐름

요청        → 서버가 React tree 를 HTML 로 렌더링
            ← 완성된 HTML + JS bundle
브라우저    ← HTML 표시 (즉시), JS 다운로드
hydration   ← JS 가 서버 DOM 에 이벤트 리스너 부착
완성        ← 인터랙티브

Next.js 예:

// pages/posts/[id].tsx
export async function getServerSideProps({ params }) {
    const post = await db.posts.findById(params.id);
    return { props: { post } };
}

export default function PostPage({ post }) {
    return <article><h1>{post.title}</h1><p>{post.body}</p></article>;
}

서버: SQL 조회 → React 컴포넌트 → HTML. 브라우저: 즉시 표시 + JS 로 인터랙티브.

Hydration

서버가 렌더링한 HTML 위에 클라이언트 JS 가 이벤트 / 상태를 “부착” 하는 과정.

1. 서버: <button>Click</button> HTML 반환
2. 브라우저: HTML 표시 (정적)
3. JS 로딩 완료
4. React: 같은 컴포넌트 트리 다시 생성
5. 기존 DOM 과 비교, 이벤트 핸들러 부착
6. 인터랙티브 (이제 클릭 동작)

함정:

hydration mismatch: 서버와 클라이언트의 렌더링 결과가 다르면 warning + 깜빡임. Date.now(), Math.random(), 브라우저-only API 사용 시 발생
무거움: 전체 React tree 재생성. 큰 앱에선 TTI 가 SSR 의 의도와 다르게 오히려 늦어짐 (“hydration cost”)
streaming SSR + selective hydration: React 18 의 해결책. 일부만 priority 로 빠르게 hydration

Islands Architecture (Astro / Fresh)

전체 페이지를 hydration 하지 말고 인터랙티브한 부분만 (= island) JS 로:

---
// Astro 컴포넌트, 서버 only
const posts = await db.posts.list();
---
<html>
<body>
  <h1>Static heading</h1>
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>

  <!-- 이 컴포넌트만 client-side JS 로 hydration -->
  <!-- mdx-component: Counter -->
</body>
</html>

client:visible directive 는 viewport 진입 시 hydration. 다른 directive: client:idle, client:load, client:media.

장점: 대부분 정적 HTML = 빠름. 동적인 부분만 JS 비용.

Client-Side Routing

페이지 전환 시 서버 요청 없이 JS 가 처리:

<CodeWithOutput language=“javascript” outputLanguage=“text” outputLabel=“브라우저 동작” code={`// History API window.history.pushState({}, ”, ‘/users/42’);

// popstate 이벤트 (뒤로 / 앞으로 버튼) window.addEventListener(‘popstate’, (e) => { renderForPath(window.location.pathname); });

// 링크 클릭 가로채기 document.addEventListener(‘click’, (e) => { const link = e.target.closest(‘a[href]’); if (link && link.origin === location.origin) { e.preventDefault(); window.history.pushState({}, ”, link.href); renderForPath(link.pathname); } });} output={/users/42 로 이동 URL 변경, 페이지 reload 없음 React Router / Vue Router / TanStack Router 가 위 로직을 추상화`} />

history.pushState / popstate 가 핵심. 모든 SPA router 가 이 위에서 동작.

Link 컴포넌트 (React Router 의 <Link>, Next 의 <Link>) 가 일반 <a> 대신 사용되는 이유: 클릭 시 full reload 방지.

SPA 의 SEO

CSR 만 사용 시 봇이 빈 HTML 만 보고 인덱싱 못 함 (Google 은 JS 실행하지만 시간 / 자원 제한).

해결:

SSR 또는 SSG: 봇이 완성된 HTML 받음 (가장 안전)
Prerender.io 같은 정적 캐시 서비스: 봇만 정적 HTML 반환
Dynamic rendering: User-Agent 따라 봇에게 SSR, 사용자에겐 CSR

<title>, <meta description>, structured data (JSON-LD) 모두 SSR / SSG 시점에 채워져야.

State Management 패턴

SPA 의 클라이언트 상태:

종류	도구	사용처
Local component state	`useState` / `ref`	폼 입력, UI toggle
Shared app state	Context API / Pinia / Vuex	사용자 정보, 테마
Global complex	Redux / Zustand / Jotai / Recoil	큰 앱의 도메인 상태
Server state cache	TanStack Query (React Query), SWR	API 응답 캐싱, refetch
URL state	Router params / search params	페이지 상태 (필터, 페이지 번호)

현대 권장: server state 는 TanStack Query / SWR 로 분리. 글로벌 store 에 server data 두지 말 것 (cache invalidation 지옥).

SSR + CSR 데이터 fetching

Next.js 패턴:

// Server Component (RSC)
async function PostList() {
    const posts = await db.posts.list();   // 서버에서 실행
    return <ul>{posts.map(p => <li>{p.title}</li>)}</ul>;
}

// Client Component
'use client';

function PostList() {
    const { data } = useQuery({
        queryKey: ['posts'],
        queryFn: () => fetch('/api/posts').then(r => r.json())
    });
    return <ul>{data?.map(p => <li>{p.title}</li>)}</ul>;
}

RSC (React Server Components) 는 서버에서만 실행, 브라우저로 JS 안 보냄. 데이터 fetching 의 새로운 패러다임.

성능 최적화

Code splitting: 라우트 별 bundle 분리 (import() dynamic import)
Tree shaking: 사용 안 하는 코드 제거 (ESM + production build)
Lazy loading 컴포넌트: React.lazy(() => import('./Heavy'))
Image optimization: <img loading="lazy">, Next.js <Image>
Preload critical resources: <link rel="preload" as="font">
Service Worker / PWA: offline cache, background sync
Compression: Brotli > gzip
Bundle size budget: ~200KB JS (gzipped) for fast 3G

webpack-bundle-analyzer, source-map-explorer 로 bundle 분석.

함정과 베스트 프랙티스

CSR-only 는 SEO 가 critical 한 사이트에 부적합: SSR / SSG 선택
hydration mismatch 디버깅 어렵다: 서버와 클라이언트에서 동일한 deterministic 렌더링 강제
back / forward 버튼 동작 보장: popstate 처리, scroll 위치 복원
상태 영속성: 페이지 reload 시 사라지면 안 되는 데이터는 localStorage / sessionStorage / URL
API CORS: SPA 가 다른 도메인 API 호출 시 CORS 설정 필수
Auth token 저장 위치: localStorage (XSS 위험) vs httpOnly cookie (CSRF 위험) - 보통 후자 + CSRF token
Error boundary: 컴포넌트 에러가 전체 앱 죽이지 않게
A11y: focus management, ARIA, 키보드 네비게이션 (router 전환 시 focus / announce)
Bundle size 감시: CI 에서 size limit 강제

[Javascript] Array

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 Array 는 순서 있는 객체. 정수 키 + length. 풍부한 메서드 (map/filter/reduce/…) 가 함수형 스타일을 지원.

const arr = [1, 2, 3];
typeof arr           // 'object'
Array.isArray(arr)   // true ✓ (typeof 로는 구분 안 됨)

생성

const a = [1, 2, 3];
const b = new Array(3);          // length 3, sparse
const c = new Array(1, 2, 3);    // [1, 2, 3]
const d = Array.of(3);           // [3] (단일 인자도 안전)
const e = Array.from('abc');     // ['a', 'b', 'c']
const f = Array.from({ length: 3 }, (_, i) => i * 2);  // [0, 2, 4]
const g = [...iterable];         // spread

핵심 메서드 (반복)

메서드	반환	mutates
`forEach(fn)`	undefined	✗
`map(fn)`	새 배열 (같은 길이)	✗
`filter(fn)`	새 배열	✗
`reduce(fn, init)`	accumulator	✗
`reduceRight(fn, init)`	같음 (역방향)	✗
`find(fn)`	첫 매칭 원소	✗
`findIndex(fn)`	첫 매칭 인덱스	✗
`findLast(fn)`	마지막 매칭	✗
`some(fn)`	하나라도 true 면 true	✗
`every(fn)`	모두 true	✗
`flat(depth)`	평탄화	✗
`flatMap(fn)`	map + flat(1)	✗

[1,2,3].map(x => x * 2)              // [2, 4, 6]
[1,2,3,4].filter(x => x % 2 === 0)   // [2, 4]
[1,2,3].reduce((a, b) => a + b, 0)   // 6
[1,2,3].find(x => x > 1)              // 2
[1,2,3].some(x => x > 2)              // true
[1,2,3].every(x => x > 0)             // true
[[1, 2], [3, 4]].flat()               // [1, 2, 3, 4]
[1, 2, 3].flatMap(x => [x, x * 2])    // [1, 2, 2, 4, 3, 6]

변경 (mutates)

메서드	효과
`push(...)`	끝에 추가, 새 length
`pop()`	끝에서 제거, 반환
`shift()`	앞에서 제거
`unshift(...)`	앞에 추가
`splice(start, deleteCount, ...items)`	임의 위치 add/remove
`sort(cmp)`	정렬 (in-place!)
`reverse()`	뒤집기 (in-place!)
`fill(value, start, end)`	값으로 채움
`copyWithin(target, start, end)`	내부 복사

const a = [1, 2, 3];
a.push(4)                    // a = [1, 2, 3, 4]
a.pop()                      // 4, a = [1, 2, 3]
a.splice(1, 1)               // [2] 제거, a = [1, 3]
a.splice(1, 0, 'x')          // 1 위치에 'x' 삽입
a.sort((x, y) => x - y)      // 숫자 정렬

검색

메서드	의미
`indexOf(v)`	첫 위치 (없으면 -1)
`lastIndexOf(v)`	마지막 위치
`includes(v)`	포함 여부
`at(i)`	i 번째 (음수 OK)

[1, 2, 3].indexOf(2)     // 1
[1, 2, 3].includes(2)    // true
[1, 2, 3].at(-1)          // 3 (마지막)

슬라이스 / 결합

arr.slice(start, end)        // 부분 (end 미포함)
arr.slice()                   // 전체 복사
arr.concat([4, 5])            // 결합
[...arr1, ...arr2]            // spread (선호)

정렬 함정

[10, 1, 2].sort()                  // [1, 10, 2]  ⚠️ 문자열 비교
[10, 1, 2].sort((a, b) => a - b)   // [1, 2, 10]  ✓

기본 sort 는 문자열 변환 후 사전순. 숫자는 항상 비교 함수 명시.

stable sort

ES2019+ 모든 엔진이 stable sort 보장.

arr.sort((a, b) => a.priority - b.priority)
// 같은 priority 의 원소는 원래 순서 유지

새 (불변) vs 변경 메서드 (ES2023)

arr.sort()       // 원본 변경
arr.toSorted()   // 새 배열 반환 (ES2023+)

arr.reverse()    // 원본 변경
arr.toReversed() // 새 배열

arr.splice(...)
arr.toSpliced(...)

arr[0] = 99      // ...
arr.with(0, 99)  // 새 배열, [0] = 99

이런 새 메서드들이 불변 패턴을 더 자연스럽게.

reduce 의 강력함

// 합
[1,2,3].reduce((a, b) => a + b, 0)

// 객체로 그룹화
data.reduce((acc, item) => {
    (acc[item.category] ??= []).push(item);
    return acc;
}, {});

// pipeline
[fn1, fn2, fn3].reduce((acc, fn) => fn(acc), initialValue)

// max
arr.reduce((max, cur) => cur > max ? cur : max, -Infinity)

sparse 배열

const a = new Array(3);   // [empty × 3]
a[5] = 99;                 // [empty × 5, 99]
a.length                   // 6
a.forEach(x => console.log(x))  // empty 는 skip

빈 슬롯이 있는 배열. 일반적으로 피하는 것이 좋음.

Array-like → Array

Array.from(arguments)
Array.from(document.querySelectorAll('div'))
Array.from({ length: 5 }, (_, i) => i)   // [0, 1, 2, 3, 4]
[...nodeList]                              // spread

함정

1. typeof 로 배열 검사 불가

typeof []           // 'object'
Array.isArray([])   // ✓

2. length 변경

const a = [1, 2, 3];
a.length = 1;
a            // [1] (잘림)
a.length = 5;
a            // [1, empty × 4]

3. splice 의 인자

arr.splice(1)        // 1 부터 끝까지 제거
arr.splice(1, 0, 'x')  // 1 에 'x' 삽입 (제거 X)
arr.splice(1, 1, 'x')  // 1 에서 1개 제거, 'x' 삽입

참고

[[JS Object]]
[[JS Spread / Rest]]
[[JS Destructuring]]
[[higher-order function]]

[Javascript] BigInt

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

BigInt 는 임의 정밀도 정수. Number.MAX_SAFE_INTEGER (2^53 - 1) 를 넘어가는 정수를 정확히 표현. ES2020 도입.

const big = 12345678901234567890n;   // 끝에 'n'
const fromCtor = BigInt('12345678901234567890');
typeof big      // 'bigint'

왜 필요한가

9007199254740992 + 1               // 9007199254740992 ❌ (정확도 손실)
9007199254740992n + 1n             // 9007199254740993n ✓

큰 ID, 암호화, 정밀 산술, 통화 (cent 기반 정수) 에 안전.

사용

const a = 10n;
const b = 20n;
a + b              // 30n
a * b              // 200n
a / b              // 0n (정수 나눗셈)
a ** 3n            // 1000n
a < b              // true
a === b - 10n      // true

함정: number 와 혼합 금지

1n + 1             // ❌ TypeError: Cannot mix BigInt and other types
1n + 1n            // 2n
1n + BigInt(1)     // 2n
Number(1n) + 1     // 2

같은 타입끼리만 산술 가능. 명시적 변환 필요.

비교는 가능

1n == 1            // true (== 는 변환 허용)
1n === 1           // false (=== 는 엄격)
1n < 2             // true (관계 연산자는 OK)

BigInt → Number

Number(123n)           // 123
Number(12345678901234567890n)   // 12345678901234568000 (정확도 손실!)

작은 BigInt 만 Number 변환 안전.

JSON 호환성

JSON.stringify({ id: 1n })       // ❌ TypeError
JSON.stringify({ id: '1' })      // 우회: string 으로

JSON 표준은 BigInt 미지원. 직렬화는 문자열로.

// BigInt → JSON (string)
JSON.stringify({ id: 1234n }, (k, v) =>
    typeof v === 'bigint' ? v.toString() : v)
// '{"id":"1234"}'

// JSON → BigInt (reviver)
JSON.parse(text, (k, v) =>
    k === 'id' ? BigInt(v) : v)

자주 쓰는 사례

1. 큰 ID 처리

const userId = BigInt('9223372036854775807');   // 64-bit max

DB 의 BIGINT 컬럼 (PostgreSQL bigserial 등) 매칭.

2. 정밀 계산

// 통화: cent 단위로 정수 처리
const balance = 100_00n;          // $100.00 = 10000 cent
const transfer = 50_00n;
const remaining = balance - transfer;

3. 비트 연산 (큰 정수)

const flags = 0n;
const FLAG_ADMIN = 1n << 63n;     // 64-bit 비트 위치
flags | FLAG_ADMIN

Math 함수와 호환 안 됨

Math.abs(-5n)       // ❌ TypeError
// 직접 처리
const abs = (x) => x < 0n ? -x : x;
abs(-5n)             // 5n

Math.* 함수는 BigInt 미지원.

Number vs BigInt 선택

시나리오	권장
일반 정수 (< 2^53)	Number
큰 ID	BigInt 또는 string
정밀 산술 (통화)	BigInt (정수 단위)
부동소수점	Number
비트 연산 (64-bit+)	BigInt
JSON 인터페이스	string

함정

1. 리터럴 표기

1n              // ✓
0o10n           // ✓ (8진 BigInt)
0x10n           // ✓ (16진)
1_000_000n      // ✓ (separator)
1.5n            // ❌ SyntaxError (BigInt 는 정수만)

2. Math.pow

2n ** 100n       // BigInt 거듭제곱
Math.pow(2, 100) // 1.2676506002282294e+30 (Number, 정확도 손실)

3. Array, Set 의 키

new Set([1n, 1])      // {1n, 1}  (다른 키로 취급)

참고

[[JS Number]]
[[JS 타입 변환]]

[Javascript] boolean / null / undefined

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 3 가지 primitive.

boolean : true, false
null : 의도적인 “없음”
undefined : 자동으로 부여된 “없음” (초기화 안 됨)

boolean

const a = true;
const b = false;

// 연산자
true && false      // false
true || false      // true
!true               // false

falsy / truthy

JavaScript 가 boolean 으로 강제 변환할 때 false 가 되는 값들 (falsy):

Boolean(false)        // false
Boolean(0)            // false
Boolean(-0)           // false
Boolean(0n)           // false (BigInt zero)
Boolean('')           // false
Boolean(null)         // false
Boolean(undefined)    // false
Boolean(NaN)          // false

// 나머지 모두 truthy
Boolean([])           // true (빈 배열도!)
Boolean({})           // true (빈 객체도!)
Boolean('false')      // true (문자열 'false' 는 truthy)

[!CAUTION] 빈 배열 [] 과 빈 객체 {} 는 truthy. 다른 언어와 다르다. 명시적 검사 (arr.length === 0) 필요.

null vs undefined

특성	null	undefined
의미	의도적 비어있음	미초기화
자동 부여	✗ (직접 할당)	✓
`typeof`	`'object'` (역사적 버그)	`'undefined'`
`JSON.stringify`	`null`	키 자체 제외
기본 함수 매개변수	적용 안 됨	적용됨

function foo(x = 10) {
    return x;
}
foo();              // 10 (undefined → default)
foo(undefined);     // 10
foo(null);          // null (default 적용 안 됨)

== 와 === 의 차이

null == undefined    // true (특수 케이스)
null === undefined   // false

null == 0            // false
null < 1             // true (관계 연산자는 강제 변환)
null > 0             // false
null >= 0            // true (모순처럼 보임)

이런 함정 때문에 항상 === 권장.

비어있음 검사 idiom

// 안 좋은 패턴
if (x == null) { ... }       // null 과 undefined 모두 매치 (의도라면 OK)

// 명시적 검사
if (x === null) { ... }
if (x === undefined) { ... }
if (x == null) { ... }       // 둘 다 (== 는 강제 변환)

// nullish coalescing
const value = x ?? 'default';   // null/undefined 만 default

// optional chaining
obj?.prop?.subprop

void 연산자

void 0           // undefined
void 'anything'  // undefined

undefined 를 안전하게 얻는 옛 idiom (옛 JS 에서 undefined 는 재할당 가능했음). 모던에선 불필요.

명시적 boolean 변환

Boolean(x)        // 권장
!!x                // 같음 (NOT NOT)

함정

1. typeof null

typeof null      // 'object'  (역사적 버그)
typeof undefined // 'undefined'

null 검사는 === null 사용.

2. NaN 의 truthy

Boolean(NaN)     // false
NaN == NaN       // false
NaN === NaN      // false
Number.isNaN(NaN)  // true

3. 빈 문자열의 비교

'' == false      // true
'' === false     // false
'' < 1           // true ('' → 0)

4. 객체의 truthy

const obj = {};
if (obj) { ... }    // 항상 true (객체 = truthy)
if (Object.keys(obj).length === 0) { ... }   // 진짜 empty 검사

모범 사례

=== 와 !== 만 사용
?? (nullish coalescing) 으로 null/undefined 만 fallback
명시적 boolean 검사, === null, Array.isArray, obj.length === 0 등
Boolean() 또는 !! 로 명시적 변환

참고

[[JS 타입 변환]]
[[JS Number]]
[[JS Optional Chaining]]

[Javascript] Class

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

ES6 class 는 prototype chain 위의 문법 설탕. C++/Java 스타일 OOP 와 닮았지만 내부는 [[JS Prototype Chain]].

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() { return `${this.name} makes a sound`; }
    static create(name) { return new Animal(name); }
}

const a = new Animal('Cat');
a.speak();             // 'Cat makes a sound'
Animal.create('Dog');  // static

구조

class Foo {
    // 인스턴스 필드
    x = 0;

    // 정적 필드
    static y = 1;

    // private 필드 (ES2022)
    #secret = 42;
    static #STATIC_SECRET = 99;

    constructor(arg) { ... }

    method() { ... }
    static staticMethod() { ... }

    get prop() { return this.x; }
    set prop(v) { this.x = v; }

    static {
        // static initialization block (ES2022)
        Foo.y = compute();
    }
}

상속

class Dog extends Animal {
    constructor(name, breed) {
        super(name);             // 부모 constructor
        this.breed = breed;
    }
    speak() {
        return super.speak() + ' (woof)';
    }
}

super 의 의미

super(...) : 부모 constructor 호출
super.method() : 부모 메서드 (현재 this 로)

자식 constructor 에서 super() 호출 전에 this 접근 시 ReferenceError.

private (ES2022)

class Counter {
    #count = 0;

    increment() {
        this.#count++;
    }

    get value() {
        return this.#count;
    }
}

const c = new Counter();
c.#count       // ❌ SyntaxError (외부 접근 불가)

# prefix 가 진짜 private. Symbol 흉내가 아닌 언어 차원의 강제.

static 메서드 / 필드

class MathUtils {
    static PI = 3.14159;
    static circle(r) {
        return MathUtils.PI * r * r;
    }
}

MathUtils.circle(5);   // ✓
new MathUtils().circle(5);   // ❌ (인스턴스에는 없음)

getter / setter

class Temperature {
    #celsius = 0;
    get fahrenheit() { return this.#celsius * 9/5 + 32; }
    set fahrenheit(f) { this.#celsius = (f - 32) * 5/9; }
}

const t = new Temperature();
t.fahrenheit = 100;
t.fahrenheit;          // 100

class expression

const MyClass = class {
    method() { ... }
};

const Named = class FooClass {
    // FooClass 는 내부에서만 사용 가능
};

instanceof

const d = new Dog();
d instanceof Dog       // true
d instanceof Animal    // true (chain)
d instanceof Object    // true

class vs function

	function constructor	class
호이스팅	✓ (var 처럼)	✗ (TDZ)
호출	`new Foo()` 또는 `Foo()`	`new` 필수
`strict` mode	명시	자동
`super`	직접 구현 어려움	자연스러움

// function 으로 같은 동작
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() { ... };

class 가 깔끔하고 권장.

자주 만나는 패턴

추상 클래스 흉내

class Shape {
    constructor() {
        if (new.target === Shape) {
            throw new Error('Shape is abstract');
        }
    }
    area() { throw new Error('Must implement'); }
}

class Circle extends Shape {
    constructor(r) { super(); this.r = r; }
    area() { return Math.PI * this.r ** 2; }
}

mixin

const Serializable = Base => class extends Base {
    toJSON() { return JSON.stringify(this); }
};

class User extends Serializable(Object) {
    constructor(name) { super(); this.name = name; }
}

함수가 class 를 받아 새 class 반환.

함정

1. 호이스팅 안 됨

new Foo();      // ❌ ReferenceError
class Foo {}

2. this 바인딩

class Foo {
    method() { return this.x; }
}
const f = new Foo();
const m = f.method;
m();    // this 가 undefined (strict 자동)

해법: bind 또는 arrow function 필드.

class Foo {
    method = () => this.x;     // bound to instance
}

3. new 없이 호출 금지

class Foo {}
Foo();    // ❌ TypeError

4. extends null

class Foo extends null { ... }
// Object.prototype 도 상속 안 함, 거의 안 씀

참고

[[JS Prototype Chain]]
[[JS Object]]
[[function]]

[Javascript] Date

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JS 의 Date 객체. 시간을 ms 단위로 (1970-01-01T00:00:00Z 기준) 저장. 매우 오래된 API 라 함정이 많다.

생성

new Date();                              // 현재 시각
new Date('2024-01-15');                  // ISO string
new Date('2024-01-15T09:00:00Z');        // UTC
new Date('2024-01-15T09:00:00+09:00');   // timezone
new Date(2024, 0, 15);                   // 년, 월(0-base!), 일
new Date(1705248000000);                 // unix ms
Date.now();                              // 현재 ms (Date 객체 X)

[!CAUTION] 월이 0-base (0=1월). 가장 흔한 함정.

가져오기

const d = new Date('2024-01-15T09:00:00');
d.getFullYear();        // 2024
d.getMonth();           // 0 (1월!)
d.getDate();            // 15 (일)
d.getDay();             // 1 (요일, 0=일요일)
d.getHours();           // 9
d.getMinutes();
d.getSeconds();
d.getMilliseconds();
d.getTime();            // unix ms
d.getTimezoneOffset();  // 분 (UTC 기준)

// UTC 버전
d.getUTCFullYear();
d.getUTCHours();

출력

d.toISOString();         // '2024-01-15T00:00:00.000Z'
d.toJSON();              // 같음
d.toUTCString();         // 'Mon, 15 Jan 2024 00:00:00 GMT'
d.toString();            // 시스템 timezone 문자열
d.toLocaleString();      // '2024. 1. 15. 오전 9:00:00' (ko-KR)
d.toLocaleDateString();
d.toLocaleTimeString();

Intl.DateTimeFormat (권장)

const fmt = new Intl.DateTimeFormat('ko-KR', {
    year: 'numeric', month: 'long', day: 'numeric',
    weekday: 'short',
});
fmt.format(d);    // '2024년 1월 15일 (월)'

new Intl.DateTimeFormat('en-US', {
    timeZone: 'America/New_York',
    dateStyle: 'full', timeStyle: 'short',
}).format(d);

Intl 이 모던 권장. timezone, locale 지원.

산술

const d = new Date();
d.setDate(d.getDate() + 7);          // 7 일 후

// 또는 ms 단위
const future = new Date(d.getTime() + 7 * 24 * 60 * 60 * 1000);

// 차이
const diff = (d2 - d1) / 1000 / 60 / 60 / 24;   // 일 단위

비교

d1 < d2                  // 비교 가능 (ms 변환)
d1.getTime() === d2.getTime()    // 같은 시각 검사
d1 === d2                // 객체 참조, 다르면 false

객체 동등성은 === 로 비교 안 됨. .getTime() 필요.

일반적인 함정

1. 월의 0-base

new Date(2024, 1, 15)       // 2024년 2월 15일! (1월 아님)
new Date('2024-02-15')      // 2024년 2월 15일 (ISO 문자열은 1-base)

2. timezone 추론

new Date('2024-01-15')           // UTC 자정 (Z 가정)
new Date('2024-01-15 09:00')     // local timezone ⚠️
new Date('2024-01-15T09:00')     // local
new Date('2024-01-15T09:00Z')    // UTC

명시적 ISO 8601 (T + Z 또는 +09:00) 권장.

3. Date 의 가변성

const d = new Date();
d.setDate(d.getDate() + 1);    // d 가 변경됨

// 불변 패턴
const tomorrow = new Date(d);
tomorrow.setDate(tomorrow.getDate() + 1);

4. Invalid Date

new Date('invalid')      // Invalid Date
isNaN(d.getTime())       // true

명시적 검사 필요.

5. 윤년 / 28-31일 차이

new Date(2024, 1, 30)      // 2024-02-30 → 자동으로 2024-03-01

월에 없는 날짜는 다음 월로 넘어감 (의도 아닐 가능성).

대안 라이브러리

Date 의 함정 때문에 외부 라이브러리가 흔히 쓰인다.

라이브러리	특징
date-fns	함수형, tree-shakable
dayjs	moment.js 호환, 가벼움 (2KB)
luxon	timezone / Intl 강화
Temporal (ES proposal)	차세대 표준, 곧 도입



addDays(new Date(), 7);
dayjs().add(7, 'day').format('YYYY-MM-DD');

Temporal (proposal)

ECMAScript Temporal 제안. 더 명확한 API.

// 미래에 표준
Temporal.Now.plainDateISO();              // '2024-01-15'
Temporal.PlainDate.from('2024-01-15');
Temporal.ZonedDateTime.from({ ... });

현재는 polyfill (@js-temporal/polyfill) 로 사용 가능.

자주 쓰는 idiom

// 오늘 자정
const today = new Date(); today.setHours(0, 0, 0, 0);

// 이 달 1일
const firstDay = new Date(d.getFullYear(), d.getMonth(), 1);

// 이 달 마지막 날
const lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0);

// unix timestamp
Math.floor(Date.now() / 1000);

[Javascript] Destructuring

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

Destructuring 은 배열 또는 객체의 일부를 변수로 풀어내는 ES6 문법. 코드를 짧고 명시적으로.

객체

const { name, age } = user;
const { name: userName } = user;          // rename
const { name = 'Anonymous' } = user;       // default
const { name, ...rest } = user;            // rest

// nested
const { address: { city, zip } } = user;

배열

const [a, b, c] = [1, 2, 3];
const [a, , c] = [1, 2, 3];       // 중간 skip
const [a, b = 10] = [1];           // default
const [head, ...tail] = [1, 2, 3]; // rest, head=1 tail=[2,3]

// swap
let x = 1, y = 2;
[x, y] = [y, x];                    // x=2, y=1

함수 매개변수

function greet({ name, age = 18 }) {
    return `${name}, ${age}`;
}
greet({ name: 'Alice', age: 30 });
greet({ name: 'Bob' });             // age=18 default

// 배열 인자
function point([x, y]) {
    return x + y;
}
point([3, 4]);                       // 7

자주 쓰는 idiom

API 응답 분해

const { data: { users, total }, error } = response;

React props

function Card({ title, body, onClick }) {
    return <div onClick={onClick}>{title}: {body}</div>;
}

옵션 객체

function createUser({ name, role = 'user', verified = false } = {}) {
    return { name, role, verified };
}
createUser();                        // {} default 까지 적용
createUser({ name: 'A', role: 'admin' });

= {} 가 없으면 createUser() 호출 시 destructure 실패 (TypeError).

map 콜백

users.map(({ name, age }) => `${name} (${age})`);

return 여러 값

function divmod(a, b) {
    return [Math.floor(a / b), a % b];
}
const [quotient, remainder] = divmod(10, 3);

// 객체로
function divmod2(a, b) {
    return { q: Math.floor(a / b), r: a % b };
}
const { q, r } = divmod2(10, 3);

동적 키

const key = 'name';
const { [key]: value } = user;       // user[key] → value

정렬과 결합

const [first, ...rest] = sorted;
const { id, ...others } = obj;
return { ...defaults, ...overrides };

함정

1. default 의 정확한 동작

const { a = 1 } = { a: undefined };   // a = 1 (undefined 만 default 적용)
const { a = 1 } = { a: null };         // a = null (null 은 default 무시)
const { a = 1 } = { a: 0 };            // a = 0

2. nested 의 함정

const { a: { b } } = obj;
// obj.a 가 undefined 면 → TypeError

// 안전한 패턴
const { a: { b } = {} } = obj;
// obj.a 가 undefined 면 {} 로 default

3. 배열의 rest 위치

const [a, ...rest, b] = arr;    // ❌ rest 는 마지막만
const [first, ...rest] = arr;    // ✓

4. 변수명 vs property 명

const { name } = user;        // name 변수에 user.name
const { name: alias } = user; // alias 변수에 user.name

// 헷갈리지 말 것: 콜론의 의미가 객체 리터럴과 반대
const obj = { name: 'value' };       // name 이 키, 'value' 가 값
const { name: alias } = obj;          // name 이 키, alias 가 변수

5. 함수 매개변수의 = {}

function fn({ a, b }) { ... }
fn();    // ❌ TypeError (undefined 를 destructure)

function fn({ a, b } = {}) { ... }
fn();    // ✓

모범 사례

함수 매개변수 에 적극 사용 (가독성)
default value + = {} 함께 (안전한 함수)
nested 보다 평탄 (1-2 단계까지)
swap idiom : [a, b] = [b, a]

참고

[[JS Object]]
[[JS Array]]
[[JS Spread / Rest]]

[Javascript] Error / try-catch

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JS 의 에러 처리. throw 로 던지고 try/catch/finally 로 잡는다. 내장 Error 타입과 사용자 정의 Error.

throw / try / catch

try {
    throw new Error('Something bad');
} catch (e) {
    console.error(e.message);
} finally {
    cleanup();
}

finally 는 에러 유무와 무관하게 실행.

내장 Error 타입

타입	의미
`Error`	기본
`TypeError`	타입 불일치 (`null.foo`)
`ReferenceError`	선언 안 된 변수
`SyntaxError`	구문 오류
`RangeError`	범위 (`new Array(-1)`)
`URIError`	URI 함수
`EvalError`	eval 관련 (사실상 deprecated)
`AggregateError`	여러 에러 묶음 (Promise.any)

Error 객체의 속성

const e = new Error('oops');
e.message     // 'oops'
e.name         // 'Error'
e.stack        // 스택 트레이스

사용자 정의 Error

class ValidationError extends Error {
    constructor(field, message) {
        super(message);
        this.name = 'ValidationError';
        this.field = field;
    }
}

try {
    throw new ValidationError('email', 'invalid format');
} catch (e) {
    if (e instanceof ValidationError) {
        console.log(e.field, e.message);
    }
}

super(message) 로 부모 (Error) 의 message 설정. name 명시 권장.

에러 체인 (cause, ES2022)

try {
    riskyOperation();
} catch (originalError) {
    throw new Error('High-level failure', { cause: originalError });
}

Error.cause 로 원인 에러 보존. 디버깅에 매우 유용.

try { ... } catch (e) {
    console.error(e.message);
    console.error(e.cause);   // 원인 에러
}

catch 의 인자 옵션 (ES2019+)

try { ... } catch (e) { ... }
try { ... } catch { ... }      // 인자 생략 가능 (ES2019)

에러 객체를 안 쓸 때 더 깔끔.

try-catch 의 한계

비동기 에러

try {
    setTimeout(() => { throw new Error('lost'); }, 0);
} catch (e) {
    // 잡히지 않음!
}

setTimeout 콜백은 다른 스택. try-catch 범위 밖.

Promise / async

// promise
fetch('/api').then(...).catch(e => handle(e));

// async/await (가능!)
try {
    const r = await fetch('/api');
    return await r.json();
} catch (e) {
    handle(e);
}

async/await 안에서는 비동기도 try-catch 로 잡힌다.

global handler

// 브라우저
window.addEventListener('error', e => { ... });
window.addEventListener('unhandledrejection', e => { ... });

// Node.js
process.on('uncaughtException', e => { ... });
process.on('unhandledRejection', e => { ... });

처리 안 된 에러를 마지막에 잡는 안전망.

자주 쓰는 패턴

에러 타입별 분기

try {
    await api();
} catch (e) {
    if (e instanceof ValidationError) showFormError(e.field);
    else if (e instanceof NetworkError) showRetry();
    else throw e;        // 알 수 없는 에러는 위로 전달
}

finally 로 리소스 정리

const conn = await openConnection();
try {
    await doWork(conn);
} finally {
    await conn.close();    // 에러 유무 무관 정리
}

sentinel pattern

let result;
try {
    result = computeRisky();
} catch {
    result = DEFAULT;
}

Result<T> 패턴 (함수형)

function safeDivide(a, b) {
    if (b === 0) return { ok: false, error: 'div by zero' };
    return { ok: true, value: a / b };
}

const r = safeDivide(10, 0);
if (!r.ok) handle(r.error);
else use(r.value);

throw 보다 명시적.

함정

1. catch 의 e 가 any

try { ... } catch (e) {
    // e 는 unknown (TypeScript 4.4+)
    if (e instanceof Error) console.log(e.message);
}

throw 가 무엇이든 던질 수 있어서 (throw 'string', throw 42) 검사 필요.

2. throw new Error vs throw ’…’

throw 'oops';                  // 문자열 (스택 없음)
throw new Error('oops');       // ✓ 스택 트레이스 포함

항상 new Error 권장.

3. async 함수 안의 throw

async function foo() {
    throw new Error('x');
}
// foo() 가 rejected Promise 반환
foo().catch(handle);

async 함수의 throw 는 자동으로 rejection.

4. finally 의 return

function foo() {
    try { return 1; }
    finally { return 2; }
}
foo();    // 2 (finally 의 return 이 우선)

finally 에서 return / throw 하면 try 의 결과 덮어씀. 일반적으로 피한다.

참고

[[JS Promise]]
[[JS async/await]]
[[JS Class]]

[Javascript] ES Modules (import / export)

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

ES Modules (ESM) 은 표준 JS 모듈 시스템 (ES6). import / export 키워드. 브라우저와 Node.js 16+ 모두 지원.

export

named export

// utils.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }

// 일괄 export
const NAME = 'lib';
function foo() {}
export { NAME, foo };

// rename
export { foo as bar };

default export

// math.js
export default function add(a, b) { return a + b; }

// 또는
function add(a, b) { return a + b; }
export default add;

한 파일에 default 1 개, named 여러 개 가능.

import

named import


import { add as plus } from './utils.js';        // rename
import { PI, add, default as Lib } from './lib.js';  // default + named

default import

import add from './math.js';                     // 어떤 이름이든
import myAdd from './math.js';                   // 같음

namespace import


utils.PI;
utils.add(1, 2);

side-effect only

import './polyfill.js';        // 실행만, export 안 가져옴

재-export

// index.js (barrel pattern)
export { foo } from './foo.js';
export { bar } from './bar.js';
export * from './baz.js';
export { default } from './main.js';

여러 모듈을 한 진입점으로.

dynamic import

const module = await import('./heavy.js');
module.someFunction();

// 또는 then
import('./heavy.js').then(m => m.use());

조건부 / 지연 로딩에 유용. 코드 스플리팅의 핵심.

ESM 의 특징

1. strict mode 자동

// 모든 ESM 은 자동으로 strict
'use strict';   // 불필요

2. top-level await (ES2022)

// ESM 에서만
const data = await fetch('/api/init').then(r => r.json());
export { data };

3. import.meta

console.log(import.meta.url);        // 모듈의 URL
// 브라우저, Node 둘 다

ESM vs CommonJS

항목	ESM	CommonJS
문법	`import`/`export`	`require`/`module.exports`
동기/비동기	async (static), top-level await	동기
정적 분석	✓ (tree-shaking)	✗
호이스팅	export 가 호이스팅	즉시 평가
브라우저	✓	✗ (번들러 필요)
Node 파일 확장자	`.mjs` 또는 `"type": "module"`	`.cjs` 또는 기본

Node.js 에서 ESM 사용

// package.json
{
    "type": "module"
}

또는 파일 확장자 .mjs.

함정

1. import 경로의 확장자

// 브라우저
import { x } from './foo';        // ❌ 확장자 필요
import { x } from './foo.js';     // ✓

// Node ESM
import { x } from './foo.js';     // ✓ (필수)

// 번들러 (Vite, webpack)
import { x } from './foo';        // 알아서 해결

플랫폼별 차이.

2. import 가 호이스팅됨

foo();
import { foo } from './foo.js';    // ✓ 동작 (호이스팅)

3. import 의 immutable binding


count = 5;     // ❌ TypeError (immutable)

import 한 변수는 상수 binding. 모듈에서 변경하면 import 한 곳에서도 반영.

4. circular dependency

// a.js

export const a = 1;

// b.js

export const b = a + 1;       // a 가 아직 정의 전일 수도

순환 import 시 부분 평가된 모듈이 노출. 가능하면 피한다.

5. CJS interop

// Node ESM 에서 CJS import
import lodash from 'lodash';        // default 만 가능
import { merge } from 'lodash';     // ⚠️ 일부 라이브러리는 안 됨

tree-shaking

// 좋은 import (필요한 것만)

// 안 좋음 (전체)

_.partition(...);

ESM 만 tree-shaking 가능. CJS 는 정적 분석 어려움.

참고

[[JS Class]]

[Javascript] Iterator / Generator

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

Iterator protocol : next() 메서드가 { value, done } 반환
Iterable protocol : [Symbol.iterator]() 가 iterator 반환
Generator : function* 으로 정의, yield 로 값 제공

[[JS Symbol]] 의 well-known symbol Symbol.iterator 가 핵심.

Iterator protocol

const iter = {
    next() {
        return { value: 1, done: false };
    }
};

iter.next();   // { value: 1, done: false }

done: true 면 종료.

Iterable protocol

const range = {
    from: 1,
    to: 5,
    [Symbol.iterator]() {
        let current = this.from;
        const last = this.to;
        return {
            next() {
                if (current <= last) {
                    return { value: current++, done: false };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};

for (const x of range) console.log(x);   // 1, 2, 3, 4, 5
[...range]                                 // [1, 2, 3, 4, 5]

내장 iterable

Array, String, Map, Set, TypedArray
arguments (function 안)
DOM NodeList
generator

[...'abc']                    // ['a', 'b', 'c']
[...new Set([1, 1, 2])]        // [1, 2]
for (const [k, v] of map) { ... }

Generator

function* range(from, to) {
    for (let i = from; i <= to; i++) {
        yield i;
    }
}

const g = range(1, 3);
g.next();   // { value: 1, done: false }
g.next();   // { value: 2, done: false }
g.next();   // { value: 3, done: false }
g.next();   // { value: undefined, done: true }

[...range(1, 5)]    // [1, 2, 3, 4, 5]

generator 함수는 호출 시 즉시 실행 안 함, iterator 반환. next() 호출마다 다음 yield 까지 실행.

yield

function* gen() {
    yield 1;
    yield 2;
    yield 3;
    return 'done';   // value: 'done', done: true
}

yield*

다른 iterable 위임.

function* inner() { yield 1; yield 2; }
function* outer() {
    yield 0;
    yield* inner();    // inner 의 값들을 펼침
    yield 3;
}

[...outer()]    // [0, 1, 2, 3]

next 에 값 전달

function* foo() {
    const a = yield 1;
    const b = yield a * 2;
    yield b * 2;
}

const g = foo();
g.next();          // { value: 1, done: false }
g.next(10);        // a = 10, value: 20
g.next(100);       // b = 100, value: 200

generator 와 caller 가 양방향 통신.

return / throw

const g = gen();
g.next();
g.return('early');    // 강제 종료, { value: 'early', done: true }
g.throw(new Error('oops'));    // generator 안에서 throw

무한 시퀀스

function* naturals() {
    let n = 1;
    while (true) yield n++;
}

const g = naturals();
g.next().value;   // 1
g.next().value;   // 2
// ... 무한 가능

// take(n)
function* take(it, n) {
    for (const x of it) {
        if (n-- <= 0) return;
        yield x;
    }
}
[...take(naturals(), 5)]    // [1, 2, 3, 4, 5]

async generator

async function* fetchPages(baseUrl) {
    let page = 1;
    while (true) {
        const res = await fetch(`${baseUrl}?page=${page}`);
        const data = await res.json();
        if (data.length === 0) return;
        yield data;
        page++;
    }
}

for await (const items of fetchPages('/api/posts')) {
    process(items);
}

페이지네이션, 스트림 처리.

자주 만나는 패턴

Lazy 평가

function* lazy(arr, fn) {
    for (const x of arr) yield fn(x);
}

const it = lazy([1, 2, 3, 4, 5], x => x ** 2);
// 메모리에 결과 배열 미리 안 만듦

사용자 정의 iteration

class LinkedList {
    *[Symbol.iterator]() {
        let node = this.head;
        while (node) {
            yield node.value;
            node = node.next;
        }
    }
}

state machine

function* trafficLight() {
    while (true) {
        yield 'red';
        yield 'green';
        yield 'yellow';
    }
}

함정

1. generator 는 1 회 소비

const g = range(1, 3);
[...g]    // [1, 2, 3]
[...g]    // [] (이미 소비됨)

다시 쓰려면 range(1, 3) 새로 호출.

2. for…in vs for…of

const arr = ['a', 'b', 'c'];
for (const i in arr) console.log(i);    // '0', '1', '2'  ← 인덱스
for (const v of arr) console.log(v);    // 'a', 'b', 'c'  ← 값

iterable 순회는 for...of.

3. spread 의 iterable 요구

[...{ a: 1 }]    // ❌ TypeError
{ ...[1, 2] }    // { 0: 1, 1: 2 }

배열 spread 는 iterable 필요. 객체 spread 는 enumerable own properties.

참고

[[JS Symbol]]
[[JS Map / Set]]
[[JS async/await]]
[[비동기와 타이밍, 콜백부터 async/await까지의 발전사]]

[Javascript] JSON

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JSON (JavaScript Object Notation) 은 데이터 교환 형식. JS 의 객체 리터럴과 비슷하지만 엄격한 문법.

JSON.stringify(value) : JS 값 → JSON 문자열
JSON.parse(text) : JSON 문자열 → JS 값

stringify

JSON.stringify({ a: 1, b: [2, 3] })
// '{"a":1,"b":[2,3]}'

JSON.stringify({ a: 1 }, null, 2)
// pretty-print, 2-space indent
// {
//   "a": 1
// }

parse

JSON.parse('{"a":1}')        // { a: 1 }
JSON.parse('[1, 2, 3]')      // [1, 2, 3]
JSON.parse('null')            // null
JSON.parse('true')            // true
JSON.parse('"hello"')         // 'hello'

replacer (stringify)

JSON.stringify({ a: 1, password: 'secret' }, (key, value) => {
    return key === 'password' ? undefined : value;
});
// '{"a":1}'

// 또는 array (allowlist)
JSON.stringify(obj, ['a', 'b']);    // a, b 만 포함

reviver (parse)

JSON.parse(text, (key, value) => {
    if (key === 'date') return new Date(value);
    return value;
});

date / BigInt 등 표준 외 타입 복원에 유용.

누락되는 값들

stringify 가 무시하거나 변환하는 값:

입력	결과
`undefined` (값)	키 제외
`undefined` (배열 원소)	`null`
`Symbol` (값)	키 제외
`function`	키 제외
`NaN`, `Infinity`	`null`
`Date`	`toISOString()` 호출 → string
`BigInt`	❌ TypeError
순환 참조	❌ TypeError

JSON.stringify({
    a: undefined,
    b: Symbol(),
    c: () => {},
    d: NaN,
    e: new Date(),
    f: 1n,    // ❌
});
// '{"d":null,"e":"2024-..."}'   (a, b, c 제외)

toJSON 메서드

객체에 toJSON 메서드가 있으면 stringify 가 호출.

class Money {
    constructor(amount) { this.amount = amount; }
    toJSON() {
        return `$${this.amount.toFixed(2)}`;
    }
}

JSON.stringify(new Money(99.9));    // '"$99.90"'

Date 가 ISO string 되는 것도 이 메커니즘.

깊은 복사 (제한적)

const copy = JSON.parse(JSON.stringify(obj));

장점: 단순. 단점:

Date → string 으로 변환됨
function, undefined, Symbol 누락
BigInt, 순환 참조 에러

깊은 복사는 structuredClone(obj) 권장 (ES2022+).

자주 쓰는 패턴

API 통신

const response = await fetch('/api', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
});
const json = await response.json();   // 내부적으로 JSON.parse

localStorage

localStorage.setItem('user', JSON.stringify(user));
const user = JSON.parse(localStorage.getItem('user'));

디버깅 출력

console.log(JSON.stringify(complexObj, null, 2));

보안 (민감 정보 제거)

function sanitize(obj) {
    return JSON.parse(JSON.stringify(obj, (k, v) =>
        ['password', 'token', 'apiKey'].includes(k) ? undefined : v
    ));
}

함정

1. 한국어 escape

JSON.stringify({ name: '한글' })
// '{"name":"한글"}'  (UTF-8 그대로)

// 옛 환경 호환을 위해 ASCII 만 원한다면 직접 escape

2. 정수 정밀도

JSON.parse('9007199254740993')      // 9007199254740992 (정밀도 손실)

큰 정수는 JSON 문자열 → BigInt 수동 변환.

3. 순환 참조

const a = {};
a.self = a;
JSON.stringify(a)    // ❌ TypeError

해법: replacer 로 순환 감지 또는 외부 라이브러리.

4. 키 순서

JSON.parse(JSON.stringify(obj))
// 객체 키 순서가 보존되긴 하지만 표준은 보장 안 함

비교/해시에 키 순서를 의존하지 말 것.

JSON5 / JSONC

{
    // 주석 가능
    "a": 1,
    "b": 2,    // trailing comma
}

JSON 의 확장 (주석, 후행 쉼표). 표준이 아니라 라이브러리 필요. tsconfig.json 이 JSONC 사용.

참고

[[JS Object]]
[[JS Array]]

[Javascript] Map / Set / WeakMap / WeakSet

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

ES6 의 4 가지 컬렉션. 객체 / 배열보다 적합한 경우.

컬렉션	키	값	강참조
`Map`	모든 값	모든 값	✓
`Set`	(값만)	(값만)	✓
`WeakMap`	객체 only	모든 값	✗ (약참조)
`WeakSet`	객체 only	(값만)	✗

Map

const m = new Map();
m.set('a', 1);
m.set(42, 'number key');
m.set({}, 'object key');     // 객체도 키
m.set(true, 'bool key');

m.get('a');                   // 1
m.has('a');                   // true
m.delete('a');
m.size;                        // 3
m.clear();

// 초기화
const m2 = new Map([
    ['a', 1],
    ['b', 2],
]);

Map 의 순회

for (const [k, v] of m) { ... }
for (const k of m.keys()) { ... }
for (const v of m.values()) { ... }
m.forEach((v, k) => { ... });

// 배열로
[...m.entries()]
[...m.keys()]
[...m.values()]

삽입 순서 보존.

Map vs Object

항목	Object	Map
키 타입	문자열, Symbol	모든 값
순서 보장	부분적 (string vs int)	✓ (삽입 순서)
size	`Object.keys(obj).length`	`.size`
순회	for…in (prototype 주의)	for…of (자체만)
기본 키	prototype 키 (`toString`)	없음
성능 (잦은 add/remove)	느림	빠름
JSON	✓	✗

// Object 함정
const o = {};
o.toString;     // function (prototype 에서)

// Map 안전
const m = new Map();
m.get('toString');   // undefined

Set

const s = new Set([1, 2, 3, 2, 1]);   // {1, 2, 3}
s.add(4);
s.has(2);                              // true
s.delete(1);
s.size;
s.clear();

[...s];                                // 배열로

자주 쓰는 패턴

// 배열 중복 제거
[...new Set([1, 2, 2, 3])]            // [1, 2, 3]

// 합집합
new Set([...a, ...b])

// 교집합
new Set([...a].filter(x => b.has(x)))

// 차집합
new Set([...a].filter(x => !b.has(x)))

ES2025 에서 Set.prototype.union, intersection 등 메서드 추가.

WeakMap

const wm = new WeakMap();
let obj = {};
wm.set(obj, 'metadata');

obj = null;     // obj 가 가비지 수집 → wm 의 entry 도 자동 제거

키가 객체만, 약참조. 객체가 GC 되면 entry 도 자동 제거.

용도

객체 메타데이터 : 객체 자체에 property 추가하지 않고 부가 정보 보관
private state 흉내 : 외부에서 접근 못 함

const privateData = new WeakMap();

class User {
    constructor(name) {
        privateData.set(this, { password: 'secret' });
        this.name = name;
    }
    checkPassword(p) {
        return privateData.get(this).password === p;
    }
}

#private 필드 (ES2022) 가 표준이지만 WeakMap 으로도 가능.

WeakSet

const ws = new WeakSet();
let obj = { id: 1 };
ws.add(obj);
ws.has(obj);     // true
obj = null;       // ws 에서 자동 제거

객체의 집합 (예: “처리된 객체”, “방문한 객체”).

WeakMap / WeakSet 제약

순회 메서드 없음 (forEach, entries 등)
size 없음
clear() 없음
키는 객체만 (primitive 불가)

이유: 약참조 컬렉션은 어느 시점에 어떤 entry 가 살아있는지 알 수 없음.

자주 만나는 패턴

Map 으로 그룹화

const grouped = new Map();
for (const item of items) {
    if (!grouped.has(item.category)) grouped.set(item.category, []);
    grouped.get(item.category).push(item);
}

Set 으로 중복 체크

const seen = new Set();
for (const item of items) {
    if (seen.has(item.id)) continue;
    seen.add(item.id);
    process(item);
}

WeakMap 으로 캐시

const cache = new WeakMap();

function expensiveCompute(obj) {
    if (cache.has(obj)) return cache.get(obj);
    const result = doExpensive(obj);
    cache.set(obj, result);
    return result;
}
// obj 가 GC 되면 캐시도 자동 정리

함정

1. Map 의 키 비교

const m = new Map();
m.set({}, 1);
m.get({});      // undefined (다른 객체 참조)

const key = {};
m.set(key, 1);
m.get(key);     // 1

객체 키는 참조 동등성.

2. NaN 키

const m = new Map();
m.set(NaN, 'x');
m.get(NaN);     // 'x'  (SameValueZero, NaN === NaN 처럼 취급)

3. JSON 으로 직렬화 안 됨

JSON.stringify(new Map([['a', 1]]))    // '{}'
JSON.stringify(new Set([1, 2]))         // '{}'

// 변환 필요
JSON.stringify([...map])
JSON.stringify({ ...Object.fromEntries(map) })

참고

[[JS Object]]
[[JS Array]]
[[ConcurrentReferenceHashMap]] (개념적 유사: weak ref + map)

[Javascript] NaN / Infinity

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

NaN (Not a Number) : 의미 없는 수치 연산의 결과
Infinity, -Infinity : 너무 큰/작은 수, 0 으로 나누기

IEEE 754 표준에 따른 특수 값. Number 타입이지만 특이한 동작.

typeof NaN          // 'number'
typeof Infinity     // 'number'

NaN 의 발생

0 / 0                    // NaN
Infinity - Infinity      // NaN
Math.sqrt(-1)            // NaN
Number('hello')          // NaN
parseInt('xyz')          // NaN
undefined + 1            // NaN
0 * Infinity             // NaN

수치로 해석 불가능한 모든 연산.

NaN 의 비교 함정

NaN === NaN         // false ⚠️
NaN == NaN          // false
NaN === Number.NaN  // false

[NaN].indexOf(NaN)   // -1 (찾지 못함)
[NaN].includes(NaN)  // true (특별 처리)

NaN 은 자기 자신과도 다르다. IEEE 754 의 정의.

NaN 검사

Number.isNaN(NaN)        // true ✓ (권장)
Number.isNaN('NaN')      // false (문자열은 NaN 아님)
Number.isNaN(undefined)  // false

isNaN(NaN)               // true
isNaN('hello')           // true (전역 isNaN 은 강제 변환)
isNaN('5')               // false

Number.isNaN() 권장 (엄격, 변환 없음).

Object.is

Object.is(NaN, NaN)     // true (특별 처리)
Object.is(0, -0)        // false (구분)

Infinity

1 / 0                    // Infinity
-1 / 0                   // -Infinity
Infinity + 1             // Infinity
Infinity - Infinity      // NaN
1e308 * 10               // Infinity (overflow)
-1e308 * 10              // -Infinity

Number.MAX_VALUE         // 1.7976931348623157e+308
Number.MAX_VALUE * 2     // Infinity
Number.MIN_VALUE         // 5e-324
Number.MIN_VALUE / 2     // 0 (underflow)

Infinity 검사

Number.isFinite(Infinity)  // false
Number.isFinite(NaN)       // false
Number.isFinite(42)        // true
isFinite('42')             // true (강제 변환)
Number.isFinite('42')      // false (엄격)

산술 함정

NaN + 1                  // NaN
NaN * 0                  // NaN
NaN === undefined        // false
NaN == undefined         // false

Infinity + 1             // Infinity
Infinity * 0             // NaN (수학적 정의 안 됨)
Infinity / Infinity      // NaN

NaN 이 한 번 연산에 들어가면 계속 전파 (propagates).

사용 예

사용자 입력 검증

function parseAmount(input) {
    const n = Number(input);
    if (Number.isNaN(n) || !Number.isFinite(n)) {
        throw new Error('Invalid amount');
    }
    return n;
}

누락 데이터 표현

// 통계 계산에서 누락
const data = [1, 2, NaN, 4];
const sum = data.reduce((a, b) => a + b, 0);    // NaN (전파)
const sum2 = data.filter(x => !Number.isNaN(x))
                  .reduce((a, b) => a + b, 0);  // 7 (NaN 제외)

0 의 양수/음수

0 === -0          // true
Object.is(0, -0)  // false (구분)

1 / 0             // Infinity
1 / -0            // -Infinity
0 === -0          // true (수학적으로 같음)

함정

1. == NaN 으로는 검사 불가

x == NaN     // 항상 false
x === NaN    // 항상 false
Number.isNaN(x)   // ✓

2. JSON 의 처리

JSON.stringify(NaN)             // 'null'
JSON.stringify(Infinity)        // 'null'
JSON.stringify(-Infinity)       // 'null'
JSON.stringify({ a: NaN })      // '{"a":null}'

JSON 표준은 NaN/Infinity 미지원 → null 로 변환.

3. typeof

typeof NaN        // 'number' (놀라움)
typeof Infinity   // 'number'

이름과 달리 둘 다 number 타입.

참고

[[JS Number]]
[[JS 타입 변환]]
[[JS boolean / null / undefined]]

[Javascript] Number

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 number 는 IEEE 754 double-precision float (64-bit). 정수와 실수를 같은 타입으로 표현. 정수 안전 범위는 ±2^53 - 1.

typeof 42         // 'number'
typeof 3.14       // 'number'
typeof NaN        // 'number'
typeof Infinity   // 'number'

정수 안전 범위

Number.MAX_SAFE_INTEGER       // 9007199254740991 (2^53 - 1)
Number.MIN_SAFE_INTEGER       // -9007199254740991
Number.MAX_VALUE              // 1.7976931348623157e+308
Number.MIN_VALUE              // 5e-324

// 안전 범위 초과
9007199254740992 + 1          // 9007199254740992 (정확도 손실!)

큰 정수는 BigInt 사용.

부동소수점 함정

0.1 + 0.2 === 0.3            // ❌ false
0.1 + 0.2                     // 0.30000000000000004

이진 표현으로 0.1, 0.2 가 정확히 표현 안 됨. 통화 등은 정수 단위 (cent) 로 다룰 것.

Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON    // 비교 idiom

특수 값

값	의미
`Infinity`	`1/0`, 너무 큰 수
`-Infinity`	`-1/0`
`NaN`	0/0, 의미 없는 수치 연산
`Number.EPSILON`	2^-52 ≈ 2.22e-16

NaN

NaN === NaN              // ❌ false
Number.isNaN(NaN)        // ✓ true
isNaN('hello')           // true (강제 변환 후)
Number.isNaN('hello')    // false (엄격)

Number.isNaN 권장 (변환 없이 검사).

형변환

Number('42')              // 42
Number('42.5')            // 42.5
Number('')                // 0
Number(' ')               // 0
Number('hello')           // NaN
Number(null)              // 0
Number(undefined)         // NaN
Number(true)              // 1
Number(false)             // 0
Number([])                // 0
Number([1])               // 1
Number([1, 2])            // NaN

parseInt('42px')          // 42 (관대)
parseFloat('3.14em')      // 3.14
parseInt('hello')         // NaN
parseInt('10', 2)         // 2 (binary)

정수 검사

Number.isInteger(42)         // true
Number.isInteger(42.0)       // true (값이 정수면)
Number.isInteger(42.5)       // false
Number.isInteger('42')       // false (string)
Number.isSafeInteger(2**53)  // false (안전 범위 초과)

진법 변환

(255).toString(16)       // 'ff'
(255).toString(2)         // '11111111'
parseInt('ff', 16)        // 255
parseInt('11111111', 2)   // 255

0xff                      // 255 (16진 리터럴)
0b11111111                // 255 (2진)
0o777                     // 511 (8진, ES6)

포맷팅

(1234567.89).toLocaleString()                      // '1,234,567.89'
(1234567.89).toLocaleString('de-DE')               // '1.234.567,89'
(1234567.89).toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })
// '₩1,234,568'

(0.1234).toFixed(2)        // '0.12' (string)
(0.1234).toPrecision(3)    // '0.123'

Math

Math.PI                  // 3.141592...
Math.E                   // 2.718...
Math.abs(-5)             // 5
Math.round(0.5)          // 1
Math.floor(0.9)          // 0
Math.ceil(0.1)           // 1
Math.trunc(-1.9)         // -1 (정수부만)
Math.sign(-3)            // -1
Math.max(1, 2, 3)        // 3
Math.min(...arr)         // spread 활용
Math.random()            // 0 ≤ x < 1
Math.pow(2, 10)          // 1024 (또는 2**10)
Math.sqrt(16)            // 4
Math.log(Math.E)         // 1
Math.log2(8)             // 3
Math.log10(1000)         // 3

함정

1. 0 의 양수/음수

0 === -0              // true
1 / 0                  // Infinity
1 / -0                 // -Infinity
Object.is(0, -0)       // false (구분)

2. parseInt 의 radix

parseInt('010')         // 10 (modern), 8 (legacy)
parseInt('010', 10)     // 10 (명시 권장)

3. 큰 정수의 손실

const id = 12345678901234567;
console.log(id);    // 12345678901234568 (마지막 자리 변형)
// 큰 ID 는 string 또는 BigInt 로

참고

[[JS BigInt]]
[[JS 타입 변환]]
[[JS NaN / Infinity]]

[Javascript] Object

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 object 는 key-value 쌍의 컬렉션. 거의 모든 non-primitive 값이 객체. 함수, 배열, 정규식도 객체.

const obj = { a: 1, b: 'hi', c: true };
typeof obj            // 'object'

생성

// literal (가장 흔함)
const a = { x: 1, y: 2 };

// constructor
const b = new Object();
const c = Object.create(null);     // prototype 없는 깨끗한 객체
const d = Object.create({ inherited: 1 });    // 상속

// computed key
const key = 'foo';
const e = { [key]: 1 };            // { foo: 1 }

// shorthand
const x = 1, y = 2;
const f = { x, y };                // { x: 1, y: 2 }

// method shorthand
const g = {
    greet() { return 'hi'; }       // = greet: function() {...}
};

접근

obj.a               // dot notation
obj['a']            // bracket
obj[variable]       // 동적 키

// nested
deep.a.b.c
deep?.a?.b?.c       // optional chaining

// destructuring
const { a, b } = obj;
const { a: alias } = obj;          // rename
const { a = 1 } = obj;             // default
const { a, ...rest } = obj;        // rest

수정 / 삭제

obj.new = 1;
obj['key'] = 2;
delete obj.a;

// spread
const merged = { ...obj, x: 100 };
const cloned = { ...obj };          // shallow copy

Object 메서드

메서드	의미
`Object.keys(obj)`	키 배열
`Object.values(obj)`	값 배열
`Object.entries(obj)`	[key, value] 쌍 배열
`Object.fromEntries(entries)`	역변환
`Object.assign(target, ...src)`	얕은 병합 (target 변경)
`Object.freeze(obj)`	변경 불가 (얕음)
`Object.seal(obj)`	추가/삭제 금지, 수정 OK
`Object.preventExtensions(obj)`	추가만 금지
`Object.isFrozen / isSealed / isExtensible`	검사
`Object.getPrototypeOf / setPrototypeOf`	프로토타입
`Object.getOwnPropertyNames`	모든 own keys (Symbol 제외)
`Object.getOwnPropertySymbols`	Symbol 키만
`Object.getOwnPropertyDescriptor(s)`	descriptor
`Object.defineProperty / defineProperties`	descriptor 설정
`Object.create(proto, descriptors)`	생성

Object.keys({ a: 1, b: 2 })       // ['a', 'b']
Object.entries({ a: 1, b: 2 })    // [['a', 1], ['b', 2]]
Object.fromEntries([['a', 1]])    // { a: 1 }

property descriptor

각 property 는 4 가지 attribute.

{
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true,
}

// 또는 accessor
{
    get() { return ... },
    set(v) { ... },
    enumerable: true,
    configurable: true,
}

Object.defineProperty(obj, key, descriptor) 로 명시.

Object.defineProperty(obj, 'x', {
    value: 1,
    writable: false,    // 변경 불가
    enumerable: false,  // for...in 에서 제외
    configurable: false // delete / 재정의 금지
});

키 순서

const obj = { 2: 'a', 1: 'b', name: 'c', [Symbol()]: 'd' };
Object.keys(obj);     // ['1', '2', 'name']
// 1. 정수처럼 보이는 키 (오름차순)
// 2. 그 외 string 키 (삽입 순서)
// 3. Symbol 키

동등성

const a = { x: 1 };
const b = { x: 1 };
a === b               // false (참조 비교)

// 깊은 비교는 직접
JSON.stringify(a) === JSON.stringify(b)    // ⚠️ 순서, 타입 함정
// 또는 lodash _.isEqual

함정

1. 얕은 복사

const a = { x: { y: 1 } };
const b = { ...a };
b.x.y = 99;
a.x.y      // 99 (참조 공유)

// 깊은 복사
const c = structuredClone(a);    // 모던
const d = JSON.parse(JSON.stringify(a));   // 옛 방식 (date, function 손실)

2. for…in 의 함정

for (const key in obj) {
    // prototype chain 의 키도 포함
}

// 안전한 패턴
for (const key in obj) {
    if (Object.hasOwn(obj, key)) { ... }
}

// 또는
Object.keys(obj).forEach(key => ...)

3. typeof null

typeof null      // 'object' (역사적 버그)

참고

[[JS Array]]
[[JS Prototype Chain]]
[[JS Destructuring]]
[[JS Spread / Rest]]

[Javascript] Optional Chaining / Nullish Coalescing

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

ES2020 도입의 두 가지 단축 문법.

?. (Optional Chaining) : 중간이 null/undefined 면 undefined 반환
?? (Nullish Coalescing) : 왼쪽이 null/undefined 면 오른쪽 사용

Optional Chaining `?.`

user?.address?.city
// user 가 null/undefined 면 즉시 undefined
// 그 외에는 평소처럼 평가

// 옛 방식
user && user.address && user.address.city

메서드 호출

obj.method?.()         // method 가 없으면 undefined, 있으면 호출
arr?.[0]               // 배열 인덱스
fn?.(arg)              // 함수 호출

함수 호출 우회

window.callback?.(data)    // callback 정의되어 있을 때만 호출

Nullish Coalescing `??`

const port = config.port ?? 3000;
// port 가 null 또는 undefined 면 3000, 그 외 그대로

|| 과의 차이:

0 || 'default'           // 'default'  (0 은 falsy)
0 ?? 'default'           // 0          (null/undefined 만 default)

'' || 'fallback'         // 'fallback'
'' ?? 'fallback'         // ''

null || 'x'              // 'x'
null ?? 'x'              // 'x'

undefined || 'x'         // 'x'
undefined ?? 'x'         // 'x'

?? 가 더 명확. 0, ”, false 가 유효한 값일 때 ?? 필수.

Nullish Assignment `??=`

obj.a ??= 'default';
// obj.a 가 null/undefined 면 'default' 할당
// 동등: obj.a = obj.a ?? 'default';

다른 단축:

||= : falsy 면 할당
&&= : truthy 면 할당

config.timeout ||= 5000;     // 0, '', false 도 덮어씀
config.timeout ??= 5000;     // null/undefined 만 덮어씀
config.flag &&= 'enabled';   // truthy 면 'enabled' 로

자주 쓰는 패턴

API 응답 안전 접근

const username = response?.data?.user?.name ?? 'Guest';

옵션 객체 default

function api({ timeout, retries } = {}) {
    timeout = timeout ?? 5000;
    retries = retries ?? 3;
}

콜백 안전 호출

function process(items, { onSuccess, onError } = {}) {
    try {
        const result = doWork(items);
        onSuccess?.(result);
    } catch (e) {
        onError?.(e);
    }
}

배열 / Map 안전 lookup

const first = arr?.[0];
const value = map.get?.(key);    // map 자체가 없을 수도
const found = users?.find?.(u => u.id === id);

React state

const name = user?.profile?.name ?? 'Anonymous';

함정

1. ?? 와 || 의 우선순위

a || b ?? c       // ❌ SyntaxError (괄호 필요)
(a || b) ?? c     // ✓
a || (b ?? c)     // ✓

?? 와 || / && 는 함께 쓸 때 괄호 필수.

2. ?. 의 short-circuit

user?.greet().toUpperCase()
// user 가 undefined 면 → undefined.toUpperCase() ❌ TypeError

user?.greet()?.toUpperCase()
// 안전한 chaining

각 단계마다 ?. 필요.

3. 할당의 왼쪽에는 못 씀

obj?.x = 1    // ❌ SyntaxError
if (obj) obj.x = 1;

4. delete 와의 조합

delete obj?.prop
// obj 가 null 이면 무시, 있으면 delete

이건 가능.

5. 0, false, ” 의 처리

function getCount({ count = 10 } = {}) {
    return count;
}
getCount({ count: 0 });     // 0 (default 적용 안 됨)
getCount({ count: null });   // null (default 적용 안 됨, ⚠️)
getCount({});                 // 10

= default 는 undefined 만 적용. null 처리에 ?? 활용.

function getCount({ count } = {}) {
    return count ?? 10;
}
getCount({ count: null });   // 10 ✓

참고

[[JS boolean / null / undefined]]
[[JS Destructuring]]
[[JS 타입 변환]]

[Javascript] Promise.all / race / any / allSettled

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

Promise 의 정적 메서드 4 형제. 여러 Promise 를 동시에 다루는 도구.

메서드	fulfilled 조건	rejected 조건	결과
`all`	모두 fulfilled	하나라도 rejected	값 배열 / 첫 rejection
`allSettled`	모두 정착	절대 안 됨	`{status, value/reason}` 배열
`race`	가장 먼저 fulfilled	가장 먼저 rejected	첫 정착값/사유
`any`	하나라도 fulfilled	모두 rejected	첫 fulfilled / AggregateError

Promise.all

const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json()),
]);

모두 성공해야 결과. 하나라도 실패하면 즉시 throw, 나머지는 계속 실행되지만 결과 못 받음.

try {
    const results = await Promise.all([p1, p2, p3]);
} catch (e) {
    // 가장 먼저 실패한 reason
}

Promise.allSettled

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach((r, i) => {
    if (r.status === 'fulfilled') console.log(i, r.value);
    else console.log(i, r.reason);
});

모두 정착 (성공/실패 무관) 까지 대기. 부분 실패가 OK 일 때.

Promise.race

// 타임아웃 패턴
function timeout(ms) {
    return new Promise((_, reject) =>
        setTimeout(() => reject(new Error('timeout')), ms));
}

const result = await Promise.race([
    fetch('/api/slow'),
    timeout(3000),
]);

가장 먼저 정착 (성공/실패 무관) 한 Promise 결과.

Promise.any (ES2021)

// 여러 CDN mirror 중 하나라도 응답하면
const data = await Promise.any([
    fetch('https://mirror1/data'),
    fetch('https://mirror2/data'),
    fetch('https://mirror3/data'),
]);

하나라도 성공 하면 그 값. 모두 실패하면 AggregateError (errors 배열).

try {
    const data = await Promise.any([...]);
} catch (e) {
    if (e instanceof AggregateError) {
        e.errors.forEach(err => console.error(err));
    }
}

비교 매트릭스

상황	권장
모두 필요	`all`
부분 실패 OK	`allSettled`
가장 빠른 응답 (성공/실패 무관)	`race`
하나라도 성공	`any`
타임아웃	`race` + timeout Promise

흔히 만나는 패턴

concurrent fetch

const users = await Promise.all(
    userIds.map(id => fetch(`/api/users/${id}`).then(r => r.json()))
);

배열의 map 콜백에서 Promise 반환 → all 로 모음.

concurrent with limit

// 동시 5 개로 제한
async function pool(items, fn, concurrency = 5) {
    const results = [];
    for (let i = 0; i < items.length; i += concurrency) {
        const chunk = items.slice(i, i + concurrency);
        const r = await Promise.all(chunk.map(fn));
        results.push(...r);
    }
    return results;
}

await pool(urls, fetch, 5);

라이브러리: p-limit, p-queue.

timeout wrapper

function withTimeout(promise, ms) {
    return Promise.race([
        promise,
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('timeout')), ms))
    ]);
}

const r = await withTimeout(fetch('/api'), 5000);

부분 실패 통계

const results = await Promise.allSettled(
    items.map(item => process(item))
);
const success = results.filter(r => r.status === 'fulfilled').length;
const failed = results.length - success;
console.log(`${success}/${results.length} succeeded`);

함정

1. Promise.all 의 fail-fast

Promise.all([slow_p, fail_p])
// fail_p 가 즉시 throw → slow_p 의 결과는 못 받음
// 그러나 slow_p 는 background 에서 계속 실행됨 (cancel 안 됨)

진짜 cancel 은 AbortController 사용.

2. 빈 배열

Promise.all([])             // [] (즉시 resolve)
Promise.allSettled([])      // []
Promise.race([])             // 영원히 pending ⚠️
Promise.any([])              // AggregateError

race / any 에 빈 배열 주의.

3. await Promise.all vs 순차

// ❌ 순차 (2 sec)
const a = await fetch('/a');   // 1 sec
const b = await fetch('/b');   // 1 sec

// ✓ 동시 (1 sec)
const [a, b] = await Promise.all([
    fetch('/a'),
    fetch('/b'),
]);

의존성 없으면 항상 all 로 묶기.

4. 큰 배열의 메모리

Promise.all(arr.map(fn))     // 100,000 개면 모두 동시 시작

concurrency limit 권장.

참고

[[Promise]]
[[async/await]]
[[비동기와 타이밍, 콜백부터 async/await까지의 발전사]]

[Javascript] Prototype Chain

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 모든 객체는 [[Prototype]] (내부 슬롯) 을 가진다. 속성 lookup 시 자신에게 없으면 prototype chain 을 따라 올라가며 검색.

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

dog.barks    // true (own)
dog.eats     // true (prototype 에서)

접근

Object.getPrototypeOf(obj)     // [[Prototype]] 반환
Object.setPrototypeOf(obj, p)  // 변경 (성능 주의)
obj.__proto__                   // 비표준 getter (피하기)

함수의 prototype

함수는 prototype property 를 가진다 (객체).

function Foo() {}
Foo.prototype                  // {} (객체)
Foo.prototype.constructor      // Foo

const obj = new Foo();
Object.getPrototypeOf(obj) === Foo.prototype    // true
obj.__proto__ === Foo.prototype                 // true

new Foo() 시 새 객체의 [[Prototype]] 이 Foo.prototype 으로 설정.

class 와의 관계

class Animal {
    eat() { return 'eating'; }
}

class Dog extends Animal {
    bark() { return 'woof'; }
}

const d = new Dog();
d.bark()    // 'woof' (own)
d.eat()     // 'eating' (prototype chain)

내부적으로 같은 prototype chain.

d → Dog.prototype → Animal.prototype → Object.prototype → null

prototype chain 의 끝

Object.getPrototypeOf({}) === Object.prototype       // true
Object.getPrototypeOf(Object.prototype) === null     // true

const clean = Object.create(null);
Object.getPrototypeOf(clean)    // null

Object.create(null) 은 prototype 없는 진짜 깨끗한 객체 (사전처럼 사용).

속성 lookup 순서

const grandparent = { x: 1 };
const parent = Object.create(grandparent);
parent.y = 2;
const child = Object.create(parent);
child.z = 3;

child.z   // 3 (own)
child.y   // 2 (parent)
child.x   // 1 (grandparent)
child.w   // undefined (chain 끝까지 못 찾음)

자신 → prototype → … → null 까지 탐색.

속성 검색 시점

읽기 : chain 전체 검색
쓰기 : 자기 자신에 추가 (chain 변경 안 함)

const parent = { x: 1 };
const child = Object.create(parent);
child.x   // 1 (parent 에서)
child.x = 2;
child.x   // 2 (own, parent 의 x 는 1 그대로)
parent.x  // 1

constructor

function Foo() {}
const obj = new Foo();
obj.constructor === Foo    // true (Foo.prototype.constructor)

[].constructor === Array   // true
'hi'.constructor === String  // true (auto-boxing)

Object 메서드들

메서드	의미
`Object.hasOwn(obj, key)`	own property 검사 (Object.hasOwnProperty 대체)
`obj.hasOwnProperty(key)`	같음 (옛 방식)
`key in obj`	chain 포함 포함 검사
`Object.keys(obj)`	own enumerable string 키
`Object.getOwnPropertyNames(obj)`	own non-enumerable 포함
`Reflect.ownKeys(obj)`	모든 own (Symbol 포함)

const parent = { x: 1 };
const child = Object.create(parent);
child.y = 2;

'y' in child           // true
'x' in child           // true (chain)
Object.hasOwn(child, 'y')   // true
Object.hasOwn(child, 'x')   // false

Object.keys(child)     // ['y']

class 의 static vs instance

class Foo {
    static staticMethod() { return 'static'; }
    instanceMethod() { return 'instance'; }
}

Foo.staticMethod()           // ✓ (Foo 자체에 있음)
new Foo().staticMethod()      // ❌ (instance 의 prototype 에 없음)

new Foo().instanceMethod()    // ✓ (Foo.prototype 에 있음)
Foo.instanceMethod()          // ❌

함정

1. proto vs prototype

// instance → __proto__ 또는 getPrototypeOf
// function → prototype
function Foo() {}
const f = new Foo();
f.__proto__ === Foo.prototype    // true
f.prototype                       // undefined

2. setPrototypeOf 의 성능

엔진이 prototype chain 을 캐시 / 최적화. 변경하면 deoptimization. 가능하면 Object.create 로 처음부터.

3. arrow function 에는 prototype 없음

const arrow = () => {};
arrow.prototype     // undefined
new arrow()         // ❌ TypeError

생성자로 사용 불가.

4. delete 후 chain 검색

const parent = { x: 1 };
const child = Object.create(parent);
child.x = 2;
delete child.x;
child.x   // 1 (parent 의 x 가 다시 보임)

참고

[[JS Object]]
[[JS Class]]
[[Lexical Environment]]

[Javascript] Proxy / Reflect

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

Proxy : 객체의 기본 동작 (get, set, delete 등) 을 가로채는 (intercept) 객체
Reflect : Proxy 의 기본 동작을 호출하는 표준 API

메타 프로그래밍, 데이터 바인딩, validation 등에 활용. Vue 3 의 reactive 시스템이 대표.

Proxy 기본

const target = { a: 1 };
const handler = {
    get(obj, prop) {
        console.log('get', prop);
        return obj[prop];
    },
    set(obj, prop, value) {
        console.log('set', prop, value);
        obj[prop] = value;
        return true;
    }
};

const p = new Proxy(target, handler);
p.a;          // 'get a' → 1
p.b = 99;     // 'set b 99'

13 가지 trap

trap	메서드	발동
`get(target, prop, receiver)`	property 읽기	`obj.x`
`set(target, prop, value)`	property 쓰기	`obj.x = v`
`has(target, prop)`	in	`'x' in obj`
`deleteProperty(target, prop)`	delete	`delete obj.x`
`apply(target, thisArg, args)`	함수 호출	`fn()`
`construct(target, args)`	new	`new Fn()`
`getPrototypeOf`	Object.getPrototypeOf
`setPrototypeOf`	Object.setPrototypeOf
`isExtensible`	Object.isExtensible
`preventExtensions`	Object.preventExtensions
`getOwnPropertyDescriptor`
`defineProperty`
`ownKeys`	Object.keys 등

자주 쓰는 패턴

1. validation

const user = new Proxy({}, {
    set(obj, prop, value) {
        if (prop === 'age' && typeof value !== 'number') {
            throw new TypeError('age must be number');
        }
        obj[prop] = value;
        return true;
    }
});

user.age = 30;       // OK
user.age = '30';     // ❌ TypeError

2. default value

const safe = new Proxy({}, {
    get(obj, prop) {
        return prop in obj ? obj[prop] : 'default';
    }
});

safe.foo;    // 'default' (not undefined)

3. negative array index

function negativeArray(arr) {
    return new Proxy(arr, {
        get(target, prop) {
            const i = Number(prop);
            if (!Number.isNaN(i) && i < 0) {
                return target[target.length + i];
            }
            return target[prop];
        }
    });
}

const a = negativeArray([1, 2, 3, 4]);
a[-1];    // 4
a[-2];    // 3

4. logging / observability

function observe(obj, onChange) {
    return new Proxy(obj, {
        set(target, prop, value) {
            const old = target[prop];
            target[prop] = value;
            onChange(prop, old, value);
            return true;
        }
    });
}

const tracked = observe({ x: 1 }, (k, o, n) => console.log(`${k}: ${o} → ${n}`));
tracked.x = 99;    // 'x: 1 → 99'

5. reactive (Vue 3 스타일)

const dependencies = new Map();

function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            track(obj, prop);
            return obj[prop];
        },
        set(obj, prop, value) {
            obj[prop] = value;
            trigger(obj, prop);
            return true;
        }
    });
}

Reflect

Proxy 의 기본 동작을 호출하는 표준 API. obj[prop] 보다 더 정확하고 일관된 형태.

Reflect.get(obj, prop)              // = obj[prop]
Reflect.set(obj, prop, value)       // = obj[prop] = value
Reflect.has(obj, prop)              // = prop in obj
Reflect.deleteProperty(obj, prop)   // = delete obj[prop]
Reflect.apply(fn, thisArg, args)    // = fn.apply(thisArg, args)
Reflect.construct(Fn, args)         // = new Fn(...args)
Reflect.ownKeys(obj)                 // = Object.getOwnPropertyNames + Symbols

Proxy 안에서 Reflect

new Proxy(target, {
    get(obj, prop, receiver) {
        // obj[prop] 보다 Reflect.get 권장
        return Reflect.get(obj, prop, receiver);
    }
});

receiver 가 getter/setter 의 this 를 올바르게 전달. 직접 obj[prop] 하면 getter 의 this 가 잘못될 수 있음.

함정

1. Proxy 는 원본을 대체하지 않음

const target = { x: 1 };
const p = new Proxy(target, {});
target.x = 99;
p.x;        // 99 (원본 통과)

p.x = 100;
target.x;   // 100 (Proxy 가 target 수정)

대상 객체를 가지고 있으면 Proxy 우회 가능.

2. 일부 trap 의 반환값 규칙

new Proxy(target, {
    set(obj, prop, value) {
        // 반드시 true / false 반환 (strict 에서 false 면 TypeError)
        return true;
    }
});

set, deleteProperty, defineProperty 등은 boolean 반환 필수.

3. 성능

const p = new Proxy(obj, handler);
p.x;    // 일반 obj.x 보다 수배 느림

hot path 에는 부적합.

4. private field 접근 불가

class Foo {
    #secret = 42;
}
const p = new Proxy(new Foo(), {});
p.#secret;    // ❌ TypeError (Proxy 가 receiver)

참고

[[JS Object]]
[[JS Class]]

[Javascript] Regular Expression

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 정규식. RegExp 객체 또는 리터럴 /.../ 로 표현. ECMAScript 정규식 문법 (Perl 의 부분집합).

생성

const re = /pattern/flags;
const re = new RegExp('pattern', 'flags');
const re = new RegExp(pattern);    // pattern 이 string 또는 RegExp

리터럴이 가독성 좋음. 동적 패턴은 new RegExp.

flags

flag	의미
`g`	global (모든 매치)
`i`	case-insensitive
`m`	multiline (^ $ 가 각 줄에)
`s`	dotAll (`.` 가 `\n` 포함)
`u`	unicode (Unicode 코드 포인트)
`y`	sticky (lastIndex 부터 매칭)
`d`	indices (group 의 시작/끝 위치)

/python/gi      // global + case-insensitive

자주 쓰는 메서드

메서드	의미
`regex.test(str)`	true/false
`regex.exec(str)`	match 객체 또는 null
`str.match(regex)`	g 면 배열, 아니면 exec 같음
`str.matchAll(regex)`	iterator (g 필수)
`str.search(regex)`	첫 위치 (없으면 -1)
`str.replace(regex, repl)`	치환
`str.replaceAll(regex, repl)`	g flag 필수
`str.split(regex)`	분할

/\d+/.test('abc 123')              // true
'abc 123'.match(/\d+/)             // ['123', index: 4, ...]
'abc 123 456'.match(/\d+/g)         // ['123', '456']
'hello'.replace(/l/g, 'L')          // 'heLLo'

자주 쓰는 패턴 cheatsheet

패턴	의미
`.`	임의 문자 (개행 제외)
`\d`, `\D`	숫자, 비숫자
`\w`, `\W`	영숫자_, 그 외
`\s`, `\S`	공백, 비공백
`^`, `$`	문자열 시작, 끝
`\b`, `\B`	단어 경계, 비경계
`*`	0+
`+`	1+
`?`	0 또는 1
`{n}`, `{n,m}`	정확/범위
`[abc]`	집합
`[^abc]`	부정 집합
`[a-z]`	범위
`\|`	OR
`()`	캡처 그룹
`(?:...)`	비캡처
`(?<name>...)`	named group
`(?=...)`	lookahead
`(?!...)`	negative lookahead
`(?<=...)`	lookbehind
`(?<!...)`	negative lookbehind

캡처 그룹

const m = '2024-01-15'.match(/(\d{4})-(\d{2})-(\d{2})/);
// m[0] = '2024-01-15'  (전체)
// m[1] = '2024'         (1번 그룹)
// m[2] = '01'
// m[3] = '15'

// named
const m2 = '2024-01-15'.match(/(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/);
m2.groups.y;    // '2024'

치환

'foo bar'.replace(/(\w+) (\w+)/, '$2 $1');          // 'bar foo'
'2024-01-15'.replace(/(\d+)-(\d+)-(\d+)/, '$3/$2/$1');   // '15/01/2024'

// named
'2024-01-15'.replace(/(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/, '$<d>/$<m>/$<y>');

// 함수 replacer
'abc'.replace(/./g, (ch) => ch.toUpperCase());      // 'ABC'

// 함수 + 그룹
'2024-01-15'.replace(/(\d+)/g, (n) => n.padStart(4, '0'));

lookahead / lookbehind

// 다음에 'USD' 가 오는 숫자만
'100 USD, 200 EUR'.match(/\d+(?= USD)/g);    // ['100']

// 이전이 '$' 인 숫자
'$100 €200'.match(/(?<=\$)\d+/g);             // ['100']

// 다음에 'px' 가 아닌 숫자
'10em 20px 30em'.match(/\d+(?!px)/g);

test vs match vs matchAll

// 존재 검사만
/\d+/.test('abc 123')               // true (빠름)

// 첫 매치
'abc 123 456'.match(/\d+/)
// ['123', index: 4, input: 'abc 123 456']

// 모든 매치 (배열)
'abc 123 456'.match(/\d+/g)
// ['123', '456']

// 모든 매치 + 그룹 (iterator)
for (const m of 'abc 123 456'.matchAll(/(\d+)/g)) {
    console.log(m[0], m[1], m.index);
}

matchAll 가 가장 정보 풍부.

자주 만나는 패턴

email (대략)

/^[\w.+-]+@[\w-]+\.[\w.-]+$/

완벽한 email 정규식은 매우 복잡 (RFC 5322). 보통 위 정도로 충분.

URL

/^https?:\/\/[\w.-]+(:\d+)?(\/.*)?$/

전화번호 (한국)

/^0\d{1,2}-\d{3,4}-\d{4}$/

화이트스페이스 정규화

str.replace(/\s+/g, ' ').trim()

함정

1. lastIndex (g flag)

const re = /\d+/g;
re.exec('abc 123 456');    // ['123', index: 4]
re.exec('abc 123 456');    // ['456', index: 8]
re.exec('abc 123 456');    // null
re.exec('abc 123 456');    // ['123', ...]  (재시작)

g flag 의 lastIndex 가 상태. 같은 regex 객체 공유 시 함정.

2. metachar escape

'a.b.c'.split('.')          // ['a', 'b', 'c']
'a.b.c'.split(/\./)          // ['a', 'b', 'c']
'a.b.c'.split(/./)           // ['', '', '', '', ''] ⚠️ . 은 any

3. 동적 패턴의 escape

function escapeRegex(s) {
    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
new RegExp(escapeRegex(userInput))

사용자 입력을 정규식으로 만들 때 escape 필수.

4. 욕심쟁이 vs 게으른

'<a><b>'.match(/<.+>/)[0]    // '<a><b>' (욕심)
'<a><b>'.match(/<.+?>/)[0]   // '<a>'    (게으른)

[Javascript] Spread / Rest

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

같은 문법 ... 가 두 가지 의미.

Spread : iterable 을 펼침 (right-hand)
Rest : 나머지를 모음 (left-hand 또는 함수 매개변수)

Spread (펼침)

배열

const a = [1, 2];
const b = [...a, 3, 4];        // [1, 2, 3, 4]
const c = [0, ...a, ...a];     // [0, 1, 2, 1, 2]
const copy = [...a];            // 얕은 복사

// 함수 인자
Math.max(...[1, 2, 3]);         // 3
console.log(...['a', 'b']);     // a b

// string 도 iterable
[...'abc']                       // ['a', 'b', 'c']

객체 (ES2018+)

const a = { x: 1, y: 2 };
const b = { ...a, z: 3 };       // { x: 1, y: 2, z: 3 }
const copy = { ...a };           // 얕은 복사

// 병합 + override
const merged = { ...defaults, ...userInput };
// userInput 이 defaults 를 덮어씀

Rest (모음)

함수 매개변수

function sum(...nums) {
    return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4);            // 10

// 일부 인자 + rest
function logger(level, ...messages) {
    console.log(`[${level}]`, messages.join(' '));
}
logger('INFO', 'a', 'b', 'c');

배열 destructuring

const [first, ...others] = [1, 2, 3, 4];
// first = 1, others = [2, 3, 4]

const [a, b, ...rest] = arr;

객체 destructuring

const { name, ...rest } = user;
// name = user.name, rest = 나머지 모든 속성

arguments vs rest

// 옛 스타일
function foo() {
    console.log(arguments);    // 유사 배열 (array-like)
    Array.from(arguments).map(...);   // 변환 필요
}

// 모던
function foo(...args) {
    console.log(args);          // 진짜 배열
    args.map(...);              // 바로 메서드
}

arguments 는 화살표 함수에서 안 됨, rest 는 됨.

자주 쓰는 패턴

배열 복사

const original = [1, 2, 3];
const copy = [...original];     // 얕은 복사
// 또는: Array.from(original), original.slice()

객체 복사

const copy = { ...original };   // 얕은 복사
// 깊은 복사는 structuredClone(original)

객체 병합

const config = { ...defaults, ...userOptions };

객체에서 특정 키 제외

const { password, ...safe } = user;     // safe 는 password 없는 user

배열 끝/처음 추가

const newArr = [...arr, newItem];        // 끝
const newArr2 = [newItem, ...arr];       // 처음

immutable 갱신.

Math 함수 + 배열

const max = Math.max(...arr);
const min = Math.min(...arr);

함정

1. 얕은 복사

const a = [{ x: 1 }];
const b = [...a];
b[0].x = 99;
a[0].x      // 99 (참조 공유)

깊은 복사는 structuredClone(obj) (ES2022+) 또는 JSON.parse(JSON.stringify(obj)) (제한적).

2. 객체 spread 의 순서

const a = { x: 1 };
const b = { x: 99, ...a };       // { x: 1 }  (뒤가 우선)
const c = { ...a, x: 99 };       // { x: 99 } (뒤가 우선)

같은 키는 뒤에 오는 값이 우선.

3. iterable 만 spread

[...{ a: 1 }]      // ❌ TypeError (객체는 iterable 아님)
{ ...[1, 2, 3] }   // { 0: 1, 1: 2, 2: 3 } (배열을 객체로)

4. rest 의 위치

function foo(...args, last) {}    // ❌ SyntaxError (rest 는 마지막)
function foo(first, ...rest) {}    // ✓

5. Symbol.iterator 가 없으면

const obj = { length: 3 };
[...obj]    // ❌ TypeError

Symbol.iterator 가 있는 객체만 array spread 가능.

참고

[[JS Destructuring]]
[[JS Array]]
[[JS Object]]

[Javascript] strict mode

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

'use strict' 디렉티브로 활성화되는 엄격 실행 모드. ES5 도입. 위험한 문법을 에러로 만들어 코드 안전성 향상.

ES module 과 class 본문은 자동으로 strict mode.

사용

// 파일 최상단
'use strict';

// 또는 함수 내부
function foo() {
    'use strict';
    // ...
}

strict mode 의 효과

1. 선언 안 한 변수에 할당 시 ReferenceError

// sloppy
function foo() {
    x = 1;     // 실수로 var 빼먹음 → global 변수 생성!
}

// strict
function foo() {
    'use strict';
    x = 1;     // ❌ ReferenceError
}

global 오염 방지.

2. 중복 매개변수 금지

function foo(a, a) { ... }      // sloppy 에서는 동작
function foo(a, a) { ... }      // strict → SyntaxError
'use strict';

3. 8 진수 리터럴 금지

const x = 010;          // sloppy: 8 (8진수 8)
'use strict';
const x = 010;          // ❌ SyntaxError
const y = 0o10;         // ES6 표준 8진수 표기

4. delete 의 제한

'use strict';
delete Object.prototype;     // ❌ TypeError (변경 불가)

var x = 1;
delete x;                     // ❌ SyntaxError (변수 삭제 불가)

5. this 의 변화

function foo() {
    console.log(this);
}

foo();                  // sloppy: window/global
'use strict';
foo();                  // strict: undefined

명시적으로 this 를 지정하지 않은 호출에서 더 안전.

6. with 금지

'use strict';
with (obj) { ... }     // ❌ SyntaxError

7. arguments 의 immutable

function foo(a) {
    'use strict';
    a = 99;
    console.log(arguments[0]);    // 호출 시 전달된 원본 값
}

sloppy 모드에서는 a 변경이 arguments[0] 에 반영. strict 는 분리.

8. eval 의 격리

'use strict';
eval('var x = 1;');
console.log(x);     // ❌ ReferenceError (eval 내부 스코프)

sloppy 모드에서는 eval 안의 변수가 호출 스코프에 누설.

9. 미래 예약어 보호

implements, interface, let, package, private, protected, public, static, yield 가 식별자 금지.

언제 자동으로 strict 인가

ES module (.mjs, <script type="module">, modern build tools)
class 본문
export / import 사용 파일

따라서 현대 코드는 보통 자연스럽게 strict.

모범 사례

항상 'use strict' (또는 ES module 사용)
함수 단위 strict 는 옛 스타일, 파일 단위 권장
라이브러리 코드는 반드시 strict

호환성

모든 브라우저 + Node.js 가 지원. legacy IE5 같은 환경 외에는 문제 없음.

sloppy mode 의 함정 (왜 strict 가 필요한가)

// 1. global 오염
foo = 1;
function setup() {
    foo = 99;     // 의도와 다르게 global foo 변경
}

// 2. NaN 비교
NaN === NaN;     // false (이건 strict 무관)

// 3. with 의 스코프 폭주
with (obj) {
    a = 1;        // obj.a 인지 외부 a 인지 모호
}

strict 가 이런 함정의 상당수를 컴파일 / 런타임 에러로 잡아준다.

참고

[[JS var / let / const]]
[[JS 호이스팅]]
[[JS 스코프 체인]]

[Javascript] String

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 string 은 UTF-16 코드 유닛의 불변 시퀀스. 작은따옴표, 큰따옴표, 백틱 (template literal) 으로 작성.

const a = 'single';
const b = "double";
const c = `template`;
typeof a   // 'string'

Template Literal

const name = 'Alice';
const age = 30;
const s = `My name is ${name} and I am ${age}`;

// 멀티라인
const multi = `line 1
line 2
line 3`;

// 표현식
const result = `2 + 2 = ${2 + 2}`;

tagged template

function tag(strings, ...values) {
    return strings.reduce((acc, str, i) =>
        acc + str + (values[i] ?? ''), '');
}

const x = tag`Hello, ${name}!`;

SQL, GraphQL, HTML 라이브러리에서 자주 사용 (예: sql 태그 함수로 안전한 쿼리 빌더).

자주 쓰는 메서드

메서드	의미
`.length`	글자 수 (UTF-16 단위)
`.charAt(i)`, `s[i]`	i 번째 글자
`.indexOf(s)`, `.lastIndexOf(s)`	위치
`.includes(s)`	포함 여부
`.startsWith(s)`, `.endsWith(s)`	시작/끝 검사
`.slice(start, end)`, `.substring(start, end)`	부분
`.split(sep)`	분할
`.replace(pat, repl)`, `.replaceAll(pat, repl)`	치환
`.match(regex)`, `.matchAll(regex)`	정규식 매칭
`.search(regex)`	정규식 위치
`.toLowerCase()`, `.toUpperCase()`	대소문자
`.trim()`, `.trimStart()`, `.trimEnd()`	공백 제거
`.padStart(n, ch)`, `.padEnd(n, ch)`	패딩
`.repeat(n)`	반복
`.normalize('NFC')`	유니코드 정규화
`.at(i)`	i 번째 (음수 인덱스)

'Hello'.length              // 5
'Hello'[0]                   // 'H'
'Hello'.slice(1, 4)          // 'ell'
'Hello'.split('l')           // ['He', '', 'o']
'a-b-c'.split('-')           // ['a', 'b', 'c']
'aaa'.replace('a', 'b')      // 'baa' (첫 번째만)
'aaa'.replaceAll('a', 'b')   // 'bbb'
'   hi   '.trim()            // 'hi'
'5'.padStart(3, '0')         // '005'
'-'.repeat(5)                 // '-----'

immutable

const s = 'hello';
s[0] = 'H';            // 무시 (sloppy) 또는 TypeError (strict)
console.log(s);         // 'hello'

s = s.toUpperCase();    // 새 문자열 할당 (s 가 const 면 ❌)
let t = s.toUpperCase();  // ✓

모든 변환 메서드는 새 문자열 반환.

유니코드 함정

'😀'.length              // 2 (surrogate pair)
'😀'.charAt(0)            // '\uD83D' (의미 없음)
[...'😀']                 // ['😀'] (iterator 가 코드 포인트 단위)

'😀'.codePointAt(0)        // 128512 (정확한 코드 포인트)
String.fromCodePoint(128512)   // '😀'

이모지, 한자 일부, 글자 결합 (다이크리틱) 등이 1 글자가 아닐 수 있다. 정확한 grapheme 카운트는 Intl.Segmenter 또는 외부 라이브러리.

String vs string

'hello'                  // primitive
new String('hello')      // String 객체 (사용 X)

typeof 'hello'           // 'string'
typeof new String('hi')  // 'object'

'hello'.length           // 5 (자동 boxing)

primitive 가 표준. new String 은 사용하지 말 것.

비교

'apple' < 'banana'       // true (사전순, char code)
'B' < 'a'                 // true ('B' = 66, 'a' = 97)
'한' < '글'                // 유니코드 코드 포인트 비교
'한'.localeCompare('글', 'ko-KR')  // 로케일 기반 (음수/0/양수)

한글, 다른 언어 정렬은 localeCompare 또는 Intl.Collator 권장.

함정

1. 숫자 + 문자열

'5' + 3        // '53' (string concatenation)
'5' - 3        // 2 (number)
'5' * 3        // 15
+'5'           // 5 (string → number)

2. == 의 형변환

'5' == 5       // true (강제 변환)
'5' === 5      // false

항상 === 권장.

3. 정규식 replace 의 special $

'abc'.replace('b', '$&')         // 'abbc' ($& = matched)
'abc'.replaceAll('b', '$$')      // 'a$c' ($$  = literal $)

literal $ 를 넣으려면 escape.

참고

[[JS Number]]
[[JS 타입 변환]]

[Javascript] Symbol

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

Symbol 은 ES6 도입의 7번째 primitive 타입. 유일성 을 보장하는 식별자.

const s1 = Symbol('description');
const s2 = Symbol('description');
s1 === s2          // false (같은 description 이어도 다름)
typeof s1          // 'symbol'

왜 필요한가

객체의 충돌 없는 키 로 사용. private property 흉내, well-known symbol 로 객체 동작 커스터마이즈.

const KEY = Symbol('myLib_internal');
obj[KEY] = 'data';        // 다른 라이브러리와 충돌 없음

생성

const s = Symbol();
const s = Symbol('foo');            // description (디버깅용)
const s = Symbol.for('shared');     // global symbol registry

Symbol.for

const a = Symbol.for('shared');
const b = Symbol.for('shared');
a === b                              // true (같은 키)
Symbol.keyFor(a)                     // 'shared'

Symbol() 은 매번 새 심볼, Symbol.for() 는 같은 키면 같은 심볼.

객체 키로 사용

const id = Symbol('id');
const user = {
    name: 'Alice',
    [id]: 12345,                     // computed key
};

user[id]                              // 12345
user.id                               // undefined (다른 키)
Object.keys(user)                     // ['name']  (Symbol 제외)
Object.getOwnPropertySymbols(user)    // [Symbol(id)]

심볼 키는 for...in, Object.keys, JSON.stringify 에서 제외. 의도된 hidden property.

Well-known Symbol

엔진이 정의한 특수 심볼. 객체의 내장 동작을 커스터마이즈.

Symbol.iterator         // for...of 의 동작
Symbol.asyncIterator    // for await...of
Symbol.toPrimitive      // 타입 변환
Symbol.toStringTag      // Object.prototype.toString
Symbol.hasInstance      // instanceof
Symbol.isConcatSpreadable
Symbol.match, Symbol.replace, Symbol.search, Symbol.split    // regex
Symbol.species          // 파생 객체 생성자

Symbol.iterator

const obj = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};

for (const x of obj) console.log(x);   // 1, 2, 3
[...obj]                                // [1, 2, 3]

Symbol.toPrimitive

const obj = {
    [Symbol.toPrimitive](hint) {
        if (hint === 'number') return 42;
        if (hint === 'string') return 'forty-two';
        return 'default';
    }
};

+obj                  // 42
`${obj}`               // 'forty-two'
obj + ''               // 'default'

Symbol.toStringTag

class Foo {
    get [Symbol.toStringTag]() { return 'Foo'; }
}
Object.prototype.toString.call(new Foo())   // '[object Foo]'

자주 쓰는 패턴

private property 흉내

const _data = Symbol('data');
class Box {
    constructor(x) {
        this[_data] = x;
    }
    get value() { return this[_data]; }
}

진짜 private 은 #private 필드 (ES2022). 심볼은 reflection 으로 접근 가능.

충돌 없는 메서드 추가

const myMethod = Symbol('myMethod');
Array.prototype[myMethod] = function() { return 'custom'; };
[].myMethod              // undefined
[][myMethod]              // 'custom'

고유 식별자

const STATUS_ACTIVE = Symbol('active');
const STATUS_INACTIVE = Symbol('inactive');

switch (status) {
    case STATUS_ACTIVE: ...
    case STATUS_INACTIVE: ...
}

문자열 enum 보다 충돌 안전.

함정

1. 자동 변환 없음

const s = Symbol('foo');
String(s)         // 'Symbol(foo)' (명시적)
s + ''            // ❌ TypeError
`${s}`             // ❌ TypeError

심볼은 자동 변환되지 않는다 (실수 방지).

2. JSON 미지원

JSON.stringify({ [Symbol()]: 1 })   // '{}' (심볼 키 제외)
JSON.stringify({ a: Symbol() })     // '{}' (심볼 값 제외)

3. instanceof Symbol

Symbol() instanceof Symbol   // false (primitive)
typeof Symbol() === 'symbol' // true

참고

[[JS Iterator Protocol]]
[[JS Object]]
[[JS 타입 변환]]

[Javascript] TDZ (Temporal Dead Zone)

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

TDZ (Temporal Dead Zone) 는 let/const/class 선언이 호이스팅된 시점부터 선언문 (실행) 직전까지 의 접근 불가 구간.

{
    // ↓ TDZ 시작
    console.log(x);     // ❌ ReferenceError
    let x = 1;          // ← TDZ 끝
    console.log(x);     // ✓ 1
}

var 와의 비교

console.log(a);      // undefined (var 는 TDZ 없음)
var a = 1;

console.log(b);      // ReferenceError
let b = 1;

var 는 호이스팅 시 자동으로 undefined 초기화, let/const 는 미초기화 상태 (TDZ).

TDZ 의 의미

이름이 헷갈리는 부분: “호이스팅된 시점부터 선언문까지” 라는 시간적 (temporal) 사각지대. 코드 위치가 아닌 실행 시점 기준.

function foo() {
    return x;
}

// foo() 를 여기서 호출하면 ReferenceError
foo();      // ❌

let x = 1;

// 여기서는 OK
foo();      // ✓ 1

호이스팅된 변수가 같은 스코프 안에서 발견되지만, 선언문 실행 전까지는 사용 불가.

class 도 TDZ

new Foo();          // ❌ ReferenceError
class Foo {}

class 도 let/const 와 같은 TDZ.

함수 매개변수 default 의 TDZ

function foo(a = b, b = 1) {     // ❌ b 가 a 의 default 에서 TDZ
    return a;
}
foo();

매개변수도 왼쪽부터 평가, 뒤에 있는 매개변수는 앞 매개변수의 default 안에서 TDZ.

함정

1. typeof 가 안전한 함정

console.log(typeof undeclared);    // 'undefined' (안전)
console.log(typeof x);              // ❌ ReferenceError
let x = 1;

typeof 가 일반적으로 안전한 검사지만, TDZ 안의 let/const 에는 적용 안 됨.

2. 같은 스코프의 같은 이름

let x = 1;
{
    console.log(x);    // ❌ ReferenceError (x 가 호이스팅되어 안쪽 스코프 가림)
    let x = 2;
}

안쪽 블록의 let x 가 호이스팅되어 바깥의 x 를 가린다. 그 결과 TDZ.

3. for-of, for-in 의 let

for (let item of arr) { ... }
// 매 반복마다 새 binding (안전)

var item 은 같은 변수, let item 은 매 반복 새 변수 → 클로저 안전.

모범 사례

선언을 사용 직전에, TDZ 진입 회피
scope 최상단에 모든 선언 같은 옛 스타일 피하기
const 우선, 재할당 의도 명확

참고

[[JS var / let / const]]
[[JS 호이스팅]]
[[JS 스코프 체인]]

[Javascript] this 바인딩

koa (김신건) — Thu, 18 Jun 2026 00:00:00 GMT

정의

JavaScript 의 this 는 호출 방식에 따라 결정 되는 동적 바인딩. 4 가지 호출 방식 + arrow function (lexical) 규칙.

5 가지 규칙

#	규칙	예	this 값
1	일반 호출	`fn()`	`undefined` (strict) / `globalThis`
2	메서드 호출	`obj.fn()`	`obj`
3	명시적	`fn.call(x)`, `fn.apply(x)`	`x`
4	생성자	`new Fn()`	새 인스턴스
5	화살표	`() => {}`	lexical (정의 위치)

메서드 vs 일반 호출

const obj = {
    name: 'Alice',
    greet() { return this.name; }
};

obj.greet();             // 'Alice' (메서드 호출)
const fn = obj.greet;
fn();                     // undefined (일반 호출, strict)

함수를 변수에 담는 순간 컨텍스트 손실.

call / apply / bind

fn.call(thisArg, arg1, arg2);
fn.apply(thisArg, [arg1, arg2]);
const bound = fn.bind(thisArg, arg1);

call: 즉시 호출, 인자 쉼표
apply: 즉시 호출, 인자 배열
bind: 새 함수 반환 (this 영구 바인딩)

function greet(prefix, suffix) {
    return `${prefix} ${this.name} ${suffix}`;
}
greet.call({name: 'A'}, 'Hi', '!');     // 'Hi A !'
greet.apply({name: 'A'}, ['Hi', '!']);  // 'Hi A !'
const bound = greet.bind({name: 'A'}, 'Hi');
bound('!');                              // 'Hi A !'

화살표 함수의 lexical this

class Counter {
    constructor() {
        this.count = 0;
        setInterval(() => {
            this.count++;        // ✓ Counter 인스턴스의 this
        }, 1000);
    }
}

화살표 함수는 자체 this 가 없다. 정의 위치의 this 를 사용. [[arrow function]] 참고.

일반 함수였다면

setInterval(function() {
    this.count++;        // ❌ this 는 globalThis 또는 undefined
}, 1000);

// 옛 해결책
const self = this;
setInterval(function() {
    self.count++;
}, 1000);

new 호출

function Person(name) {
    this.name = name;     // 새 객체에 할당
}
const p = new Person('Alice');
p.name;                    // 'Alice'

new 호출 시:

새 빈 객체 생성
[[Prototype]] = Person.prototype
this = 새 객체
함수 실행
명시적 return 객체 없으면 새 객체 반환

이벤트 핸들러

button.addEventListener('click', function() {
    console.log(this);    // button (DOM element)
});

button.addEventListener('click', () => {
    console.log(this);    // 외부 스코프의 this (window 등)
});

DOM 이벤트는 일반 함수면 this = 이벤트 타겟. 화살표 함수면 외부 this.

class 메서드의 this

class Btn {
    constructor() { this.clicks = 0; }
    onClick() { this.clicks++; }      // this 손실 위험
}

const b = new Btn();
button.addEventListener('click', b.onClick);   // ❌ this 가 button
button.addEventListener('click', b.onClick.bind(b));   // ✓
button.addEventListener('click', () => b.onClick());   // ✓

class Btn2 {
    clicks = 0;
    onClick = () => this.clicks++;    // ✓ class field arrow, auto bound
}

우선순위

1. new 바인딩 (가장 강함)
2. 명시적 (call/apply/bind)
3. 메서드 호출
4. 일반 호출 (가장 약함)

const a = { name: 'a' };
const b = { name: 'b' };

function greet() { return this.name; }
const bound = greet.bind(a);
bound.call(b);    // 'a' (bind 가 call 보다 우선)

함정

1. arrow 함수에 call 무의미

const fn = () => this;
fn.call({ x: 1 });        // 외부 this 그대로 반환

2. 메서드 분리

const obj = { greet() { return this; } };
const m = obj.greet;
m();    // undefined (강제 변환 없는 strict 모드)

3. nested 함수

const obj = {
    name: 'A',
    outer() {
        function inner() {
            return this.name;     // undefined!
        }
        return inner();
    }
};

해결: 화살표 함수 또는 변수 보존.

참고

[[arrow function]]
[[function]]
[[JS Class]]
[[Lexical Environment]]

김신건의 로그 - 위키 / javascript

[JavaScript] AbortController: 비동기 취소

정의

기본 사용

이벤트 리스너 취소

AbortSignal.timeout

AbortSignal.any (2024+)

참고

[JavaScript] fetch API: 현대 HTTP 클라이언트

정의

기본 사용

POST + JSON

함정 1: 4xx/5xx 는 reject 안 함

함정 2: 스트리밍

취소

타임아웃

참고

[JavaScript] requestAnimationFrame: 브라우저 애니메이션 루프

정의

왜 setTimeout 이 아닌가

기본 사용

취소

함정

참고

[JavaScript] String: 메서드, 정규식, 템플릿 리터럴

정의

자주 쓰는 메서드

정규식

템플릿 리터럴

참고

[Frontend] SPA Architecture: CSR, SSR, SSG, hydration

정의

시각화

4가지 렌더링 모드

CSR 흐름

SSR 흐름

Hydration

Islands Architecture (Astro / Fresh)

Client-Side Routing

SPA 의 SEO

State Management 패턴

SSR + CSR 데이터 fetching

성능 최적화

함정과 베스트 프랙티스

관련 위키

[Javascript] Array

정의

생성

핵심 메서드 (반복)

변경 (mutates)

검색

슬라이스 / 결합

정렬 함정

stable sort

새 (불변) vs 변경 메서드 (ES2023)

reduce 의 강력함

sparse 배열

Array-like → Array

함정

1. typeof 로 배열 검사 불가

2. length 변경

3. splice 의 인자

참고

[Javascript] BigInt

정의

왜 필요한가

사용

함정: number 와 혼합 금지

비교는 가능

BigInt → Number

JSON 호환성

자주 쓰는 사례

1. 큰 ID 처리

2. 정밀 계산

3. 비트 연산 (큰 정수)

Math 함수와 호환 안 됨

Number vs BigInt 선택

함정

1. 리터럴 표기

2. Math.pow