JavaScript 심화 Promise·async/await·Generator: 비동기와 이터레이션의 핵심 Promise를 표준으로 정리하고, async/await로 읽기 쉬운 흐름을 만들며, Generator의 ‘단계 실행’ 개념까지 연결합니다. 형태 요약노트 대상 심화 포커스 비동기/이터레이션 그림 1. Promise·async/await·Generator 관계도 Promise: 비동기의 표준 패턴 Promise는 “비동기 작업의 결과(성공/실패)를 나중에 받는 객체”입니다. 상태(state)가 명확해서, 콜백 지옥을 줄이고 흐름을 깔끔하게 만들 수 있습니다.const p = new Promise((resolve, reject) => { // resolve(val..

JavaScript 심화 this·프로토타입·클래스: 객체지향을 ‘자바스크립트 방식’으로 this 바인딩을 제어하는 3종(call/apply/bind), 프로토타입 상속, class 문법을 연결해서 정리합니다. 형태 요약노트 대상 심화 포커스 OOP/this 그림 1. call/apply/bind 한 장 정리 그림 2. 프로토타입과 클래스(상속 구조) call / apply / bind: this를 내가 원하는 대로 중급에서 가장 자주 ‘체감’되는 포인트 중 하나가 this입니다. 특히 콜백이나 이벤트 핸들러에서 this가 바뀌어 혼란스러울 때가 많습니다. call/apply: 지금 바로 실행하면서 this를 지정합니다. bind: this가 고정된 새 함수를..

JavaScript 심화 Rest/Spread·클로저·타이머: ‘상태’와 ‘시간’을 다루는 감각 문법(… )을 올바르게 구분하고, 클로저와 이벤트 루프 관점에서 타이머를 이해합니다. 형태 요약노트 대상 심화 포커스 상태/시간 그림 1. 분해/모으기/펼치기 치트시트 그림 2. 타이머와 이벤트 루프(큰 그림) Rest / Spread: 헷갈리는 이유부터 정리해보기 Rest와 Spread는 둘 다 점 세 개(...)를 사용하지만, 쓰이는 위치가 다릅니다. Rest: “남은 값을 모으는” 문법 (함수 매개변수, 구조 분해 패턴에서 사용) Spread: “값을 펼치는” 문법 (배열/객체 리터럴, 함수 호출에서 사용)function logAll(first, ...res..

JavaScript 심화배열 메서드·구조 분해 할당: 반복문에서 ‘의도’로 이동하기map/filter/reduce, 정렬 함정, 구조 분해 할당의 핵심 사용 패턴을 정리합니다.형태 요약노트 대상 심화 포커스 배열/데이터 가공그림 1. 배열 메서드 체이닝(데이터 흐름)그림 2. 분해/모으기/펼치기 치트시트배열 메서드 1: map / filter / find / some / every중급에서 배열을 다루는 핵심은 반복문을 ‘의도’로 바꾸는 것입니다. 즉, “돌면서 뭘 할지”보다 “필터링/변환/검색/집계”처럼 목적이 드러나는 코드가 좋아집니다.map: 원소를 변환해 새 배열을 만듭니다.filter: 조건을 만족하는 원소만 남깁니다.find: 조건을 만족하는 ‘첫’ 원소를 찾습니다(없으면 undefined).s..

JavaScript 심화 Symbol·Number·String: ‘기본형’을 심화스럽게 쓰는 법 키 충돌을 피하는 Symbol, 소수점/NaN 함정, 문자열 처리 메서드를 한 번에 정리합니다. 형태 요약노트 대상 심화 포커스 함정/자주 쓰는 메서드 그림 1. Symbol로 키 충돌을 피하는 방식 Symbol: 키 충돌을 피하는 가장 간단한 방법 객체에 속성을 추가할 때, 문자열 키는 다른 코드와 충돌할 가능성이 있습니다. 이럴 때 Symbol()을 키로 쓰면 유일한 키를 만들 수 있습니다.const id = Symbol('id');const user = { name: 'Soo', [id]: 1234,};console.log(user[id]);자주 나오는 포인트 S..