prefer2 Log

이벤트 버블링(Event Bubbling) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 이벤트 버블링은 한 요소에서 이벤트가 발생했을 때 해당 이벤트가 이 요소의 상위 요소로 전달되어가는 특성을 말한다. FORM DIV P 위 예제에서 가장 안쪽의 P를 누르게 되면 다음과 같이 작동한다. 에 할당된 onclick 핸들러가 동작( alert('p') ) 바깥의 에 할당된 핸들러가 동작( alert('div') ) 그 바깥의 에 할당된 핸들러가 동작( alert('form') ) document 객체를 만날 때까지, 각 요소에 할당된 onclick..

DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다. DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다. 텍스트 노드는 텍스트 프로퍼티를, 주석 노드는 주석 프로퍼티를 제공한다. 그렇다면 기존에 button에서 addEvnetListner가 어떻게 가능했을까? 이는 각 노드들이 상속 구조를 갖기 때문이다. 모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다. 각 클래스는 다음과 같은 특징을 가진다. EventTarget: 이벤트 관련 기능을 제공하는 클래스. 루트에 있는 ‘추상(abstract)’ 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않는다. EventTarget가 모든 DOM 노드의 베이스..

for of for (variable of iterable) { statement } 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복한다. 컬렉션 전용. const a = ['a', 'b', 'c']; for (const [index, element] of a.entries()) console.log(index, element); // 0 'a' // 1 'b' // 2 'c' 인덱스를 구하기 위해서는 entries() 메서드를 사용해야 한다. 중간에 break 문을 만나면 반복문을 중단한다. forEach arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]..

Syntax obj?.prop obj?.[expr] arr?.[index] func?.(args) ?.은 해당 객체가 nullish 즉, undefined나 null인 경우에 TypeError 대신에 undefined를 얻게 해준다. 기존에 && 연산자를 사용하거나 lodash라이브러리를 사용하는 것보다 편리하다. 프로퍼티, 메서드, 배열 모두 사용이 가능하다. 단, ?.은 할당 연산자 왼쪽에서 사용할 수 없다. 따라서 값을 읽거나 삭제할 때만 사용한다(값 쓰기x). 예시 const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; console.log(adventurer.dog?.name); // undefined console.log(adventure..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 잘 사용하면 코드를 줄일 수 있고, 보기도 좋기 때문에 여러가지 경우를 정리해 보자. 배열 구조 분해 기본 구조 const arr = [1,2,3]; const [x,y,z] = arr; const [a, ,b] = arr; console.log(x,y,x); //1 2 3 console.log(a,b); //1 3 인덱스를 이용해 접근할 필요 없이 원하는 값들을 배열에서 가져올 수 있다. 배열의 순서대로 값을 가져오게 된다. 중간 값을 빼고 받고 싶다면 빈칸으로 놓으면 된다. default값(기본 값) 설정 const arr = [1] const[a=5, b=7] = arr; con..

호이스팅 (Hoisting) “Before run all the code, the browser first get all declarations, hoisting is the name of this process.” scope(스코프) 안에서의 변수 선언을 최상위에서 선언한 것과 동등하다는 의미를 가진다. 즉, 변수가 선언되기 이전에 변수를 사용하면, 변수가 사용된 블럭 범위의 맨 위로 변수를 끌어올린다는 말이다. 호이스팅(Hoisting)은 JavaScript 인터프리터가 코드를 해석할 때 변수 및 함수의 선언 처리, 실제 코드 실행 두 단계로 나눠서 처리하기 때문에 발생하는 현상이다. JavaScript 인터프리터가 내부적으로 코드를 이런 방식으로 처리한다는 것일 뿐, 실제 코드 라인이 변경되거나 하..

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으..

자바스크립트 엔진(Javascript Engine)이란? 자바스크립트 엔진은 자바스크립트 코드를 실행하게 해준다. 엔진은 웹 브라우저 내부 또는 Node.js 안에 구성되어 있다. 엔진의 주요 두 구성요소는 다음과 같다. Memory Heap : 자바스크립트에서 사용되는 메모리 공간. Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳. 자바스크립트 엔진은 단 하나의 호출 스택을 사용한다. 가장 대표적인 자바스크립트 엔진으로는 구글에서 개발한 V8엔진이 있다. 이외에도 SpiderMonkey, Rhino, JavaScriptCore등이 존재한다. 자바스크립트 엔진 파이프라인 (Javascript Engine Pipeline) 자바스크립트 엔진은 전통적인 인터프리터일 수 있고, 특정한 방식으로..

자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 우리가 흔히 사용하는 Array, Maps, Sets 등도 모두 프로토타입을 기반으로 만들어졌다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여, 불필요한 중복을 제거한다. 만약 프로토타입이 없었다면 생성자 함수에 메서드를 넣어 사용하게 되어 엄청난 중복이 일어난다. 하지만 프로토타입을 사용하면 메서드가 오직 한개만 존재하게 된다. // 자바스크립트 프로토타입 기반의 상속 function Greeting(name) { this.name = name //아래 과정은 사용하지 말아야 한다(중복 발생) //this.hello = functio..

일급 객체 다음과 같은 조건을 만족하는 객체를 일급 객체(First-Class Citizen)라고 한다 1. 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할..