본문 바로가기

Study/Javascript

 (44)
모던 자바스크립트 Deep Dive 41장 타이머 41.1 호출 스케줄링함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링(scheduling a call)이라 한다. 타이머를 생성할 수 있는 타이머 함수 : setTimeout, setInterval타이머를 제거할 수 있는 타이머 함수 : clearTimeout, clearInterval 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다. 하지만 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖지 때문에 두 가지..
모던 자바스크립트 Deep Dive 38장 브라우저의 렌더링 과정 파싱(문구 분석: syntax analysis)파싱은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석: exical analysis)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리(parse tree/syntax tree)를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어(intermediate code)인 바이트코드(bytecode)를 생성하고 실행한다.렌더링(rendering)렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시작적으로 출력하는 것을 말한다.(이미지) 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다..
모던 자바스크립트 Deep Dive 36장 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.   36.1 배열 디스트럭처링 할당ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다.const arr = [1, 2, 3];// ES6 배열 디스트럭처링 할당// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.// ..
모던 자바스크립트 Deep Dive 35장 스프레드 문법 ES5에서 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, COM 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정된다. // 스프레드 문법의 결과는 값이 아니다.const list = ...[1, 2, 3]; // SyntaxError: Unexpected token ... 이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.함수 호출문의 인수 ..
모던 자바스크립트 Deep Dive 34장 이터러블 34.1 이터레이션 프로토콜ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다.이터러블 프로토콜Well-known Symbol 인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러한 규..
모던 자바스크립트 Deep Dive 33장 7번째 데이터 타입 Symbol 33.1 심벌이란?심벌은 ES6에 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 출돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이다.    33.2 심벌 값의 생성 33.2.1 Symbol 함수심벌 값은 Symbol 함수를 호출하여 생성한다. (다른 원시값, 즉 문자열, 숫자, 불리언, undefined, null 타입의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심벌 값은 Symbol 함수를 호출하여 생성해야 한다.) 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지..
모던 자바스크립트 Deep Dive 32장 String 32.1 String 생성자 함수표준 빌트인 객체인 String 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성한다.const strObj = new String('Lee');console.log(strObj);// String {0: "L", 1: "e", 2: "e", length: 3, [[PrimitiveValue]]: "Lee"} String 래퍼 객체는 배열과 마찬가지로 length 프로퍼티와 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로, 각 ..
모던 자바스크립트 Deep Dive 31장 RegExp 31.1 정규 표현식이란?정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)다. 정규 표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 어어와 코 에디터에 내장되어 있다.  정규 표현식은 문자열을 대사으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.   31.2 정규 표현식의 생성정규 표현식 객체(RegExp)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 일반적인 방법은 정규 표현식 리터럴을 사용하는 것이다. (이미지) 이처럼 정규 표현식 리터럴은 패턴과 플래그로 구성된다.const target = '..

티스토리툴바