let x = 1 | 블록 스코프 변수 |
const y = 2 | 상수 (재할당 불가) |
var z = 3 | 함수 스코프 (피하기) |
typeof x | 변수 타입 확인 |
undefined | 초기화되지 않은 변수 |
null | 의도적 빈 값 |
NaN | 숫자가 아님 |
Infinity / -Infinity | 무한 값 |
=== / !== | 엄격한 동등 (타입 + 값) |
== / != | 느슨한 동등 (피하기) |
&& | 논리 AND |
|| | 논리 OR |
?? | Nullish 병합 |
?. | 옵셔널 체이닝 |
...arr | 스프레드 연산자 |
...rest | 나머지 매개변수 |
** | 거듭제곱 |
`Hello ${name}` | 템플릿 리터럴 |
s.length | 문자열 길이 |
s.toUpperCase() / toLowerCase() | 대소문자 변환 |
s.trim() / trimStart() / trimEnd() | 공백 제거 |
s.split(sep) | 배열로 분할 |
s.slice(start, end) | 부분 문자열 추출 |
s.substring(start, end) | 부분 문자열 추출 |
s.replace(old, new) | 첫 번째 일치 교체 |
s.replaceAll(old, new) | 모든 일치 교체 |
s.includes(sub) | 포함 여부 확인 |
s.startsWith(pre) / endsWith(suf) | 시작/끝 확인 |
s.indexOf(sub) | 인덱스 찾기 (없으면 -1) |
s.padStart(len, char) / padEnd() | 문자열 패딩 |
s.repeat(n) | 문자열 반복 |
[...arr1, ...arr2] | 배열 병합 |
arr.push(x) / pop() | 끝에 추가/제거 |
arr.unshift(x) / shift() | 앞에 추가/제거 |
arr.slice(start, end) | 부분 추출 (불변) |
arr.splice(i, n, ...items) | 제거/삽입 (변경) |
arr.concat(arr2) | 배열 합치기 |
arr.join(sep) | 문자열로 합침 |
arr.reverse() | 역순 (변경) |
arr.sort((a,b) => a-b) | 정렬 (변경) |
arr.includes(x) | 포함 여부 |
arr.indexOf(x) / lastIndexOf(x) | 인덱스 찾기 |
arr.flat(depth) | 중첩 배열 평탄화 |
Array.isArray(x) | 배열인지 확인 |
Array.from(iterable) | 이터러블에서 생성 |
arr.forEach(fn) | 각 요소에 대해 실행 |
arr.map(fn) | 요소 변환 |
arr.filter(fn) | 요소 필터링 |
arr.reduce((acc, x) => ..., init) | 단일 값으로 축소 |
arr.find(fn) | 첫 번째 일치 찾기 |
arr.findIndex(fn) | 첫 번째 일치 인덱스 |
arr.some(fn) | 하나라도 일치하는지 |
arr.every(fn) | 모두 일치하는지 |
arr.flatMap(fn) | 맵 후 평탄화 |
{ ...obj1, ...obj2 } | 객체 병합 |
{ key: value } | 객체 리터럴 |
{ key } | 단축 프로퍼티 |
{ [expr]: value } | 계산된 프로퍼티 |
obj.key / obj["key"] | 프로퍼티 접근 |
obj?.key | 옵셔널 체이닝 |
delete obj.key | 프로퍼티 삭제 |
"key" in obj | 키 존재 확인 |
Object.keys(obj) | 모든 키 가져오기 |
Object.values(obj) | 모든 값 가져오기 |
Object.entries(obj) | [키, 값] 쌍 가져오기 |
Object.assign(target, src) | 프로퍼티 복사 |
Object.freeze(obj) | 불변으로 만들기 |
Object.fromEntries(arr) | 엔트리에서 생성 |
const { a, b } = obj | 객체 구조 분해 |
const { a: x } = obj | 변수 이름 변경 |
const { a = 1 } = obj | 기본값 |
const { a, ...rest } = obj | 나머지 프로퍼티 |
const [a, b] = arr | 배열 구조 분해 |
const [a, , b] = arr | 요소 건너뛰기 |
const [a, ...rest] = arr | 나머지 요소 |
function name(a, b) {} | 함수 선언 |
const fn = function() {} | 함수 표현식 |
const fn = () => {} | 화살표 함수 |
const fn = (a) => a * 2 | 암시적 반환 화살표 |
function fn(a = 1) {} | 기본 매개변수 |
function fn(...args) {} | 나머지 매개변수 |
fn.call(this, a, b) | this 컨텍스트로 호출 |
fn.apply(this, [a, b]) | 배열 인자로 호출 |
fn.bind(this) | 바인딩된 함수 생성 |
let (block scope) | 블록 스코프 변수 |
const (block scope) | 블록 스코프 상수 |
var (function scope) | 함수 스코프 (호이스팅) |
closure | 외부 스코프 접근 함수 |
IIFE: (function() {})() | 즉시 실행 함수 |
new Promise((resolve, reject) => {}) | Promise 생성 |
promise.then(fn) | 이행 처리 |
promise.catch(fn) | 거부 처리 |
promise.finally(fn) | 항상 실행 |
Promise.resolve(val) | 이행된 Promise 생성 |
Promise.reject(err) | 거부된 Promise 생성 |
Promise.all([p1, p2]) | 모두 대기 (빠른 실패) |
Promise.allSettled([p1, p2]) | 모두 대기 (실패 없음) |
Promise.race([p1, p2]) | 첫 번째 완료 |
Promise.any([p1, p2]) | 첫 번째 이행 |
async function fn() {} | 비동기 함수 |
const fn = async () => {} | 비동기 화살표 함수 |
await promise | Promise 대기 |
try { await } catch (e) {} | 에러 처리 |
await Promise.all([...]) | 병렬 실행 |
for await (const x of asyncIter) | 비동기 반복 |
// 에러 처리가 있는 Async/await
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error('HTTP 에러');
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch 실패:', error);
throw error;
}
}
// 병렬 요청
const [users, posts] = await Promise.all([
fetchData('/api/users'),
fetchData('/api/posts')
]); class Name {} | 클래스 선언 |
class Child extends Parent {} | 상속 |
constructor() {} | 생성자 메서드 |
super() | 부모 생성자 호출 |
super.method() | 부모 메서드 호출 |
static method() {} | 정적 메서드 |
static property = value | 정적 프로퍼티 |
get prop() {} | 게터 |
set prop(val) {} | 세터 |
#privateField | 프라이빗 필드 |
#privateMethod() {} | 프라이빗 메서드 |
export const x = 1 | 명명된 내보내기 |
export default fn | 기본 내보내기 |
export { x, y } | 내보내기 목록 |
export { x as alias } | 이름 변경 내보내기 |
import { x } from './mod' | 명명된 가져오기 |
import x from './mod' | 기본 가져오기 |
import * as mod from './mod' | 네임스페이스 가져오기 |
import { x as alias } from './mod' | 이름 변경 가져오기 |
import('./mod') | 동적 가져오기 |
export * from './mod' | 전체 재내보내기 |
document.getElementById(id) | ID로 가져오기 |
document.querySelector(sel) | 첫 번째 일치 |
document.querySelectorAll(sel) | 모든 일치 |
document.getElementsByClassName(c) | 클래스로 가져오기 |
document.getElementsByTagName(t) | 태그로 가져오기 |
el.closest(sel) | 가장 가까운 조상 찾기 |
el.matches(sel) | 선택자 일치 테스트 |
el.textContent = "text" | 텍스트 내용 설정 |
el.innerHTML = "<p>html</p>" | HTML 내용 설정 |
el.setAttribute(name, val) | 속성 설정 |
el.getAttribute(name) | 속성 가져오기 |
el.classList.add(c) / remove(c) | 클래스 추가/제거 |
el.classList.toggle(c) | 클래스 토글 |
el.classList.contains(c) | 클래스 확인 |
el.style.prop = value | 인라인 스타일 설정 |
document.createElement(tag) | 요소 생성 |
parent.appendChild(el) | 자식 추가 |
parent.removeChild(el) | 자식 제거 |
el.remove() | 요소 제거 |
el.addEventListener(type, fn) | 이벤트 리스너 추가 |
el.removeEventListener(type, fn) | 이벤트 리스너 제거 |
event.preventDefault() | 기본 동작 방지 |
event.stopPropagation() | 버블링 중지 |
event.target | 발생시킨 요소 |
event.currentTarget | 리스너가 있는 요소 |
{ once: true, passive: true } | 이벤트 옵션 |
const, 필요할 때 let, var 피하기== 대신 === 사용this 보존을 위해 콜백에 화살표 함수 사용.then() 체인 대신 async/await 사용?. 사용?? 사용