JavaScript 학습 지도

이 노트를 읽는 법

• 실행 블록: ▶ 실행을 누르면 결과가 바로 아래에 나와요. 코드를 고쳐서 다시 실행해도 되고, 되돌리기를 누르면 처음 코드로 돌아가요.
• 그림: 화면에 보이면 저절로 움직이고, 오른쪽 아래 ↻ 버튼으로 처음부터 다시 볼 수 있어요.
• 체험: 필요한 글에만 들어 있어요. 버튼을 누르거나 값을 넣어 보면서 개념을 몸으로 느껴 보는 칸이에요.
• 직접 해 보기: 그 글에서 배운 것만으로 풀 수 있는 과제예요. 해답은 접혀 있으니 먼저 풀어 보세요.
• 셀프 체크: 4장부터 글 맨 끝에 있어요. 질문에 먼저 답해 보고, 눌러서 답을 확인해요.
• 정리: 글 맨 끝의 파란 상자에 핵심만 모아 두었어요. 복습할 때는 여기부터 읽어도 돼요.

1부 자바스크립트 언어

브라우저 화면과 상관없이, 언어 자체의 문법과 동작을 익히는 부분이에요. 1부의 예제는 대부분 이 노트의 실행 블록에서 돌려 볼 수 있어요.

1장 소개

코드를 쓰기 전에, 자바스크립트가 어디서 어떻게 실행되는지와 공부하면서 쓸 자료 · 도구를 둘러봐요.

1. 1.1자바스크립트는 어디서 어떻게 돌아갈까엔진 · 샌드박스 · 브라우저 밖
2. 1.2명세 · 레퍼런스 · 호환성 표 읽는 법ECMA-262 · TC39 · MDN · Baseline
3. 1.3코드 편집기 고르기IDE · 가벼운 편집기
4. 1.4브라우저 콘솔에서 바로 실행하고 오류 읽기콘솔 · 오류 메시지

2장 기본

변수 · 값의 종류 · 연산자 · 조건 · 반복 · 함수처럼, 어떤 코드를 쓰든 매일 쓰는 기본 문법이에요.

1. 2.1스크립트를 페이지에 넣는 법과 기본 규칙defer · 메인 스레드 · 엄격 모드
2. 2.2let과 const로 값에 이름 붙이기let · const · 이름 짓기
3. 2.3값의 여덟 가지 종류와 typeof자료형 · null · typeof
4. 2.4계산하고 이어 붙이는 기본 연산자% · + 와 문자열
5. 2.5형 변환과 비교: == 대신 ===를 쓰는 이유Number() · ===
6. 2.6조건에 따라 다르게 실행하기: if · 삼항 · switchif · switch · early return
7. 2.7논리 연산자와 ??로 기본값 다루기&& · || · ??
8. 2.8같은 일을 되풀이하는 반복문: for · for...of · while반복문 · break
9. 2.9함수: 이름 붙인 작업 묶음매개변수 · return
10. 2.10함수를 값처럼: 함수 표현식 · 콜백 · 화살표 함수콜백 · =>

3장 코드 품질과 도구

디버거 · npm · ESLint와 Prettier · 테스트처럼, 혼자 짜는 코드를 팀이 함께 쓰는 프로젝트로 키울 때 필요한 도구예요.

1. 3.1디버거로 코드를 멈추고 들여다보기중단점 · 한 줄씩 실행
2. 3.2npm과 package.json: 남이 만든 도구 가져다 쓰기npm · package.json
3. 3.3ESLint와 Prettier로 코드 스타일 자동화ESLint · Prettier
4. 3.4좋은 주석과 JSDoc주석 · JSDoc
5. 3.5테스트 자동화: 고친 코드가 망가지지 않았는지 확인하기Vitest · node:test
6. 3.6폴리필과 트랜스파일러: 오래된 브라우저 대응Babel · core-js · Baseline

4장 객체

여러 값을 이름 붙여 묶는 객체와, 객체를 다룰 때 꼭 알아야 할 참조 · 복사 · 메모리 · this, 그리고 생성자 · 옵셔널 체이닝 · 심볼을 다뤄요.

1. 4.1객체: 이름 붙은 값 묶음속성 · 점과 대괄호
2. 4.2참조와 복사: 같은 객체를 두 이름이 가리킬 때얕은 복사 · structuredClone
3. 4.3메모리와 가비지 컬렉션: 누수는 어디서 생길까GC · 누수 · AbortController
4. 4.4메서드와 this: 누가 불렀는지가 정해요메서드 · this
5. 4.5생성자와 new: 같은 모양 객체 찍어 내기new · 생성자 함수
6. 4.6옵셔널 체이닝: 없을 수도 있는 값 안전하게 읽기?. · ?? · API 응답
7. 4.7심볼: 다른 키와 절대 겹치지 않는 키Symbol · Symbol.iterator

5장 자료구조와 자료형

숫자 · 문자열 · 배열처럼 매일 다루는 값을 실무에서 부딪히는 함정과 함께 다뤄요.

1. 5.1숫자 다루기: 소수 오차, 반올림, 금액 표시Math.round · Intl.NumberFormat · parseInt
2. 5.2문자열 다루기: 템플릿 리터럴, 메서드, 길이의 함정slice · replaceAll · Intl.Segmenter
3. 5.3배열: 순서 있는 목록 다루기push · pop · splice
4. 5.4배열 메서드 1: map · filter · find · some · every · includesmap · filter · find
5. 5.5배열 메서드 2: reduce, 정렬, 원본을 바꾸지 않는 메서드reduce · sort · toSorted
6. 5.6이터러블과 유사 배열: for...of와 펼치기가 되는 조건이터러블 · Array.from
7. 5.7Map과 Set: 중복 제거, 캐시, 객체 대신 쓸 때Map · Set · WeakMap
8. 5.8객체를 배열로, 다시 객체로: keys · values · entries · fromEntriesObject.entries · fromEntries
9. 5.9구조 분해: 배열과 객체에서 필요한 값만 꺼내기구조 분해 · 기본값 · 매개변수
10. 5.10날짜와 시간: Date의 함정, 표시, 시간대Date · Intl.DateTimeFormat · Temporal
11. 5.11JSON: 서버와 주고받는 데이터와 직렬화의 함정JSON.stringify · parse · reviver
12. 5.12불변 업데이트: 상태를 바꾸지 않고 새로 만들기불변 업데이트 · 펼치기

6장 함수 심화

재귀 · 클로저 · 타이머처럼 함수를 더 깊이 쓰는 법과, 오래된 코드에서 만나는 var를 다뤄요.

1. 6.1재귀와 콜 스택: 트리 모양 데이터 다루기재귀 · 콜 스택 · 트리
2. 6.2나머지 매개변수와 전개 구문: 같은 점 세 개, 반대의 일...rest · ...spread
3. 6.3유효범위와 클로저: 함수가 기억하는 상자스코프 · 클로저 · 캐시
4. 6.4오래된 var, 전역 객체, 즉시 실행 함수var · globalThis · IIFE
5. 6.5타이머: setTimeout · setInterval과 정확하지 않은 시간setTimeout · setInterval · 체험
6. 6.6래퍼 함수: 기록 · 재시도 · 캐시를 덧입히기, call과 apply래퍼 · call · apply
7. 6.7bind와 this: 콜백에 메서드를 넘길 때bind · 화살표 함수
8. 6.8디바운스와 스로틀: 너무 자주 일어나는 이벤트 다루기디바운스 · 스로틀 · 체험

7장 프로퍼티 설정

속성을 읽고 쓸 때의 동작을 정하는 getter · setter와, 객체를 잠그는 법을 다뤄요.

1. 7.1getter · setter와 Object.freeze: 속성의 동작 정하기getter · setter · freeze

8장 프로토타입

객체가 메서드를 물려받는 원리와, 그 원리 때문에 생기는 실무 문제를 다뤄요.

1. 8.1프로토타입 체인: 없는 속성은 위에서 빌려 와요프로토타입 · Object.create
2. 8.2내장 프로토타입과 프로토타입 오염Object.create(null) · 오염

목차 구성은 모던 JavaScript 튜토리얼(ko.javascript.info)을 참고했어요. 본문 · 예제 · 그림은 SIMPLE에서 새로 썼어요.