JavaScript 치트 시트
검색 및 인쇄 가능한 최신 JavaScript 레퍼런스 — 구문, 배열, 문자열, 객체, async/await, DOM, ES2022+ 기능. 무료.
변수와 타입
10let x = 1;
블록 스코프, 재할당 가능한 변수
const PI = 3.14;
블록 스코프 상수 바인딩
typeof value
타입을 문자열로 반환
Number('42')
문자열을 숫자로 변환
String(42)
값을 문자열로 변환
parseInt('42px', 10)
앞부분 정수 파싱 (10진수)
Boolean(0)
값을 true/false로 강제 변환
value ?? 'default'
널 병합 (null/undefined만)
a?.b?.c
옵셔널 체이닝, null에서 단락
Array.isArray(x)
값이 배열인지 확인
함수
9function add(a, b) { return a + b; }
이름 있는 함수 선언
const add = (a, b) => a + b;
암시적 반환 화살표 함수
const f = (a = 1) => a;
기본 매개변수 값
function f(...args) {}
나머지 매개변수를 배열로 수집
f(...arr)
배열을 인자로 펼치기
const { a, b } = obj;
객체 구조 분해
const [x, y] = arr;
배열 구조 분해
(function(){})()
즉시 실행 함수 (IIFE)
fn.bind(this)
고정된 this 컨텍스트 바인딩
문자열
10`Hello ${name}`
템플릿 리터럴 보간
str.length
문자 개수
str.includes('a')
부분 문자열 존재 확인
str.slice(0, 3)
문자열 일부 추출
str.replace(/a/g, 'b')
일치 항목 치환 (regex)
str.split(',')
배열로 분할
str.trim()
양쪽 공백 제거
str.toUpperCase()
대문자로 변환
str.padStart(3, '0')
지정 길이까지 앞쪽 채우기
str.at(-1)
인덱스 위치 문자 (음수 지원)
배열
11arr.map(x => x * 2)
각 요소 변환
arr.filter(x => x > 0)
일치하는 요소 유지
arr.reduce((a, b) => a + b, 0)
단일 값으로 축약
arr.find(x => x.id === 1)
첫 일치 요소
arr.some(x => x > 0)
하나라도 일치하면 true
arr.every(x => x > 0)
모두 일치하면 true
arr.includes(3)
값 존재 확인
arr.sort((a, b) => a - b)
숫자 오름차순 정렬
[...new Set(arr)]
중복 값 제거
arr.flat(Infinity)
중첩 배열 완전 평탄화
arr.at(-1)
마지막 요소 (음수 인덱스)
객체
9Object.keys(obj)
자체 열거 가능 키 배열
Object.values(obj)
자체 값 배열
Object.entries(obj)
[key, value] 쌍 배열
{ ...a, ...b }
객체 병합 (spread)
Object.assign({}, a, b)
대상으로 복사/병합
Object.freeze(obj)
객체를 불변으로 만들기
{ [key]: value }
계산된 속성 이름
obj.hasOwnProperty('x')
자체 속성 확인
structuredClone(obj)
객체 깊은 복제
비동기와 프로미스
9async function f() {}
async 함수 선언
await fetch(url)
프로미스가 resolve될 때까지 대기
Promise.all([p1, p2])
모두 resolve될 때까지 대기
Promise.allSettled([p1, p2])
모두 settle될 때까지 대기
Promise.race([p1, p2])
가장 먼저 settle된 것으로 resolve
new Promise((res, rej) => {})
프로미스 수동 생성
try { await f(); } catch (e) {}
비동기 오류 처리
setTimeout(fn, 1000)
지연 후 실행 (ms)
queueMicrotask(fn)
마이크로태스크 예약
제어 흐름
9if (a) {} else if (b) {} else {}
조건 분기
a ? b : c
삼항 표현식
switch (x) { case 1: break; }
다중 분기
for (const x of arr) {}
값 순회 (이터러블)
for (const k in obj) {}
객체 키 순회
while (cond) {}
조건이 참인 동안 반복
arr.forEach((x, i) => {})
요소마다 콜백 실행
break / continue
반복 종료 또는 건너뛰기
label: for (...) { break label; }
중첩 루프 탈출
DOM과 이벤트
10document.querySelector('.x')
첫 일치 요소
document.querySelectorAll('.x')
일치하는 모든 요소 (NodeList)
el.addEventListener('click', fn)
이벤트 리스너 연결
el.classList.toggle('active')
CSS 클래스 토글
el.dataset.id
data-id 속성 읽기
el.textContent = 'hi'
안전하게 텍스트 설정 (HTML 없이)
el.setAttribute('aria-hidden', true)
속성 설정
e.preventDefault()
기본 동작 취소
el.closest('.parent')
가장 가까운 일치 조상
document.createElement('div')
새 요소 생성
클래스와 모듈
9class A extends B {}
상속이 있는 클래스
constructor() { super(); }
부모 초기화 및 호출
#private = 1;
private 클래스 필드
static create() {}
클래스의 정적 메서드
get value() {}
getter 접근자
export default fn;
기본 모듈 export
export { a, b };
이름 있는 모듈 export
import x, { y } from './m.js'
기본 + 이름 import
const m = await import('./m.js')
동적 import
“:q”와 일치하는 항목이 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.