제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다. 제너레이터 함수를 호출하면 일반 함수처럼 함수 코드 블록을 실행하는 것이 아니라 제너레이터 객체를 생성해 반환한다. 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 동시에 이터레이터이다. function* genFunc() { yield 1; yield 2; yield 3; } const generator = genFunc(); console.log(Symbol.iterator in generator); // 이터러블이면서 console.log('next' in generator); // 이터레이터이다. 제너레이터 객체는 이터레이터지만 next 메서드를 포함해서 return, throw 총 3가지의 ..

이터레이션 프로토콜 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터러블 프로토콜은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환하는데, 이러한 규약을 이터러블 프로토콜이라고 한다. 그리고 이 규약을 지키는 객체가 이터러블이다. 포인트는 이터러블 객체의 Symbol.iterator 메서드를 호출할 때 반환되는 객체가 이터레이터이다. const arr = [1, 2, 3]; console.log(Symbol.iterator in arr); let iter1 = ..

일급 객체 일급 객체의 조건 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 객체, 배열에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. const add5 = a => a + 5; log(add5); log(add5(5)); const f1 = () => () => 1; log(f1()); const f2 = f1(); log(f2); log(f2()); 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다. 객체는 값이므로 함수는 값으로 다룰 수 있다. 이것은 조합성과 추상화의 도구로 사용된다. 고차 함수 일급 함수의 특징을 살려 함수를 값으로 다루는 함수를 고차함수라고 한다. 고차함수는 크게 두가지 유형으로 ..

https://ukgi-dev.tistory.com/31 실행 컨텍스트와 렉시컬 환경 심화 탐구 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역이다. 그렇다면 어떤 환경을 제공하고, 어떻게 실행 결과를 관리할까? 우선 소스 코드는 평 ukgi-dev.tistory.com 해당 내용은 실행 컨텍스트 학습이 선행되어야한다. 렉시컬 환경의 환경 레코드에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다. 식별자 정보에는 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 함수 선언문, 변수의 식별자 등이 있다. 이렇게 컨텍스트 전체를 쑥 훑으면서 식별자 정보를 순서대로 수집을 한다. 식별자 정보를 수집하는 과정은 아직 코드가 실행되기 전이다. 즉, 자바스..

스코프는 식별자가 유효한 범위를 말한다. function add(x, y) { console.log(x, y); return x + y; } add(2, 5); console.log(x, y); // 참조오류 add 함수의 매개변수인 x,y는 add 함수 내부에서만 유효하다. 유효범위가 add 함수인 것이다. 따라서 add 함수 외부인 전역에서 호출하게 되면 참조 오류가 발생한다. 이것은 유효한 범위에서 호출하지 않았기 때문이다. let x = 'global'; function foo() { let x = 'local'; console.log(x); } foo(); console.log(x); 위의 코드는 local을 먼저 출력하고 그 다음에 global을 출력한다. 자바스크립트 엔진의 입장에서 한 번 ..

이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다. 이벤트 위임을 이해하기 위해서는 이벤트 캡처링과 이벤트 버블링을 이해해야한다. 특히 버블링을 유심히 살펴보자. 이벤트 전파 ul 태그의 두번째 li에 클릭 이벤트가 발생했다. 이벤트가 발생한 DOM 요소를 이벤트 타겟이라고 부른다. 이벤트가 발생하면 DOM 트리를 타고 이벤트 타겟까지 캡쳐링된다.📸 이벤트가 어디서 발생했지? 하면서 DOM 트리를 타고 내려오는 것이다. 그런 다음, 이벤트가 발생한 타겟을 찾았으면 다시 상위 DOM 요소로 이벤트가 올라가는데 이 과정을 버블링이라고 한다.💦 정리하면 이벤트 전파는 캡쳐링 ➡ 타겟 ➡ 버블링의 과정을 거친다. 🚀..