#function

Frontend › JavaScript

함수를 고치지 않고 감싸서 동작을 더하는 데코레이터 함수. 캐싱 래퍼로 보는 기본 모양, 감싼 메서드가 this를 잃는 문제와 func.call(this, ...args)로 넘기는 콜 포워딩, call과 apply의 차이, 여러 인자를 키 하나로 바꾸는 해시, 유사 배열에 배열 메서드를 빌려 쓰는 메서드 빌리기, 래퍼가 원래 함수의 속성을 잃는 한계를 정리한다. 부분 적용은 함수형 프로그래밍 노트에 있다.

• #javascript
• #design-pattern
• #cache
• #frontend

Frontend › JavaScript

변수를 어디서 쓸 수 있는지 정하는 스코프(전역·모듈·함수·블록)와 globalThis, 안쪽에서 바깥으로 찾아가는 스코프 체인과 섀도잉, 정의된 위치로 정해지는 렉시컬 스코프, 선언이 끌어올려지는 호이스팅과 TDZ, var가 블록을 무시하는 동작, 렉시컬 환경과 함수가 기억하는 태어난 환경으로 설명하는 클로저의 원리, 클로저의 쓰임새(함수 공장, private 상태)와 메모리·디버깅 주의점을 정리했다.

• #javascript
• #frontend
• #scope
• #closure

Frontend › JavaScript

엔진이 코드를 실행할 때 만드는 실행 단위인 실행 컨텍스트를 정리한다. 전역·함수·eval·모듈 컨텍스트와 실행 컨텍스트 스택(콜 스택), LexicalEnvironment·VariableEnvironment·PrivateEnvironment와 this가 담기는 자리, 선언을 먼저 등록하는 생성 단계와 값을 채우는 실행 단계, 그 결과로 생기는 호이스팅·TDZ·스코프 체인·var의 블록 무시를 한 흐름으로 묶는다. 선언적·객체 환경 레코드와 with·eval이 최적화를 깨는 이유, 매개변수 기본값이 만드는 별도 스코프, 클로저가 푸는 funarg 문제, ES3의 변수 객체(VO)·활성 객체(AO) 용어와의 대응까지 다룬다.

• #javascript
• #frontend
• #scope
• #execution-context

Frontend › JavaScript

for...of·spread·구조 분해가 공통으로 쓰는 약속인 이터러블·이터레이터 프로토콜(Symbol.iterator와 next()의 { value, done }), 직접 iterable 만들기, 실행을 멈췄다 이어 가는 제너레이터 함수(function*, yield, next(값)으로 값 돌려보내기, return, yield*), 게으른 무한 수열, ES2025 이터레이터 헬퍼와 비동기 이터레이션을 정리한다.

• #javascript
• #frontend
• #async

Frontend › JavaScript

함수 선언식·표현식(이름 있는 함수 표현식)·화살표 함수·IIFE(식 자리에 문장 쓰기)·메서드·new Function, 블록 안 함수 선언의 스코프, 함수도 객체라는 점(name·length·커스텀 속성), 매개변수와 인자(호출마다 평가되는 기본값·arguments·rest·spread), return과 early return, 이름 짓기, 생성자 함수(new.target·return 규칙)와 팩토리 함수, 호출 방식에 따라 달라지는 this(전역·암묵적·명시적·new·이벤트 핸들러), 화살표 함수에 없는 것들, bind·call·apply와 이벤트 리스너에 메서드를 넘길 때의 함정, 재귀와 콜 스택 깊이.

• #javascript
• #frontend