본문으로 건너뛰기

JavaScript 문법 완전 가이드 TOC

1. 기본 문법​

  • 변수 선언: var, let, const

  • 자료형: String, Number, Boolean, Null, Undefined, Symbol, BigInt

  • 연산자

    • 산술 연산자
    • 비교 연산자
    • 논리 연산자
    • 할당 연산자
    • 삼항 연산자

  • 주석: 한 줄, 여러 줄

  • 콘솔 출력: console.log, console.error

2. 제어문​

  • 조건문: if, else if, else, switch
  • 반복문: for, while, do...while, for...in, for...of
  • 예외 처리: try...catch...finally, throw

3. 함수​

  • 함수 선언
  • 함수 표현식
  • 화살표 함수
  • 기본 매개변수
  • 가변 인자 (...rest)
  • 즉시 실행 함수(IIFE)
  • 콜백 함수

4. 객체​

  • 객체 리터럴
  • 속성 접근 (., [])
  • 메서드
  • this 키워드
  • 객체 메서드: Object.keys, Object.values, Object.entries, Object.assign
  • 깊은 복사와 얕은 복사
  • 생성자 함수
  • 클래스와 인스턴스

5. 배열​

  • 배열 리터럴
  • 배열 요소 접근 및 수정
  • 배열 메서드
    • 변형 메서드: push, pop, shift, unshift, splice
    • 조회 메서드: indexOf, includes, find, findIndex
    • 반복 및 변환: forEach, map, filter, reduce, some, every
    • 정렬과 조작: sort, reverse, concat, slice, join

6. 문자열​

  • 문자열 생성과 연결
  • 템플릿 문자열 (Template Literal)
  • 문자열 메서드: length, charAt, includes, startsWith, endsWith, indexOf, slice, substring, replace, split, toUpperCase, toLowerCase

7. ES6+ 기능​

  • 디스트럭처링 (object, array)
  • 스프레드 연산자 (...)
  • 모듈 (export, import)
  • 클래스 (class, extends, super)
  • 심볼(Symbol)
  • Set과 Map
  • Promise, async/await
  • Optional Chaining (?.)
  • Nullish Coalescing (??)
  • BigInt

8. DOM 조작​

  • 요소 선택: getElementById, querySelector, querySelectorAll
  • 속성 및 내용 변경: textContent, innerHTML, setAttribute
  • 스타일 변경: style
  • 이벤트 처리: addEventListener
  • DOM 생성, 삽입, 삭제: createElement, appendChild, removeChild, replaceChild

9. 이벤트​

  • 마우스 이벤트: click, dblclick, mouseover, mouseout
  • 키보드 이벤트: keydown, keyup, keypress
  • 폼 이벤트: submit, change, input
  • 이벤트 버블링과 캡처링
  • 이벤트 객체 사용: event.preventDefault(), event.stopPropagation()

10. 비동기 처리​

  • 콜백 함수
  • Promise (then, catch, finally)
  • async/await
  • fetch API
  • setTimeout, setInterval

11. 오류 처리​

  • try...catch
  • throw
  • 커스텀 에러 생성

12. 고급 문법​

  • 클로저
  • IIFE (Immediately Invoked Function Expression)
  • 제너레이터 함수 (function*)
  • Proxy와 Reflect
  • Symbol과 Iterator
  • 메모이제이션(Memoization)

13. 브라우저 API​

  • LocalStorage / SessionStorage
  • Cookie 처리
  • Fetch / XMLHttpRequest
  • WebSocket
  • Geolocation
  • Canvas API
  • History / Location / Navigator

14. 유틸리티​

  • JSON (JSON.stringify, JSON.parse)
  • 날짜와 시간 (Date, Intl.DateTimeFormat)
  • 정규 표현식(RegExp)
  • URL 처리 (URL, URLSearchParams)
  • 난수 생성 (Math.random, Math.floor)