Study 9

[모던 자바스크립트 Deep Dive] 46장 ~ 49장

46장 제너레이터와 async/await46.1 제너레이터란?제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.46.2 제너레이터 함수의 정의function* 키워드로 선언, yield 표현식 포함선언문, 표현식, 메서드, 클래스 메서드 형태화살표 함수로 정의 불가new 생성자로 호출 불가46.3 제너레이터 객체일반 함수: 호출 시 코드 블록 실행제너레이터 함수: 호출 시 제너레이터 객체 생성 후 반환제너레이터 객체는 이터러블이면서 동시에 이터레이터Symbol.iteratornext: 호출 시 yield까지 실행하고 { value, done } 객체 반환return:..

[모던 자바스크립트 Deep Dive] 40장 ~ 45장

41장 타이머41.1 호출 스케줄링함수 호출 지연, 반복 예약 가능타이머 함수: 호스트 객체setTimeout: 일정 시간 후 한 번만 실행setInterval: 일정 시간 간격으로 반복 실행자바스크립트는 싱글 스레드로 동작하므로 타이머는 비동기 처리41.2 타이머 함수setTimeout / clearTimeoutconst timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);매개변수설명func타이머가 만료된 뒤 호출될 콜백 함수delay타이머 만료 시간(ms). setTimeout 함수는 delay 시간으로 단 한 번 동작하는 타이머를 생성한다. 인수 전달을 생략한 경우 기본값 0이 지정된다.param1, param2, ...호출 스케줄링된 ..

[모던 자바스크립트 Deep Dive] 36장 ~ 40장

36장 디스트럭처링 할당배열이나 객체에서 값을 추출해 변수에 개별적으로 할당하는 문법이터러블 또는 객체 리터럴에서 필요한 값만 뽑을 때 유용36.1 배열 디스트럭처링 할당기본 문법const [a, b] = [1, 2];인덱스 기준으로 순서대로 할당할당 대상은 반드시 이터러블에러 예시: const [x, y] = {}; // TypeError변수 수와 요소 수의 일치는 필요하지 않음부족 시 undefined, 초과 시 무시기본값 설정 가능const [a, b = 10] = [1]; // a:1, b:10Rest 요소 사용 가능const [x, ...y] = [1, 2, 3]; // x:1, y:[2,3]예시 활용: URL 파싱 시 필요한 값만 추출36.2 객체 디스트럭처링 할당기본 문법const { key..

[모던 자바스크립트 Deep Dive] 31, 32, 35장

31장 RegExp31.1 정규 표현식이란?일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어패턴 매칭 기능: 특정 패턴과 일치하는 문자열 검색, 추출, 치환31.2 정규 표현식의 생성정규 표현식 리터럴 방식표현 방식: /pattern/flags패턴과 플래그로 구성됨const target = 'Is this all there is?';const regexp = /is/i; // 패턴: is, 플래그: i (대소문자 구분 X)regexp.test(target); // trueRegExp 생성자 함수 방식표현 방식: new RegExp(pattern[, flags])문자열로 패턴과 플래그 전달변수를 사용해 동적 생성 가능const target = 'Is this all there is?';..

[모던 자바스크립트 Deep Dive] 26장 ~ 30장

26장 ES6 함수의 추가 기능26.1 함수의 구분(ES6 이전) 모든 함수는 callable이면서 constructor일반 함수, 생성자 함수, 메서드 간 명확한 구분 없음성능 저하와 실수 유발 (모든 함수가 prototype을 가짐)ES6에서의 함수 종류ES6 함수의 구분constructorprototypesuperarguments일반 함수(Normal)OOXO메서드(Method)XXOO화살표 함수(Arrow)XXXX26.2 메서드ES6 메서드: non-constructor (인스턴스 생성 불가)[[HomeObject]]를 가지며 super 사용 가능new로 호출 불가, prototype 없음26.3 화살표 함수화살표 함수 정의함수 정의: 함수 표현식으로 정의해야 함 (함수 선언문 불가)매개변수 선언..

[모던 자바스크립트 Deep Dive] 21장 ~ 25장

21장 빌트인 객체21.1 자바스크립트 객체의 분류표준 빌트인 객체ECMAScript 사양에 정의된 객체, 전역에서 공통 기능 제공실행 환경(브라우저/Node.js)과 관계 없이 언제나 사용 가능Object, String, Number, Array, Promise, JSON 등호스트 객체ECMAScript 사양에는 없지만 실행 환경에서 제공하는 객체브라우저 환경: DOM, BOM, fetch, localStorage 등Node.js 환경: fs, http Node.js 고유 API사용자 정의 객체사용자가 직접 정의한 객체21.2 표준 빌트인 객체생성자 함수 객체Object, String, Number, Boolean, Array 등new 키워드로 인스턴스 생성 가능비생성자 함수 객체Math, JSON, ..

[모던 자바스크립트 Deep Dive] 16장 ~ 20장

16장 프로퍼티 어트리뷰트16.1 내부 슬롯과 내부 메서드ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드직접 접근 불가 (일부만 간접 접근 가능)내부 슬롯: [[Prototype]]__proto__: [[Prototype]] 내부 슬롯에 간접 접근하는 수단16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체자바스크립트 엔진이 프로퍼티 생성 시 자동 정의프로퍼티 어트리뷰트 (직접 접근 불가)값 [[Value]]값 변경 가능 여부 [[Writable]]열거 가능 여부 [[Enumerable]]재정의 가능 여부 [[Configurable]]Object.getOwnPropertyDescriptor프로퍼티 어트리뷰트 간접 확인 가능모든 프로퍼티 정보 한 번에 조회 가능16.3 데이터 프로퍼티와..

[모던 자바스크립트 Deep Dive] 11장 ~ 15장

11장 원시 값과 객체의 비교데이터 타입원시 타입: 숫자, 문자열, 불리언, null, undefined, 심벌객체 타입: 객체원시 타입과 객체 타입의 차이구분원시 타입객체 타입변경 가능성불변변경 가능변수에 저장되는 값원시 값 저장참조 값 저장전달 방식값에 의한 전달참조에 의한 전달원시 값의 특징원시 값은 생성 후 변경 불가능변수의 값 변경 시, 값 자체가 변경되는 것이 아니라 새로운 값이 생성되고 변수의 참조 주소가 바뀜상수(const)는 재할당 불가능한 변수, 원시 값의 불변성과는 다른 개념문자열의 특징과 불변성문자열: 유사 배열 객체, 한 번 생성되면 변경할 수 없는 읽기 전용 값문자열을 수정하려면 새 문자열이 생성되고 메모리 주소가 변경됨값에 의한 전달 (원시 값)원시 값을 갖는 변수를 다른 변수..

[모던 자바스크립트 Deep Dive] 04장 ~ 10장

4장 변수4.1 변수란 무엇인가? 왜 필요한가?변수(variable)값을 저장하고 참조하는 메커니즘값의 위치를 가라키는 이름프로그램은 데이터를 입력받아 처리하고 결과를 처리하는 것이 기본 구조이며, 데이터를 저장하고 재사용하기 위해 변수 필요자바스크립트 엔진은 변수의 값을 메모리에 저장하고 CPU를 통해 연산 수행개발자가 직접 메모리 주소를 다루는 것은 위험하므로, 변수라는 개념을 사용해 데이터를 안전하게 저장하고 참조4.2 식별자식별자(Identifire)변수, 함수, 클래스 등의 고유한 이름값이 저장된 메모리 주소변수명은 사람이 이해하기 쉬운 방식으로 설정되며, 실행 컨텍스트에 등록됨4.3 변수 선언변수 선언 방법var: ES6 이전 방식, 함수 레벨 스코프, 호이스팅 이슈let: 블록 레벨 스코프 ..