JavaScript (MDN)
이 스킬은 MDN JavaScript 가이드와 레퍼런스를 요약하여, 습관과 다른 점(함정, 놀라운 기본값, 비권장 API와 그 대체 패턴, MDN이 권장하는 패턴)을 집중적으로 다룹니다. 참조 파일의 각 주장은 출처 MDN 페이지로 연결됩니다. 모든 JavaScript 개발자가 알고 있는 기본 사항은 생략됩니다.
다루는 버전
MDN은 살아있는 ECMAScript 표준을 추적하며, 버전별 경로가 없습니다. 또한 TC39 stage 3의 기능을 최종 확정 전에 문서화하므로, 예제에는 아직 모든 곳에서 사용할 수 없는 기능이 포함될 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript
최근 기능은 제한적으로만 사용 가능할 수 있습니다. 특정 기능(Temporal, 이터레이터 헬퍼, using, Promise.try, RegExp.escape, Error.isError, Math.sumPrecise, Uint8Array.fromBase64, Set 메서드, Map.prototype.getOrInsert)에 의존하기 전에 대상 런타임을 확인하세요. MDN이 실험적이라고 표시한 항목은 참조 파일에 그렇게 표시됩니다.
탐색 방법
- 아래의 최우선 규칙을 읽으세요. 가장 빈번한 실수를 잡아줍니다.
- 작업에 맞는 참조 파일을 끝의 표에서 열어보세요. 각 파일은 독립적으로 사용할 수 있습니다. 시간대, DST 또는 기간 관련 작업에는 두 Temporal 파일이 모두 필요합니다. 정리(cleanup) 또는
using관련 작업에는 이터레이터 및 리소스 관리 파일이 필요합니다. - 기존 코드를 수정할 때는 해당 파일 끝에 있는 "오래된 패턴" 표를 읽으세요.
최우선 규칙
- 기본값은
||대신??를 사용하고, 괄호 없이 혼합하지 마세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing ===를 사용하세요.Object.is()는-0과+0을 구분할 때만 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness- 자체 속성은
undefined와 비교하지 말고Object.hasOwn()으로 테스트하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn - 런타임에만 알 수 있는 키에는 일반 객체 대신
Map을 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps Object.prototype이나 내장 프로토타입을 절대 확장하지 마세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain- 깊은 복사는
structuredClone()을 사용하세요. 전개 연산자와Object.assign()은 얕은 복사입니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign - 화살표 함수에서 객체 반환 시
({ ... })를 반환하세요. 중괄호만 있으면 블록으로 간주됩니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body #private필드를 사용하고#x in obj로 브랜드 검사를 하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elementsfinally블록에서 반환하거나 throw하면 보류 중인 오류가 무시됩니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catchError객체를 throw하고new Error(msg, { cause })로 원인을 감싸세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/causethen콜백에서 모든 프라미스를 반환하고 체인을 하나의catch로 끝내세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises- 독립적인 비동기 작업은 순차적
await대신Promise.all()로 함께 시작하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function forEach는 조기 종료되지도 않고 async 콜백을 기다리지도 않습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach- 동기 또는 비동기 콜백은
Promise.try()로 끌어올리세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/try - 리소스 해제는
using/await using또는DisposableStack을 사용하세요. 정리 작업에FinalizationRegistry를 절대 의존하지 마세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Resource_management await using file = await fs.open(...)는 두 가지 await가 모두 필요합니다. 하나는 획득, 다른 하나는 해제를 위한 것입니다. 비동기 정리는[Symbol.asyncDispose]에 들어갑니다.[Symbol.dispose]가 반환한 프라미스는 기다려지지 않기 때문입니다. Disposer는 역순으로 실행되며, 본문과 disposer의 오류는 하나의SuppressedError로 전달됩니다(error= 나중,suppressed= 이전). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/await_using- 이터레이터를 배열로 펼치지 말고 이터레이터 헬퍼를 호출하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator
- 기본
sort()는 문자열을 비교합니다.(a, b) => a - b를 전달하고, 원본을 유지하려면toSorted()를 선호하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort - 그룹화는
reduce()대신Object.groupBy()/Map.groupBy()를 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce - 문자열은 UTF-16 코드 단위입니다. 그래핌(grapheme) 개수는
Intl.Segmenter로 세세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length - URL 부분을 인코딩할 때는
encodeURI()대신encodeURIComponent()를 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI - 패턴에서 사용자 텍스트를 이스케이프하려면
RegExp.escape()를 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/escape - 재사용되는
g또는y정규식은 호출 간에lastIndex를 유지합니다.matchAll()을 선호하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test - 버림은
Math.trunc(),parseInt()에는 진법(radix)을 전달,Number.isNaN()을 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt - 2^53 이상의 정수는 BigInt가 필요하며, JSON은 문자열,
JSON.rawJSON또는context.source를 사용하지 않으면 손상됩니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON - 보안 관련任何事情에는
Math.random()대신crypto.getRandomValues()를 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random - 레거시
Date보다Temporal을 선호하세요. Temporal 객체는<와-에서 오류를 발생시킵니다.compare()를 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date ZonedDateTime에서는 고정 오프셋이 아닌 IANA 시간대 이름을 사용하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime#time_zones_and_offsets- 시간대가 있는 값은 시간대를 유지하세요.
toPlainDateTime()은 시간대를 버리므로 이후 산술 연산이 DST를 무시합니다.ZonedDateTime.from()에는[zone]주석이 필요하며(빈 오프셋 문자열은Instant.from()으로 구문 분석),ZonedDateTime.since()는largestUnit을 전달하지 않으면 시간 단위로 기본 설정됩니다(DST 종료 시PT25H). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime - 하나의
Intl포맷터를 재사용하고 그 출력을 고정 문자열과 비교하지 마세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Internationalization#formatting_data - JSON 모듈은
with { type: "json" }로 로드하고, 지정자(specifier)는import.meta.resolve()로 확인하세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#loading_non-javascript_resources Symbol.species에 의존하지 마세요. 엔진에서 제거를 검토 중입니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/species
참조 파일
| 파일 | 읽을 대상 |
|---|---|
| references/language-core-and-equality.md | == 대 ===, 강제 변환, typeof, let/const/var와 데드 존, 엄격 모드, ASI, 8진수, 실행 모델, 구식 문법 |
| references/functions-and-classes.md | 화살표 함수와 this, 기본 및 나머지 매개변수, 접근자, bind, 클래스 필드, #private, 정적 블록, extends, super |
| references/objects-prototypes-and-proxy.md | Object.hasOwn, assign, defineProperty, freeze, groupBy, 프로토타입, null 프로토타입 객체, Proxy, Reflect, Symbol, globalThis, eval |
| references/statements-and-operators.md | ??, ?., 논리 할당, 전개, 구조 분해, delete, 산술 및 비트 연산 함정, BigInt 연산자, 비교, 루프, switch, 레이블, try/finally |
| references/async-and-promises.md | 프라미스 체인, 조합기, Promise.try, withResolvers, allKeyed, async/await 순서, 처리되지 않은 거부, 프라미스 메모리 누수 |
| references/iterators-and-resource-management.md | 이터레이션 프로토콜, 이터레이터 헬퍼, Iterator.zip/concat, 제너레이터, using, await using, DisposableStack, SuppressedError, WeakRef, FinalizationRegistry |
| references/arrays-and-collections.md | 배열 복사 메서드, at, includes, findLast, sort, reduce, 희소 배열, Array.from, Map, Set 메서드, getOrInsert, WeakMap, WeakSet |
| references/strings.md | UTF-16, 코드 포인트와 그래핌, localeCompare, normalize, replace 패턴, replaceAll, matchAll, split, String.raw, URI 인코딩 |
| references/regexp.md | RegExp.escape, 메서드 선택, lastIndex, y 및 d 플래그, u 및 v 모드, \p{...}, 수정자(modifier), 앵커, 그룹, 역참조, 뒤돌아보기(lookbehind) |
| references/numbers-math-json.md | 부동 소수점 정밀도, parseInt, 반올림, toFixed, BigInt, Math.random, Math.sumPrecise, JSON.stringify 규칙, revivers, JSON.rawJSON |
| references/binary-data-and-shared-memory.md | 형식화 배열, DataView 엔디언, 크기 조정 가능 및 전송된 ArrayBuffer, Uint8Array의 base64 및 16진수, SharedArrayBuffer, Atomics |
| references/date-and-temporal.md | Date에서 Temporal로 전환, Temporal 유형 선택, 공통 Temporal 규칙, 일반 날짜 및 시간, Date 코드 유지 |
| references/temporal-time-zones-and-durations.md | ZonedDateTime, IANA 시간대, DST 명확성 및 offset, since/until, Duration 균형 및 반올림, Temporal.Now |
| references/intl.md | 로케일 선택 및 폴백, DateTimeFormat, NumberFormat 숫자 옵션, Collator, Segmenter, PluralRules, RelativeTimeFormat, ListFormat, DurationFormat |
| references/errors-and-debugging.md | cause, Error 하위 클래스, Error.isError, AggregateError, 스택 추적, 일반적인 런타임 오류 메시지와 해결 방법 |
| references/modules.md | 모듈 대 스크립트, 라이브 바인딩, 순환, import(), import.meta, import 속성, import defer, import source, import 맵 |
크롤링된 페이지, 버전 정보 및 가져온 날짜는 SOURCES.md에 나열되어 있습니다.