JavaScript 공식 문서: 개념, 예제, 실습
예제 중심의 간결한 JavaScript 레퍼런스. 개념을 읽고 코드를 본 뒤 Coddy 여정에서 직접 연습하세요.
JavaScript 가이드 학습 시작하기시작하기
- 자바스크립트란자바스크립트가 정확히 뭔지, 어디서 실행되고 어디에 쓰이는지, 자바·타입스크립트와는 뭐가 다른지 초보자 눈높이에서 풀어봤습니다.
- JS 실행하기자바스크립트를 실제로 돌려보는 세 가지 방법 — 브라우저 콘솔, HTML의 script 태그, 터미널에서 Node.js. 각 방식이 언제 가장 잘 맞는지 정리했습니다.
- 문법과 세미콜론자바스크립트 문법의 기본기 — 문장, 블록, 표현식 — 과 세미콜론을 꼭 써야 하는지, ASI(자동 세미콜론 삽입)가 언제 발목을 잡는지 실전 기준으로 정리했습니다.
- strict mode자바스크립트 strict mode가 뭘 바꾸는지, 어떻게 켜는지, 그리고 모듈과 클래스에서 왜 자동으로 적용되는지 정리했습니다.
- 주석자바스크립트 주석 작성법 정리 — 한 줄은 `//`, 여러 줄은 `/* */`. 그리고 쓸모 있는 주석과 쓸모없는 주석을 가르는 습관까지 짚어봅니다.
변수와 타입
- let, const, var자바스크립트에서 변수를 선언하는 세 가지 방법과, 요즘 코드가 왜 기본은 `const`, 필요할 때만 `let`, `var`는 거의 쓰지 않는지 그 이유를 짚어봅니다.
- 원시 타입자바스크립트의 7가지 원시 타입(string, number, bigint, boolean, null, undefined, symbol)과 객체와의 차이점을 예제로 정리했습니다.
- 문자열 & 템플릿따옴표와 백틱, 문자열 보간(${}), 여러 줄 문자열, 그리고 실무에서 진짜 자주 쓰는 문자열 메서드까지 한 번에 정리했습니다.
- Number와 BigInt자바스크립트 Number 타입의 실체와 부동소수점 오차, MAX_SAFE_INTEGER 한계, 그리고 BigInt를 써야 할 타이밍까지 정리했습니다.
- null vs undefined자바스크립트에서 null과 undefined가 실제로 어떻게 다른지, 두 값을 어떻게 체크하는지, 그리고 내 코드에선 어느 쪽을 써야 할지까지 한 번에 정리했습니다.
- 타입 변환자바스크립트가 값의 타입을 알아서 바꿔주는 방식 — 많이들 헷갈리는 암시적 변환 규칙과, 가급적 써야 하는 명시적 변환, 그리고 각각이 언제 발동되는지 정리했습니다.
- == vs ===자바스크립트의 동등 연산자 == 와 ===, 그리고 Object.is까지. 타입 강제 변환, NaN 비교, 객체 참조 비교의 함정을 예제로 정리했습니다.
제어 흐름
- 연산자계산하고, 값을 비교하고, 불리언을 조합하고, 값을 대입할 때 쓰는 자바스크립트 연산자들 — 실무에서 진짜 발목 잡는 함정까지 같이 짚어봅니다.
- if / else자바스크립트 if/else 사용법을 한 번에 정리했습니다. 조건식 작성, else if 체인, truthy/falsy 함정, 그리고 삼항 연산자로 깔끔하게 바꾸는 팁까지 다룹니다.
- switch문자바스크립트 switch문의 동작 원리부터 case, break, default, fallthrough까지. if/else 대신 switch를 써야 하는 순간도 함께 정리했습니다.
- for문자바스크립트 `for`문의 기본 구조부터 배열 순회, break와 continue, 중첩 반복문, 자주 하는 실수까지 예제로 정리합니다.
- while 반복문자바스크립트 `while`과 `do...while` 반복문의 동작 방식과 `for` 대신 while을 써야 할 때, 그리고 무한 루프를 피하는 방법을 정리했습니다.
- for...of & for...in자바스크립트의 for...of와 for...in, 도대체 뭐가 다를까요? 값과 키의 차이부터 배열·객체 순회, 실전에서 언제 뭘 써야 하는지 정리했습니다.
- Truthy & Falsy자바스크립트에서 truthy와 falsy가 정확히 뭘 의미하는지, falsy 값 7가지 전체 목록과 불리언 변환 시 자주 놓치는 함정까지 정리했습니다.
반복
함수
- 함수 선언자바스크립트에서 함수를 선언하는 방법을 정리했습니다. function 키워드, 매개변수, 반환값, 호이스팅, 그리고 함수 선언문과 함수 표현식 중 뭘 써야 할지까지 살펴봅니다.
- 화살표 함수자바스크립트 화살표 함수(`=>`)의 문법부터 암묵적 반환, `this` 바인딩 차이, 그리고 일반 `function` 대신 언제 써야 하는지까지 실전 예제로 정리했습니다.
- 기본 매개변수자바스크립트 함수의 기본 매개변수 사용법을 알아봅니다. 기본값이 언제 적용되는지, undefined와 null의 차이, 매개변수와 인수의 구분까지 한 번에 정리합니다.
- Rest & Spread자바스크립트의 `...` 연산자가 어떻게 동작하는지 한 번에 정리했습니다. rest 파라미터로 인자를 모으고, spread로 배열과 객체를 펼치는 방법, 그리고 언제 어떤 걸 써야 하는지 알려드립니다.
- 클로저클로저는 자신이 선언된 스코프의 변수를 기억하는 함수입니다. 실행 가능한 예제와 실제 사용 사례로 자바스크립트 클로저의 동작 원리를 살펴봅니다.
- this 키워드자바스크립트에서 `this`가 실제로 어떻게 동작하는지 알아봅니다. 4가지 바인딩 규칙, 화살표 함수가 왜 다른지, 그리고 'this is undefined' 에러를 피하는 방법까지 정리했습니다.
- 고차 함수자바스크립트 고차 함수를 제대로 이해해 봅시다. 함수를 인자로 넘기고, 함수를 반환하고, 실무에서 매일 쓰는 map·filter·reduce 패턴까지 정리했습니다.
객체와 배열
- 객체(Object)자바스크립트 객체를 제대로 다루는 방법을 정리했습니다. 객체 생성부터 속성 읽기/쓰기, 메서드 추가, 그리고 코드를 깔끔하게 유지하는 패턴까지 살펴봅니다.
- 배열자바스크립트에서 배열을 만들고, 인덱스로 접근하고, push/pop으로 수정하고, slice와 splice를 구분해서 쓰는 방법까지 실무에서 바로 쓸 수 있게 정리했습니다.
- 구조 분해 할당자바스크립트 구조 분해 할당(destructuring)으로 객체와 배열에서 값을 꺼내는 법, 이름 바꾸기, 기본값, 중첩 패턴, 함수 매개변수까지 실전 예제로 정리했습니다.
- 객체 스프레드자바스크립트 스프레드 연산자(`...obj`)로 객체를 복사하고 병합하는 방법, 속성 덮어쓰기 규칙, 그리고 실수하기 쉬운 얕은 복사 함정까지 한 번에 정리했습니다.
- 배열 메서드for 루프 대신 쓰게 되는 배열 메서드들 — map, filter, reduce, find, some, every를 정리하고, 원본을 바꾸는 메서드와 새 배열을 반환하는 메서드를 구분해 봅니다.
- Map & Set자바스크립트 Map과 Set의 동작 방식, 일반 객체·배열과 뭐가 다른지, 그리고 언제 쓰는 게 이득인지 정리했습니다.
- JSON 다루기자바스크립트 객체를 JSON으로 변환하고 다시 되돌리는 방법 — JSON.stringify, JSON.parse, replacer와 reviver 활용, 그리고 왕복 변환에서 사라지는 값들까지 정리했습니다.
- 옵셔널 체이닝중첩된 객체나 배열, 메서드에 접근할 때 `?.` 연산자를 쓰면 `null`이나 `undefined`로 터지는 상황을 깔끔하게 피할 수 있습니다.
- ?? 연산자`??` 연산자는 값이 `null` 또는 `undefined`일 때만 기본값을 반환합니다. 왜 `||` 대신 `??`를 써야 하는지, 실무 기준으로 짚어봅니다.
클래스와 프로토타입
- 클래스(class)자바스크립트 클래스가 실제로 어떻게 동작하는지 정리했습니다. `class` 키워드의 멘탈 모델부터 생성자, 메서드, 인스턴스 필드, getter/setter까지 한 번에 살펴봅니다.
- 상속자바스크립트 클래스에서 상속이 어떻게 동작하는지 알아봅니다. extends와 super, 메서드 오버라이드, 그리고 상속 대신 컴포지션을 써야 할 때까지 정리했습니다.
- 정적 멤버자바스크립트 클래스의 정적 메서드와 속성은 언제 쓰는 게 좋을까요? `static` 키워드의 동작 방식, `this`의 의미, 팩토리 패턴까지 한 번에 정리했습니다.
- private 필드`#` 접두사로 클래스 필드와 메서드를 진짜 private하게 만드는 방법. 문법, 규칙, 그리고 밑줄(`_`) 컨벤션만으로는 왜 부족한지 정리합니다.
- 프로토타입자바스크립트 프로토타입이 실제로 무엇인지, 프로토타입 체인이 어떻게 속성을 찾아 올라가는지, 그리고 `class` 문법이 이 구조 위에서 어떻게 동작하는지 정리합니다.
비동기 JavaScript
- 이벤트 루프자바스크립트 비동기 동작의 핵심 — 콜 스택, 태스크 큐, 마이크로태스크 큐, 그리고 이 셋을 엮어주는 이벤트 루프까지 한 번에 정리합니다.
- 콜백 함수자바스크립트에서 함수를 인자로 넘기는 콜백 패턴의 동작 원리부터 에러 우선(error-first) 규약, 그리고 콜백 지옥을 벗어나 Promise로 넘어간 이유까지 정리했습니다.
- Promise자바스크립트 Promise의 세 가지 상태부터 then·catch 체이닝, Promise.all과 allSettled, 그리고 new Promise로 직접 만드는 방법까지 한 번에 정리합니다.
- async/await자바스크립트 async/await의 동작 원리를 제대로 파헤쳐 봅니다. async 함수, await 키워드, try/catch 에러 처리, 그리고 Promise.all로 병렬 실행까지 한 번에 정리했습니다.
- Fetch API자바스크립트 Fetch API 사용법을 정리했습니다. GET/POST 요청 보내기, JSON 파싱, 제대로 된 에러 처리, 그리고 느린 요청을 취소하는 방법까지 다룹니다.
- async 에러 처리async/await에서 try/catch를 어떻게 써야 하는지, Promise의 .catch는 언제 붙이고, 왜 에러가 조용히 사라지는지까지 — 실전에서 꼭 알아야 할 내용만 정리했습니다.
모듈과 도구
- ES 모듈자바스크립트 ES 모듈의 동작 방식을 정리합니다. named/default export, import 문법, 동적 import(), 그리고 일반 스크립트와 모듈의 차이까지 한 번에 짚어봅니다.
- CommonJS vs ESM자바스크립트에 두 가지 모듈 시스템이 공존하는 이유, 그리고 Node 프로젝트에서 require와 import 중 무엇을 써야 할지 정리했습니다.
- npm 기초npm이 실제로 어떻게 동작하는지 — 패키지 설치부터 init, dev 의존성, 업데이트, 그리고 node_modules와 lockfile의 작동 원리까지 정리했습니다.
- package.jsonpackage.json 안에는 뭐가 들어 있을까? 꼭 알아야 할 필드부터 scripts 동작 방식, ^와 ~가 결정하는 npm 설치 버전까지 한 번에 정리했습니다.
- Node 런타임Node.js 런타임이 무엇인지, 브라우저와 어떻게 다른지, 그리고 globals·modules·process·fs 같은 핵심 API가 어떻게 서버 사이드 자바스크립트를 가능하게 하는지 정리합니다.
오류와 디버깅
실제 데이터 다루기
