명세 · 레퍼런스 · 호환성 표 읽는 법

01. 질문마다 펼쳐 볼 자료가 달라요

자바스크립트를 배우다 보면 궁금한 게 끝없이 생겨요. 그런데 궁금증의 종류에 따라 가장 빨리 답을 주는 자료가 달라요. 아래 표를 기억해 두면 검색 시간이 확 줄어요.

02. 명세: 언어의 규칙을 적은 문서

자바스크립트의 공식 규칙은 ECMA-262라는 문서에 적혀 있어요. Ecma International의 TC39라는 위원회가 이 문서를 관리하는데, 브라우저 회사 · 기업 · 전문가들이 모여 두 달에 한 번꼴로 회의를 열어요. 모든 엔진은 이 문서를 보고 만들어지기 때문에, 같은 코드가 Chrome에서도 Firefox에서도 같은 결과를 내요.

• 매년 6월에 새 판이 나와요. 2026년 6월에 나온 제17판이 ECMAScript 2026(줄여서 ES2026)이에요. 정식판은 262.ecma-international.org에 있어요.
• 다음 판에 들어갈 내용이 매일 반영되는 작업본(draft)은 tc39.es/ecma262에 있어요.
• 날짜 · 숫자 · 통화를 나라별 형식으로 바꿔 주는 Intl 기능은 ECMA-402라는 별도 문서에 있어요.

명세는 엔진을 만드는 사람을 위한 문서라서, "이 단계에서 이 값을 꺼내고, 이 조건이면…"처럼 아주 촘촘하게 쓰여 있어요. 처음부터 읽을 필요는 없어요. 레퍼런스를 봐도 설명이 모호할 때, 마지막으로 확인하는 곳이라고 생각하면 돼요.

명세에 없는 것: 호스트가 주는 기능

의외로 console.log, setTimeout, document는 ECMA-262에 없어요. 이것들은 자바스크립트를 실행하는 환경(호스트)이 붙여 준 기능이에요. 브라우저 기능은 HTML · DOM · Console 같은 웹 표준(WHATWG)에 따로 정의되어 있고, Node.js는 자기만의 기능을 붙여요. 언어와 환경을 나눠서 보면, 어떤 기능을 어디서 찾아봐야 할지가 분명해져요.

console.log(typeof Math.max);   // 언어(ECMA-262)에 있는 기능
console.log(typeof setTimeout); // 호스트(브라우저 · Node.js)가 준 기능
console.log(typeof document);   // 이 실행 블록에는 화면(페이지)이 없어요

세 번째 줄이 undefined인 건, 이 글의 실행 블록이 페이지와 분리된 공간(Web Worker)에서 돌기 때문이에요. 같은 브라우저라도 어떤 환경에서 실행하느냐에 따라 쓸 수 있는 호스트 기능이 달라요. 브라우저 콘솔에서 실행하면 object가 나와요.

새 기능이 명세에 들어가는 길

새 기능은 누군가의 제안(proposal)에서 시작해요. 제안은 TC39 회의에서 단계별로 심사를 받고, 마지막 4단계를 통과하면 그해의 ECMAScript 판에 실려요. 지금 어떤 제안이 몇 단계인지는 GitHub의 tc39/proposals 저장소에서 볼 수 있어요.

ES2026에는 Math.sumPrecise, Iterator.concat, Array.fromAsync, Error.isError, Map · WeakMap의 기본값 꺼내기, Uint8Array의 base64 · hex 변환, JSON.parse의 원문 읽기와 JSON.rawJSON이 들어갔어요. 그중 하나를 직접 실행해 볼게요. 소수를 더할 때 생기는 아주 작은 오차를 줄여 주는 기능이에요.

const prices = [0.1, 0.2, 0.3];

console.log(prices.reduce((sum, p) => sum + p, 0)); // 0.6000000000000001
console.log(Math.sumPrecise(prices));               // 0.6

두 번째 줄에서 TypeError가 나온다면, 지금 쓰는 브라우저가 아직 이 기능을 지원하지 않는 거예요. 그래서 다음 질문이 중요해져요. "명세에 들어갔다"와 "사용자 브라우저에서 돌아간다"는 다른 이야기예요. 이건 호환성에서 다뤄요.

03. MDN: 매일 펼치는 레퍼런스

실제로 코드를 쓸 때 가장 자주 여는 곳은 MDN Web Docs(developer.mozilla.org)예요. Mozilla와 여러 회사 · 개인이 함께 만드는 웹 기술 레퍼런스로, 자바스크립트 문법과 내장 객체, 브라우저 기능을 모두 다뤄요. 한국어 번역도 있지만 영어 문서보다 늦게 고쳐질 때가 있어서, 내용이 이상하면 영어 페이지와 비교해 보는 게 좋아요.

MDN의 메서드 페이지는 보통 이런 순서로 되어 있어요. 이 순서만 알면 어떤 페이지든 빠르게 훑을 수 있어요.

검색 엔진에서 찾을 때는 앞에 mdn을 붙이면 MDN 페이지가 먼저 나와요. 예를 들어 mdn array at처럼요.

04. 호환성: 내 사용자 브라우저에서 될까

새 기능이 명세에 들어가도 브라우저마다 지원하는 시기가 달라요. 내 페이지를 여는 사람들이 오래된 브라우저를 쓰고 있을 수도 있고요. 그래서 새 기능을 쓰기 전에는 어느 브라우저에서 언제부터 되는지를 확인해요.

Baseline: 한눈에 보는 지원 상태

Baseline은 웹 기능이 주요 브라우저에서 얼마나 안전하게 쓰일 수 있는지를 두 단계로 알려 주는 표시예요. 기준이 되는 브라우저는 Chrome · Firefox · Safari(각각 모바일 포함)와 Edge예요. MDN 페이지 맨 위에도 이 표시가 붙어 있어요.

• Newly available: 기준 브라우저 모두가 지원하게 된 순간이에요. 최신 브라우저를 쓰는 사람에게는 돌아가요.
• Widely available: 그로부터 30개월이 지난 상태예요. 업데이트가 느린 사용자까지 대부분 지원해서, 일반적으로 안심하고 써도 돼요.

브라우저 버전별로 더 자세히 보고 싶으면 caniuse.com을 써요. 기능 이름으로 검색하면 브라우저와 버전마다 지원 여부가 색칠된 표로 나와요.

코드로 직접 확인하기

코드 안에서 "이 기능이 있는지"를 물어볼 수도 있어요. 이것을 기능 감지라고 해요. 없는 기능은 undefined로 나오니까, 있을 때만 쓰고 없으면 다른 방법을 쓰면 돼요.

const wanted = ['at', 'toSorted', 'shuffle'];

for (const name of wanted) {
  console.log(name, name in Array.prototype ? '있어요' : '없어요');
}

이 글을 쓰며 Chromium 153에서 실행했을 때는 at · toSorted가 있고 shuffle은 없었어요. shuffle은 원래 자바스크립트에 없는 이름이라 어느 브라우저에서나 "없어요"가 나와요. 반면 앞의 두 개는 아주 오래된 브라우저에서는 "없어요"가 나올 수 있어요. 실행 결과가 브라우저마다 다를 수 있다는 것, 그게 이 절의 핵심이에요.

const real = new TypeError('형식이 맞지 않아요');
const fake = { name: 'TypeError', message: '형식이 맞지 않아요' };

// 여기에 코드를 써 보세요

if (typeof Error.isError === 'function') {
  console.log(Error.isError(real)); // true
  console.log(Error.isError(fake)); // false
} else {
  console.log('지원하지 않아요');
}