JavaScript 치트 시트

모든 도구

무료

검색 및 인쇄 가능한 최신 JavaScript 레퍼런스 — 구문, 배열, 문자열, 객체, async/await, DOM, ES2022+ 기능. 무료.

Variables & types

let x = 1;

Block-scoped, reassignable variable

const PI = 3.14;

Block-scoped constant binding

typeof value

Returns the type as a string

Number('42')

Convert a string to a number

String(42)

Convert a value to a string

parseInt('42px', 10)

Parse a leading integer (base 10)

Boolean(0)

Coerce a value to true/false

value ?? 'default'

Nullish coalescing (null/undefined only)

a?.b?.c

Optional chaining, short-circuits on null

Array.isArray(x)

Check whether a value is an array

Functions

function add(a, b) { return a + b; }

Named function declaration

const add = (a, b) => a + b;

Arrow function with implicit return

const f = (a = 1) => a;

Default parameter value

function f(...args) {}

Rest parameters collect into an array

f(...arr)

Spread an array into arguments

const { a, b } = obj;

Object destructuring

const [x, y] = arr;

Array destructuring

(function(){})()

Immediately-invoked function (IIFE)

fn.bind(this)

Bind a fixed this context

Strings

`Hello ${name}`

Template literal interpolation

str.length

Number of characters

str.includes('a')

Check if a substring exists

str.slice(0, 3)

Extract part of a string

str.replace(/a/g, 'b')

Replace matches (regex)

str.split(',')

Split into an array

str.trim()

Remove surrounding whitespace

str.toUpperCase()

Convert to upper case

str.padStart(3, '0')

Pad the start to a length

str.at(-1)

Character at index (supports negatives)

Arrays

arr.map(x => x * 2)

Transform each element

arr.filter(x => x > 0)

Keep matching elements

arr.reduce((a, b) => a + b, 0)

Reduce to a single value

arr.find(x => x.id === 1)

First matching element

arr.some(x => x > 0)

True if any element matches

arr.every(x => x > 0)

True if all elements match

arr.includes(3)

Check for a value

arr.sort((a, b) => a - b)

Numeric ascending sort

[...new Set(arr)]

Remove duplicate values

arr.flat(Infinity)

Fully flatten nested arrays

arr.at(-1)

Last element (negative index)

Objects

Object.keys(obj)

Array of own enumerable keys

Object.values(obj)

Array of own values

Object.entries(obj)

Array of [key, value] pairs

{ ...a, ...b }

Merge objects (spread)

Object.assign({}, a, b)

Copy/merge into a target

Object.freeze(obj)

Make an object immutable

{ [key]: value }

Computed property name

obj.hasOwnProperty('x')

Check for an own property

structuredClone(obj)

Deep clone an object

Async & promises

async function f() {}

Declare an async function

await fetch(url)

Pause until a promise resolves

Promise.all([p1, p2])

Wait for all to resolve

Promise.allSettled([p1, p2])

Wait for all to settle

Promise.race([p1, p2])

Resolve with the first to settle

new Promise((res, rej) => {})

Create a promise manually

try { await f(); } catch (e) {}

Handle async errors

setTimeout(fn, 1000)

Run after a delay (ms)

queueMicrotask(fn)

Schedule a microtask

Control flow

if (a) {} else if (b) {} else {}

Conditional branches

a ? b : c

Ternary expression

switch (x) { case 1: break; }

Multi-way branch

for (const x of arr) {}

Iterate values (iterables)

for (const k in obj) {}

Iterate object keys

while (cond) {}

Loop while a condition holds

arr.forEach((x, i) => {})

Run a callback per element

break / continue

Exit or skip a loop iteration

label: for (...) { break label; }

Break out of nested loops

DOM & events

document.querySelector('.x')

First matching element

document.querySelectorAll('.x')

All matching elements (NodeList)

el.addEventListener('click', fn)

Attach an event listener

el.classList.toggle('active')

Toggle a CSS class

el.dataset.id

Read a data-id attribute

el.textContent = 'hi'

Set text safely (no HTML)

el.setAttribute('aria-hidden', true)

Set an attribute

e.preventDefault()

Cancel the default action

el.closest('.parent')

Nearest matching ancestor

document.createElement('div')

Create a new element

Classes & modules

class A extends B {}

Class with inheritance

constructor() { super(); }

Initialize and call the parent

#private = 1;

Private class field

static create() {}

Static method on the class

get value() {}

Getter accessor

export default fn;

Default module export

export { a, b };

Named module exports

import x, { y } from './m.js'

Default + named imports

const m = await import('./m.js')

Dynamic import

“:q”와 일치하는 항목이 없습니다.

JavaScript 치트 시트 소개

이 JavaScript 치트 시트는 변수와 타입, 함수, 문자열, 배열, 객체, 비동기와 프라미스, 제어 흐름, DOM과 이벤트, 클래스와 모듈까지 최신 언어를 검색 가능한 한 페이지로 정리한 참조 자료입니다. 각 항목은 실제 코드 스니펫과 한 줄 설명으로 짝지어져 있습니다.

let과 const, 화살표 함수, 구조 분해, 스프레드, 옵셔널 체이닝, 템플릿 리터럴, async/await, ES 모듈 등 오늘날 실제로 사용되는 JavaScript를 기준으로 작성되어, 다른 언어에서 돌아왔을 때 빠르게 감을 되찾는 용도로도 유용합니다.

시트 전체가 클라이언트 사이드로 로드되며 무료입니다. 검색창으로 실시간 필터링하고, 고정된 목차로 섹션 간을 이동하며, 스니펫을 클릭해 복사하고, 책상 옆에 두고 볼 JavaScript 참조용으로 페이지를 인쇄할 수 있습니다.

JavaScript 치트 시트 사용 방법

시트를 열어 변수 & 타입부터 DOM & 이벤트, 클래스 & 모듈까지 섹션 목록을 훑어보세요.
검색창에 입력해 모든 항목을 실시간으로 필터링하세요. 일치 개수 표시가 몇 개의 스니펫이 조건에 맞는지 보여줍니다.
고정된 목차를 사용해 비동기 & 프라미스 같은 섹션으로 바로 이동하세요.
스니펫이나 복사 아이콘을 클릭해 코드를 클립보드에 복사하세요.
인쇄를 클릭해 전체 참조 자료를 깔끔한 종이 형태로 출력하세요.

자주 묻는 질문

아홉 개 섹션입니다: 변수와 타입, 함수, 문자열, 배열, 객체, 비동기와 프라미스, 제어 흐름, DOM과 이벤트, 클래스와 모듈 — 각각 복사해서 바로 쓸 수 있는 스니펫과 짧은 설명으로 구성됩니다.

네. let/const, 화살표 함수, 구조 분해, 옵셔널 체이닝, async/await, 클래스, ES 모듈 등 현재 문법을 사용해 오래된 패턴이 아니라 ES2022+ JavaScript를 반영합니다.

네. 아무 코드 스니펫이나, 행에 마우스를 올렸을 때 나타나는 복사 아이콘을 클릭하면 즉시 클립보드에 복사되고 짧게 "복사됨!" 확인 메시지가 뜹니다.

네. 인쇄 버튼을 누르면 검색창, 내비게이션, 버튼이 제거된 깔끔한 레이아웃이 만들어져, 인쇄된 페이지에는 스니펫과 설명만 남습니다.

네. 무료이며 브라우저 안에서 완전히 로드되고 계정이 필요 없습니다.

JavaScript 치트 시트

Variables & types

Functions

Strings

Arrays

Objects

Async & promises

Control flow

DOM & events

Classes & modules

JavaScript 치트 시트 소개

JavaScript 치트 시트 사용 방법

자주 묻는 질문

이 JavaScript 치트 시트는 무엇을 다루나요?

최신 JavaScript 기준으로 최신 상태인가요?

스니펫을 한 번의 클릭으로 복사할 수 있나요?

치트 시트를 인쇄할 수 있나요?

이 치트 시트는 무료인가요?

관련 도구

인기 검색어

이 도구 임베드하기