❓DOM이란 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM을 생성하고, 렌더트리로 결합된다. 이 때 생성된 DOM은 HTML을 파싱한 결과물이고, HTML의 모든 요소가 노드 객체로 변환되어 객체들을 트리구조로 구성한 것을 DOM이라고 한다. 1️⃣ HTML 요소와 노드 객체 DOM은 HTML의 모든 요소가 노드 객체로 변환되어 트리구조를 이루는 것이라고 설명했고, HTML의 요소들은 위와 같이 구성되어 있다. 이 때 시작 태그와 종료 태그 사이에는 텍스트 뿐만 아니라 다른 HTML 요소도 포함될 수 있고 따라서 HTML 요소 간에는 중첩 관계를 통한 계층적인 부자 관계가 형성된다. apple grape tomato 다음과 같은 HTML 파일이 존재한다고..
❓이터러블이란 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전에는 순회 가능한 자료구조인 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등의 순회는 for문, forEach, for in 문 등이 담당했다. 하지만 ES6에서는 순회 가능한 자료구조를 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for of 문, 스프레드 문법, 배열 디스트럭처링 할당을 사용할 수 있도록 했다. 1️⃣ 이터러블 프로토콜, 이터레이터 프로토콜 이터러블 프로토콜을 준수하는 객체를 이터러블 이라하고, 이터레이터 프로토콜을 준수하는 객체를 이터레이터라고 한다. 그렇다면 각각의 프로토콜은 무엇을 의미할까? 동일하게 ES6에서 추..
❓클래스란 자바스크립트는 프로토타입 기반으로 객체지향 프로그래밍을 구현한다. 따라서 클래스 없이도 자바스크립트는 객체지향 언어의 상속을 구현하는 것이 가능하다. 하지만 ES6에서 기존 다른 언어에서 객체지향 프로그래밍을 구현하기 위해 클래스를 사용한 것처럼 자바스크립트에도 클래스가 도입되었다. 1️⃣ 클래스 문법 클래스 정의 클래스는 class 키워드를 사용하여 정의하고, 생성자 함수처럼 파스칼 케이스를 사용하는 것이 일반적이다. (파스칼 케이스를 사용하지 않아도 에러가 발생하지는 않는다.) 클래스 몸체에서 정의할 수 있는 3가지 메서드에 대해서도 알아보도록 하자. class User {}// 클래스 선언문 const User = class {}// 익명 클래스 표현식 const User = class ..
❓클로저란 일반적으로 클로저는 함수와 해당 함수가 정의되어 있는 렉시컬 환경과의 조합을 의미한다. 하지만 클로저의 본질에 부합하기 위해서는 생명 주기가 종료된 외부 함수의 변수를 참조할 수 있어야 한다. 클로저는 스코프, 실행 컨텍스트와 밀접한 관련이 있기 때문에 이전에 정리해두었던 스코프, 실행 컨텍스트 포스팅을 먼저 참고했으면 한다. 1️⃣ 클로저와 렉시컬 환경 const name = "Lee"; function outer() { const name = "Kim"; function inner() { console.log(`Hi! ${name}`); } return inner; } const closure = outer(); closure();// ? 위의 예시를 통해 클로저의 동작 방식에 대해서 설명..
❓실행 컨텍스트란 실행 컨텍스트는 자바스크립트가 동작하기위해 필요한 환경으로, 모든 코드는 실행 컨텍스트를 통해서 실행되고 관리된다. 지난 포스팅에서 알아보았던 스코프, this 또한 모두 실행 컨텍스트 내에서 관리되고 코드의 실행 순서는 실행 컨텍스트 스택에 의해서 관리된다. 1️⃣ 소스코드의 평가와 실행 실행 컨텍스트에 대해서 알아보기 전에 소스코드가 동작하는 과정에 대해서 알아보자. 모든 소스코드는 평가와 실행과정으로 나뉜다. 각각 소스코드 평가와 소스코드 실행은 다음과 같은 역할을 담당한다. 🔘 소스코드 평가: 실행 컨텍스트 생성하고 선언문을 먼저 실행하여 변수 또는 함수 식별자를 생성된 실행 컨텍스트가 관리하는 스코프에 등록 🔘 소스코드 실행: 선언문을 제외한 소스코드가 순차적으로 실행. 즉, ..
❓this란 this는 자기 참조 변수를 의미하는 식별자이고, this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키며 해당 프로퍼티 또는 메서드를 참조하는 것이 가능하다. 간단한 예제를 먼저 보자. console.log(this)// window 브라우저 환경에서 위의 코드를 입력하면 this는 전역 객체인 window를 참조한다. 그렇다면 this는 전역객체만을 가리키냐? 그건 아니다. const user = { name: "kim", getName() { return this.name; } } console.log(user.getName())// kim 객체 리터럴에서는 this가 자신이 속한 객체를 바인딩 하는 것을 알 수 있다. function User(name) { this.name..
❓빌트인 객체란 일단 빌트인(built in)의 사전적 정의는 "내장"이다. 그렇다면 빌트인 객체는 내장되어 있는 객체라고 이해할 수 있을텐데, 실제로 빌트인 객체는 자바스크립트에서 기본적으로 제공하는 객체를 의미한다. 그렇다면 빌트인 객체의 종류로는 어떤 것들이 존재할까? 그 이전에 자바스크립트에서의 객체 구분에 대해서 알아보자. 1️⃣ 표준 빌트인 객체: 위에서 설명한 자바스크립트에서 기본적으로 제공하는 객체로 ECMAScript 사양에 정의되어 있는 객체이기 때문에 자바스크립트의 실행환경 즉, 브라우저든 node.js든 상관없이 언제나 사용이 가능하다. 표준 빌트인 객체는 전역 객체의 프로퍼티로 제공된다. 2️⃣ 호스트 객체: 표준 빌트인 객체가 실행환경에 상관없이 제공되는 객체라면 호스트 객체는 ..
❓프로토타입이란 자바스크립트는 원시값을 제외한 거의 모든 것이 객체라는 사실은 들어봤을 것이다. 프로토타입은 자바스크립트에서 객체지향을 구현하는데 중요한 매커니즘으로 객체간의 상속을 위해 사용되는 개념이다. 다음 코드를 살펴보자. function Fruit(num) { this.num = num this.price = function () { return this.num * 500 } } const fruit1 = new Fruit(10) const fruit2 = new Fruit(20) Fruit 생성자 함수를 통해 생성된 인스턴스들은 모두 각각 num과, price라는 프로퍼티를 갖는다. 하지만 살펴보면 각각의 인스턴스가 다른 num을 가지는 것은 문제가 없지만, price 메서드는 각 인스턴스가 ..
