KassyLog

Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블..

cosnt foo = () => {}; cosnt bar = () => {}; foo(); bar(); 다음 예제의 foo 함수와 bar 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. 함수가 실행되려면 함수 코드 평가과정에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야한다. 다시 말해, 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출 된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 ..

브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소와 노드 객체 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM 트리라고 부르기도 한다. 노드 객체의 상속 구조 DOM은 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. DOM을 구성하는 노드 객체는 브라우저 환경에서 제공..

지난 면접에서 '리플로우와 리페인트의 차이점'에 대해서 질문을 받은적이 있다. 마침 지난 포스팅 브라우저 렌더링 과정에서 언급했던 기억이 있어서 반가웠지만, 입이 떨어지지 않았다. 왜냐면, 난 잘 모르니까..! 그런 이유로 리플로우와 리페인트에 대해 작성해보고자 한다. 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상(모든 노드) ) 수치를 다시 계산하여(Recalculate), 렌더 트리를 재생성하는 과정이며 또한, Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint 라 한다. Reflow Reflow는 렌더링 엔진에서 요소를 배치하는 과정을 의미한다. 렌더 트리 구축 단계에서 DOM 트리..

대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS 를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다. 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. ..

표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. Date 생성자 함수 new Date() Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date객체를 반환한다. Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖지만 Date객체를 콘솔에 출력하면 기본적으로 날짜와 시간 정보를 출력한다. Date 생성자 함수를 new 연산자 없이 호출하면 Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열을 반환한다. new Date(milliseconds) Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 밀리초만큼 ..

표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다. Math는 생성자 함수가 아니다. 따라서 Math는 정적 프로퍼티와 정적 메서드만 제공한다. Math 프로퍼티 Math.PI 원주율 PI값(3.141592653589793)을 반환한다. Math 프로퍼티 Math.abs 인수로 전달된 숫자의 절대값을 반환한다. Math.round 인수로 던달된 숫자의 소수점 이하르 ㄹ반올림한 정수를 반환한다. Math.ceil 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다. Math.floor 인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환한다. Math.sqrt 인수로 전달된 숫자의 제곱근을 반환한다. Math.random 임의의 난수를 반환한다. Math.po..

Number 객체는 생성자 함수 객체다. Number 프로퍼티 Number.EPSILON ES6에서 도입된 이 프로퍼티는 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이와 같다. (2.2204460492503130808472633361816E-16.) Number.MAX_VALUE 자바스크립트에서 표현할 수 있는 가장 큰 양수 값이다. Number.MAX_VALUE보다 큰 숫자는 Infinity다. Number.MIN_VALUE 자바스크립트에서 표현할 수 있는 가장 작은 양수 값이다. Number.MIN_VALUE보다 작은 숫자는 0이다. Number.MAX_SAFE_INTEGER 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수 값이다. Number.MIN_SAFE_INTEGER 자바스크립트..