개발여행의 블로그

모던 자바스크립트 deep dive를 공부하면서 정리한 글입니다. Reference - 모던 자바스크립트 deep dive 인터넷 주소창에 URL을 입력했을 때 사용자가 web 페이지를 보기까지 어떤 과정을 거치는가? 먼저, 간단하게 렌더링 과정을 정리해보면 아래와 같다. 1. 브라우저가 HTML, JavaScript, CSS, image, font file 등의 리소스를 서버로 요청하고 응답받기 2. 브라우저의 렌더링을 담당하는 엔진은 응답 받은 HTML과 CSS를 parsing하여 DOM(document obeject model)과 CSSOM(css object model)을 생성 3. DOM와 CSSOM을 결합하여 Render Tree 생성 4. 브라우저의 자바스크립트 엔진은 응답 받은 JavaSc..

지난 포스팅에서 iterble과 the iterable protocol 그리고 iterator와 the iterator protocol에 대해 알아보았다. https://developerntraveler.tistory.com/135 [JavaScript] 왜 Object(객체)는 Iterable object가 아닌것일까? 콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이 developerntraveler.tistory.com 이번 포스팅에서는 the iteration protocols의 예시를 살펴볼 것이다. String은 built-i..

콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이란? iteration protocol을 따르는 객체를 iterable이라고 한다. 쉽게 말하면 iterable은 배열을 일반화한 object인 것이다. '반복 가능한'이라는 의미의 iterable을 풀어서 생각해보면, 반복 가능한 객체가 iterable object가 되는 것이다. 예를 들어, 배열, 문자열 등이 iterable이다. 그럼 여기서 Iteration protocol 은 무엇인가? 먼저 protocol에 대해 정리해보자! 컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이..

이 글은 '모던 자바스크립트 Deep Dive' 내용을 발췌한 글입니다. 논리 연산자를 사용한 단축 평가 논리곱(&&) 또는 논리합(||) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가 논리곱 (&&) 연산자 > 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환 > 논리곱 연산자는 좌항에서 우항으로 평가가 진행 'One' && 'Two' 첫 번째 피연산자 'One'은 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해야 위 표현식을 평가할 수 있다. 즉, 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자..

✅ for ... of The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. for of 문은 iterable을 순회하면서 iterable의 요소를 변수에 할당한다. 내부적으로 it..

이 글은 '모던 자바스크립트 Deep Dive'를 공부하고 정리한 내용입니다. 실행 컨텍스트는 JavaScript 동작 원리를 담고 있는 핵심 개념이다. JavaScript가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, task queue와 함께 동작하는 이벤트 핸들러와 비동기 처리 동작 방식을 이해하기 위해 실행 컨텍스트가 중요하기 때문에 정리하고 넘어가려고 한다. ECMAScript는 소스코드를 4가지 타입으로 구분하는데, 이 소스코드는 실행 컨텍스트를 생성한다.(소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문에 구분한다.) 1️⃣전역 코드(global code) > 전역에 존재하는 ..