JavaScript 치트시트
마지막 업데이트
변수 (let, const, var)
값을 선언합니다. const를 먼저, 그다음 let을 쓰고 var는 피하세요.
| 작업 | 문법 |
|---|---|
| 블록 스코프, 재할당 가능 | let count = 0; |
| 블록 스코프, 재할당 불가 | const name = "Ada"; |
| 함수 스코프 (예전 방식) | var x = 1; |
| 값 없이 선언 | let result; |
| 여러 개 선언 | let a = 1, b = 2; |
| 상수 객체 (내용은 변경 가능) | const user = {}; user.id = 1; |
자료형
원시 타입과 참조 타입, 그리고 타입을 확인하는 방법.
| 타입 | 예시 |
|---|---|
| 숫자 | let n = 42; |
| 문자열 | let s = "hi"; |
| 불리언 | let ok = true; |
| 배열 | let arr = [1, 2, 3]; |
| 객체 | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| 타입 확인 | typeof n |
| 변환 | Number("7"), String(42), Boolean(0) |
문자열 및 템플릿 리터럴
텍스트를 만들고 다룹니다.
| 작업 | 문법 |
|---|---|
| 템플릿 리터럴 | Hi ${name}, age ${age} (백틱으로 감싸기) |
| 길이 | text.length |
| 대문자 / 소문자 | text.toUpperCase(), text.toLowerCase() |
| 공백 제거 | text.trim() |
| 전부 치환 | text.replaceAll("a", "b") |
| 배열로 분할 | text.split(",") |
| 포함 여부 | text.includes("js") |
| 슬라이스 | text.slice(0, 3) |
배열 및 배열 메서드
순서가 있는 컬렉션과 이를 순회하는 메서드.
| 작업 | 문법 |
|---|---|
| 끝에서 추가 / 제거 | arr.push(4), arr.pop() |
| 앞에서 추가 / 제거 | arr.unshift(0), arr.shift() |
| 각 항목 변환 | arr.map(x => x * 2) |
| 일치하는 항목 유지 | arr.filter(x => x > 0) |
| 단일 값으로 축약 | arr.reduce((sum, x) => sum + x, 0) |
| 항목 찾기 | arr.find(x => x.id === 1) |
| 일부 / 모두 검사 | arr.some(f), arr.every(f) |
| 값의 인덱스 | arr.indexOf(3), arr.includes(3) |
| 문자열로 결합 | arr.join(", ") |
객체
키-값 컬렉션.
| 작업 | 문법 |
|---|---|
| 생성 | const user = { id: 1, name: "Ada" }; |
| 속성 접근 | user.name, user["name"] |
| 속성 추가 / 갱신 | user.age = 25; |
| 속성 삭제 | delete user.age; |
| 모든 키 / 값 가져오기 | Object.keys(user), Object.values(user) |
| 엔트리 가져오기 | Object.entries(user) |
| 객체 병합 | Object.assign({}, a, b) |
| 얕은 복사 | const copy = { ...user }; |
제어 흐름
조건문과 반복문.
| 작업 | 문법 |
|---|---|
| if / else if / else | if (x > 0) { … } else { … } |
| 삼항 연산자 | const y = x > 0 ? 1 : 0; |
| switch | switch (x) { case 1: … break; } |
| for 반복문 | for (let i = 0; i < 5; i++) { … } |
| for-of (값) | for (const item of arr) { … } |
| for-in (키) | for (const key in obj) { … } |
| while 반복문 | while (x < 10) { … } |
함수 및 화살표 함수
재사용 가능하고 호출 가능한 블록을 정의합니다.
| 작업 | 문법 |
|---|---|
| 함수 선언 | function add(a, b) { return a + b; } |
| 화살표 함수 | const add = (a, b) => a + b; |
| 인자 하나인 화살표 | const sq = x => x * x; |
| 인자 없는 화살표 | const now = () => Date.now(); |
| 기본 매개변수 | function f(x = 0) { … } |
| 나머지 매개변수 | function f(...args) { … } |
| 즉시 실행 함수 (IIFE) | (() => { … })(); |
구조 분해 및 스프레드
값을 풀어내고 구조를 복사/병합합니다.
| 작업 | 문법 |
|---|---|
| 배열 구조 분해 | const [a, b] = arr; |
| 객체 구조 분해 | const { id, name } = user; |
| 풀어내며 이름 변경 | const { id: userId } = user; |
| 기본값 | const { age = 0 } = user; |
| 배열 스프레드 | const all = [...a, ...b]; |
| 객체 스프레드 | const next = { ...user, age: 25 }; |
| 구조 분해에서 나머지 | const [first, ...rest] = arr; |
프로미스 및 async/await
네트워크 요청 같은 비동기 작업을 처리합니다.
| 작업 | 문법 |
|---|---|
| async 함수 | async function load() { … } |
| 프로미스 await | const data = await fetch(url); |
| then / catch | promise.then(res => …).catch(err => …) |
| await와 함께 try / catch | try { await f(); } catch (e) { … } |
| resolve / reject | Promise.resolve(1), Promise.reject(err) |
| 모두 기다리기 | await Promise.all([a, b]) |
| 가장 먼저 끝나는 것 | await Promise.race([a, b]) |
가장 자주 쓰는 최신 JavaScript 문법을 한 페이지에 담았습니다. 이 JavaScript 치트시트는 일상적인 ES6+ 작업을 위한 빠른 참조 자료입니다 - 변수 선언, 문자열과 배열 메서드, 객체, 화살표 함수, 구조 분해, async/await를 다룹니다.
여기 나오는 모든 내용은 최신 브라우저와 Node.js에서 동작하는 표준 JavaScript입니다. 필요한 것을 복사하거나, JS 플레이그라운드에서 어떤 코드든 바로 실행해 보세요 - 설치할 것이 없습니다.
JavaScript 치트시트 자주 묻는 질문
이 JavaScript 치트시트는 무료인가요?
네. 이 JavaScript 치트시트는 완전히 무료이며 회원 가입이 필요 없습니다. 즐겨찾기에 추가해 두고 문법, 배열 메서드, 비동기 패턴을 찾아봐야 할 때마다 다시 방문하세요.
JavaScript에서 ==와 ===의 차이는 무엇인가요?
==는 느슨한 동등 비교입니다: 비교 전에 피연산자를 같은 타입으로 변환하므로 0 == "0"은 true입니다. ===는 엄격한 동등 비교입니다: 변환 없이 값과 타입을 모두 비교하므로 0 === "0"은 false입니다. 거의 모든 경우에 ===(그리고 !==)를 사용하세요 - 예측 가능하고 의외의 강제 변환을 피할 수 있습니다.let, const, var의 차이는 무엇인가요?
const와 let은 블록 스코프이며 ES6에서 추가되었습니다. var는 함수 스코프이고 더 오래되었습니다. 재할당하지 않는 값에는 const를, 재할당하는 값에는 let을 사용하고, 호이스팅과 스코프 버그를 막기 위해 var는 피하세요. const 객체나 배열은 여전히 내용을 바꿀 수 있다는 점에 유의하세요 - 바인딩만 상수입니다.JavaScript를 온라인에서 연습할 수 있나요?
네. JS 플레이그라운드를 열어 이 치트시트의 어떤 코드든 브라우저에서 실행해 보세요 - 설치할 것이 없습니다. 체계적으로 배우고 싶다면, Coddy의 무료 인터랙티브 JavaScript 강좌가 변수와 반복문부터 배열 메서드와 async/await까지 단계별로 안내합니다.
이 치트시트는 초보자에게 적합한가요?
네. 기초(변수, 자료형, 문자열)부터 구조 분해와 async/await까지 순서대로 정리되어 있어, 첫날부터 상단 섹션을 사용하고 점차 최신 ES6+ 기능으로 넓혀갈 수 있습니다.
관련 자료
더 많은 치트 시트
