Map과 Set을 자주 쓰면서 spread syntax와 Array.from 을 쓰다가 iterator가 반복이 끝난, 일명 iterator consumption이라는 현상을 겪게 되었는데, 그 원인을 잘 파악하지 못했다고 생각하여 iterable과 iterator에 대해서 공부 후 기록해둡니다. 이 글에서는 iterator consumption이 왜 발생했는지 풀어나가는 과정에서 알아야 할 것들을 간단히 정리했으며 이터러블(iterable)에 대한 자세한 개념과 원리는 🔗이 글을 참고하면 됩니다. 1. Iteration protocol 먼저 protocol 에 대해서 정리해봅시다. protocol 은컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약입니..
JavaScript
`IntersectionObserverCallback` 함수를 등록하다가 `CusTomEvent`생성자를 사용할 일이 있었습니다. 이벤트 객체와, 커스텀 이벤트 객체에 대해서는 이전에 정확히 몰랐던 내용이라 관련 내용을 정리해두었습니다. 여러 브라우저 이벤트 종류(자주 쓰는 것들) 이벤트(event)는 무엇인가 일어났다는 신호입니다. 모든 DOM 노드는 이런 신호를 만들어 냅니다. 참고로, 이벤트는 DOM에만 한정되지 않습니다. 아래에서는 주로 사용되는 DOM 이벤트를 적어두었습니다. 1. 마우스 이벤트 click 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에서 탭 했을 때) 발생. contextmenu 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생 mouseover / mous..
1. 캡처링과 버블링 [실험하면서 보게 될 현상] 이벤트의 흐름을 간략하게 표시해주셨다. 일단 그런가보다 하고 넘어가자. 1-1. 캡처링 [ 실험할 html 코드 ] event propagation ⚪ 제일 안쪽 input 태그를 하나 눌렀을 뿐인데 그 input태그를 감싸고 있는 태그들의 이벤트 리스너들까지 전부 나오는 모습을 볼 수 있다. 이 때 순서를 잘 보자. 바깥쪽에서 안쪽으로, 즉, 부모로부터 자식방향으로 호출되는 방식을 ✔캡쳐링이라고 부른다. INPUT HTML capturing INPUT BODY capturing INPUT FIELDSET capturing INPUT INPUT target 1-2. 버블링 ⚪ 반대로 각 요소의 ✔ addEventListener 의 인자를 false로 바꾼..
개요 실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 1. 소스 코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드(global code) 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function code) 함수..
TL;DR 변수는 값을 저장하기 위해 확보한 메모리 공간 그 자체를 의미하거나 그 메모리 공간을 식별하기 위해서 붙인 이름이다. 식별자는 메모리 주소에 붙인 이름이다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 값이 담긴 메모리를 가리키는 메모리 주소와 매핑 관계에 있다. 의미상 비슷한 느낌이 강해서 둘이 서로 혼용하는 경우를 많이 볼 수 있다. 1. 변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 값의 위치를 가리키는 상징적인 이름 상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 ..
개요 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 변수뿐만 아니라 모든 식별자가 그렇다. 다시 말해, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 자바스크립트 엔진은 코드를 실행할 때 코드의 문맥을 고려한다. 코드가 어디서 실행되며 주변에 어떤 코드가 있는지에 따라 아래 예제의 ①과 ②처럼 동일한 코드도 다른 결과를 만들어 낸다. var x = 'global'; function foo(){ var x = 'local'; console.log(x); // ① } ..
개요 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. 자바스크립트는 원시 타입인 문자열 타입을 제공한다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 저장된다. 이를 값에 의한 전달(pass by value)이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달(pass by reference)이라 한다. 원시 타..
개요 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 비교 연산자는 if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다. 동등 비교 연산자(==)와 일치 비교 연산자(===)는 이 비교 연산자에 속해있다. 동등 / 일치 비교 연산자 동등 비교(loose equality) 연산자와 일치 비교(strict equality) 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 하지만 비교하는 엄격성의 정도가 다르다. 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다. 비교 연산자 의미 사례 설명 부수효과 == 동등 비교 x == y x와 y의 값이 같음 X === 일치 비교 x === y x와..
모던 자바스크립트 딥 다이브로 공부한 내용입니다. 1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전의 순회 가능한 데이터 컬렉션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for문, for...in문, forEach 메서드 등 다양한 방법으로 순회할 수 있었다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 `for...of문`, `스프레드 문법`, `배열 디스트럭처링(구조분해) 할당`의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토..
참고서 - 모던 자바스크립트 딥 다이브 개요 자바스크립트가 ECMAScript로 표준화된 이래로 자바스크립트에는 6개의 타입 즉, 문자열, 숫자, 불리언, undefined, null, 객체 타입이 있었다. 심벌(Symbol)은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 값의 생성 심벌 값은 Symbol 함수를 호출해서 생성한다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 ..
