전체 글

타이머 함수는 ECMAScript에 정의된 빌트인 함수가 아니지만, 브라우저 환경과 Node.js 환경 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체이다.JS 엔진은 단 하나의 실행 컨텍스트를 가지며, JS 엔진은 싱글 스레드로 동작한다.이런 이유로 타이머 setTimeout과 setInterval은 비동기 방식으로 동작한다.const timerId = setTimeout(() => console.log('Hey'), 1000);clearTimeout(timerId);const timeoutId = setInterval(() => { console.log(count); if (count++ === 5) clearInterval(timeoutId);}, 1000);s..

1. 이벤트 객체이벤트 발생 시 이벤트 객체가 생성된다.생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달하기 때문에, 전달받을 매개변수를 명시적으로 선언해야 하기 때문이다.이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체 또한 생성자 함수에 의해 생성된다.이는 프로토타입 체인의 일원이 된다.Event.prototype에 정의된 이벤트 프로퍼티는 모든 파생 객체에 상속된다.더보기공통 프로퍼티설명타입type이벤트 타입stringtarget이벤트를 발생시킨 DOM 요소DOM 요소 노드currentTarget이벤트 핸들러가 바인딩된 DOM 요소DOM 요소 노드eventPhase이벤트 전파 단계0: 이벤트 없음, 1: 캡처링, 2:..

간단하게 보아서, 브라우저는 다음과 같은 과정으로 렌더링을 수행한다.브라우저가 렌더링에 필요한 리소스를 서버로 요청, 응답을 받는다.브라우저 렌더링 엔진이 응답받은 HTML과 CSS를 파싱해 DOM, CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.브라우저 JS 엔진은 응답된 JS를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행한다. 이때 JS는 DOM API로 DOM, CSSOM을 변경할 수 있다. 변경된 이들은 다시 렌더 트리로 결합된다.최종 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산해 브라우저 화면에 HTML 요소를 페인팅한다.1. 요청과 응답브라우저는 서버에 렌더링에 필요한 요소들을 요청하고 응답받는다.브라우저의 렌더링 엔진은 HTML..

배열이란 여러 개의 값을 순차적으로 나열한 자료구조다. JS에는 배열 타입이 없으며, 배열은 객체 타입이다.1. JS 배열은 배열이 아니다.일반적인 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이다.하나의 데이터 타입으로 통일되어 있으며, 이런 배열을 밀집(dense) 배열이라 한다.JS의 배열은 각각 동일한 메모리 공간을 가지지 않아도 되며, 연속적으로 이어져 있지 않을 수 있다.이러한 배열 요소가 연속적으로 이어져 있지 않은 배열을 희소(sparse) 배열이라 한다. (기본적으로 해시테이블이다.)밀집 배열은 인덱스로 요소에 O(1)로 접근이 가능하나, 삽입 삭제가 효율적이지 않다.대부분 모던 JS 엔진은 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 배열..

함수를 일급 객체로 취급하는 함수형 언어에서 공통적으로 사용되는 중요한 특성이다.클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.함수가 선언된 렉시컬 환경은 뭘까. 이것부터 살펴보자.1. 렉시컬 스코프JS 엔진은 함수를 어디서 호출했는지가 아니라 어디서 정의했는지에 따라 상위 스코프를 결정한다.이를 렉시컬 스코프, 정적 스코프라 한다.실행 컨텍스트에서 살펴봤듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경으로, 이는 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 스코프 체인이다.따라서 “함수의 상위 스코프를 결정”한다는 것은 “렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정"한다는 것과 동치된다. 결국 위 정의는,렉시컬 환경의 “외부 렉시..

실행 컨텍스트, execution context는 JS 동작 원리를 담고 있는 핵심 개념이다. 이를 바르게 이해해야 스코프를 기반으로 식별자와 바인딩된 값을 관리하는 방식, 호이스팅의 발생 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다.1. 소스코드 타입4가지 타입의 소스코드가 존재하며, 각각의 실행 컨텍스트를 생성한다.2. 소스코드의 평가와 실행모든 소스코드는 실행에 앞서 평가를 거친다.평가 과정에서는 실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다. 즉, 런..

1. this 키워드this는 자신이 속한 객체 혹은 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 혹은 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.전역에서의 this - 전역 객체 window일반 함수 내부의 this - 전역 객체 window메서드 내부의 this - 메서드 호출 객체생성자 함수 내부 this - 생성할 인스턴스2. 함수 호출 방식과 this 바인딩중첩 함수, 콜백 함수의 this가 전역 객체를 바인딩하는 것은 문제가 있다. 외부 함수인 메서드와 중첩, 콜백 함수의 this가 일치하지 않게 되지 않겠는가? 이 문제의 해결을 위해 직접 ..

JS는 프로토타입 기반의 OOP 언어이다. JS는 객체 기반의 언어이며 JS를 이루는 거의 모든 것이 객체다.1. 상속과 프로토타입JS는 프로토타입 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 예를 들어,function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; };}const circle1 = new Circle(1);const circle2 = new Circle(2);// Circle 생성자는 인스턴스를 생성할 때 마다 getArea 메서드를 중복 생성한다.// getArea 메서드는 하나만 쓰는것이 바람직하다.console.log(circle1.ge..