Modern Javascript Deep Dive

프로그래밍자바스크립트란?자바스크립트 개발 환경과 실행 방법변수표현식과 문데이터 타입연산자제어문타입 변환과 단축 평가객체 리터럴원시 값과 객체의 비교함수스코프전역 변수의 문제점let, const 키워드와 블록 레벨 스코프프로퍼티 어트리뷰트생성자 함수에 의한 객체 생성함수

프로그래밍 언어를 사용하여 컴퓨터에게 동작을 요구하는 일종의 커뮤니케이션문제 해결 능력 -> Computational thinking(컴퓨팅 사고)사람: 프로그래밍 언어구문(syntax)와 의미(semantics)의 조합컴파일러(compiler) / 인터프리터(inte

ECMAScript: 크로스 브라우징 이슈로 인해 비영리 표준화 기구 ECMA의 자바스크립트 표준화 출시ECMAScript 버전별 특징ES1(1997): 초판ES5(2009): HTML5와 함께 출현한 표준안, JSON, 향상된 배열 조작 기능(forEach, map,

모든 브라우저와 Node.js는 자바스크립트 엔진을 내장하고 있음브라우저와 Node.js는 용도가 다르기 때문에 ECMANScript 이외에 추가 기능은 호환되지 않음브라우저는 DOM, BOM, Canvas, XMLHttpRequest, fetch, SVG 등 클라이언

4. 변수 4.1. 변수란 무엇인가? 왜 필요한가? 애플리케이션은 데이터를 입력받아 처리하고 그 결과를 출력하는 데이터 관리가 핵심 개념 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 각 셀은 고

5.1. 값 값(value)은 식(표현식, expression)이 평가(evaludate)되어 생성된 결과 평가란 식을 해석해서 값을 생성하거나 참조하는 것 변수에 할당되는 것은 식이 아니라 평가된 결과인 값 ex) var sum = 10 + 20 -> sum에는

데이터 타입(data type): 값의 종류원시 타입(primitive type): number, string, boolean, undefined, null, symbol객체 타입(object/reference type): 객체, 함수, 배열 등배정밀도 64비트 부동소

연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 논리, 비교 등을 수행해 하나의 값을 만듦연산 대상을 피연산자라고 함산술 연산자는 피연산자를 수학적으로 계산하여 새로운 숫자 값을 만듦2개의 피연산자 산술 연산, 항상 새로운 값 생성\+, -, \

조건에 따라 코드 블록을 실행하거나(조건문) 반복 실행(반복문) 할 때 사용블록문은 0개 이상의 문을 중괄호로 묶음, 코드 블록 또는 블록이라고도 함블록문을 하나의 실행 단위로 취급일반적으로 제어문이나 함수를 정의할 때 사용함자체 종결성을 갖기 때문에 세미콜론 생략주어

명시적 타입 변환 / 타입 캐스팅: 개발자가 의도적으로 값의 타입을 변환함Number, toString() 등암묵적 타입 변환 / 타입 강제 변환: 자바스크립트 엔진에 의해 자동 변환됨타입 변환이란 기존 원시 값을 이용해 새로운 원시 값을 생성함'+' 연산자는 피연산자

10.1. 객체란? 자바스크립트는 객체(object) 기반의 언어, 거의 모든 것이 객체로 이뤄짐 원시 값을 제외한 나머지(함수, 배열, 정규 표현식 등)는 모두 객체 원시 타입은 변경 불가능한 값이지만, 객체 타입의 값은 변경 가능한 값 객체 타입(object t

원시 타입과 객체 타입의 차이점원시 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값변수(= 확보된 메모리 공간) 할당하면 원시 값은 실제 값을, 객체는 참조 값을 저장함변수 값을 다른 변수에 할당하면 원시 값은 복사되어 전달(값에 의한 전달), 객체는 참조 값이

12.1. 함수란? 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고, 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 매개 변수(parameter): 입력을 전달받는 변수 인수(argument): 입력 반환 값(return va

스코프(scope, 유효범위): 식별자가 유효한 범위모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 범위가 결정됨키워드(var, let, const)에 따라 다르게 동작자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙, 네임스페이스코드는

변수는 선언으로 생성되고 할당을 통해 값을 갖고, 소멸되는 생명 주기(life cycle)가 있음자신이 선언된 위치에서 생성되고 소멸함변수 호이스팅은 전역 변수에 한정지역 변수의 생명 주기는 함수 생명 주기와 일치함지역 변수는 해당 변수가 속한 코드 블록이 실행될 때

var 키워드 변수는 중복 선언 가능초기화 변수 선언문은 이전 var 키워드를 무시하고 에러도 발생하지 않음중복 이름을 모르고 선언하는 경우 데이터 부작용 발생var 키워드 변수는 함수 코드 블록만을 지역 스코프로 인정함함수 외에 선언한 경우 모두 전역 변수가 됨for

16.1. 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)

생성자 함수(constructor): new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수new Object() 생성자 함수: 빈 객체 생성 후 프로퍼티 또는 메서드 추가Object, String, Number, Boolean, Function, Array,

일급 객체 조건무명의 리터럴, 런타임에 생성 가능변수나 자료구조(객체, 배열 등)에 저장 가능함수의 매개변수로 전달 가능함수의 반환값으로 사용 가능자바스크립트의 함수는 일급 객체 -> 함수를 객체와 동일하게 사용할 수 있다는 의미값을 사용할 수 있는 곳(변수 할당문,

19. 프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 자바스크립트는 객체 기반의 프로그래밍 언어 원시 타입을 제외한 나머지 거의 모든 것이 '객체 클래스(class) ES6에서 도입된 클래스

암묵적 전역: 선언되지 않은 변수를 사용할 경우 자바스크립트 엔진에서 동적으로 전역 객채로 생성함strict mode (엄격 모드) : 이러한 에러 발생 등을 보완하기 위해 ES5부터 도입ESLint 정적 분석 도구소스코드를 실행하기 전에 스캔하여 문법적, 잠재적 오류

표준 빌트인 객체ECMAScript 사양에 정의된 객체애플리케이션 전역의 공통 기능 제공자바스크립트 실행 환경 (브라우저 또는 Node.js) 무관하게 사용전역 객체의 프로퍼티로서 제공별도의 선언 없이 전역 변수처럼 사용호스트 객체자바스크립트 실행 환경 (브라우저 환경

22.1. this 키워드 객체의 메서드는 자신이 속한 객체와 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 함 자신이 속한 객체를 가리키는 식별자 참조하여 프로퍼티를 참조 객체 리터럴 방식으로 생성한 객체 메서드 내부에서 자신이 속한 객체를 가리키는 식별

전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성함전역 실행 컨텍스트 생성지역 스코프를 생성하고, 전역 스코프에서 시작하는 스코프 체인으로 연결해야 함함수 실행 컨텍스트 생성strict mode에서 자신만의 독자적인 스코프 생성eval 실행 컨텍스트 생성모

함수를 일급 객체로 취급하는 함수형 프로그래밍 언어의 중요한 특성cf. 하스켈(Haskell), 리스프(Lisp), 스칼라(Scala) 등(MDN) 함수와 그 함수가 선언된 렉시컬 환경과의 조합외부 함수 내부에서 중첩 함수를 정의하고 호출하면 외부 함수의 변수에 접근

25.1. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어 클래스 없이도 생성자 함수와 프로토타입을 통해 상속 구현 가능 ES6 클래스 도입 기존 프로토타입 기반 패턴 -> 클래스 기반 패턴으로 사용 문법적 설탕 (synt

ES6 이전 함수는 일반 함수(callable) + 생성자 함수(constructor)문법상 객체에 바인딩된 함수를 생성자 함수로 호출 가능불필요한 프로토타입 객체 생성 및 성능 저하ES6 사용 목적에 따라 종류 구분일반 함수(함수 선언문, 함수 표현식): constr

27.1. 배열이란? 여러 개의 값을 순차적으로 나열한 자료 구조 요소 (element): 배열이 가지고 있는 값 자바스크립트의 모든 값을 배열의 요소가 될 수 있음 index (인덱스): 요소는 자신의 위치를 나타내는 0 이상의 정수를 가짐 length 프로퍼티:

28.1. Number 생성자 함수 28.2. Number 프로퍼티 28.2.1. Number.EPSILON 28.2.2. Number.MAX_VALUE 28.2.3. Number.MIN_VALUE 28.2.4. Number.MAXSAFEINTEGER 28.2.5.

수학적인 상수와 함수를 위한 프로퍼티 및 메서드 제공생성자 함수가 아님정적 프로퍼티와 메서드만 제공원주율 PI 값 반환전달된 인수의 절대값 반환반드시 0 또는 양수전달된 인수를 반올림한 정수 반환전달된 인수를 올림한 정수 반환전달된 인수를 내림한 정수 반환전달된 인수의

30.1. Date 생성자 함수 30.1.1. new Date() 30.1.2. new Date(milliseconds) 30.1.3. new Date(dataString) 30.1.4. new Date(year, month[, day, hour, minute, sec

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하는 형식 언어문자열 대상으로 패턴 매칭 기능 제공특정 패턴과 일치하는 문자열 검색 또는 추출하는 기능유효성 검사반복문과 조건문 없이 패턴 정의하여 테스트 가능/ : 시작 및 종료 기호regexp : 패턴(patte

표준 빌트인 생성자 함수 객체new 연산자와 함께 호출하여 String 인스턴스 생성인수를 전달하지 않으면 \[StringData] 내부 슬롯을 가진 래퍼 객체 생성문자열이 아닌 값을 전달하면 강제 변환하여 생성유사 배열 객체이면서 이터러블인덱스로 접근 가능하지만 값은

ES6에서 도입된 7번째 데이터 타입변경 불가능한 원시 타입다른 값과 중복되지 않는 유일무이한 값, 유일한 프로퍼티 키를 만들기 위해 사용빈 문자열을 포함하는 모든 문자열 또는 심벌 값을 프로퍼티 키로 사용할 수 있음리터럴 표기법 사용 불가, new 연산자 없음Symb

ES6 도입된 이터레이션 프로토콜: 순회 가능한 데이터 컬렉션(자료 구조)을 위한 규칙for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용하도록 일원화이터러블 프로토콜 (iterable)Symbol.iterator를 프로퍼티 키로 사용하거나

... : ES6 도입된 스프레드 문법 (전개 문법, spread syntax)하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듦for ... of 문으로 순회할 수 있는 이터러블 한정Array, String, Map, Set, DOM 컬렉션 (

디스트럭처링 할당 (destructuring assignment, 구조 분해 할당)구조화된 배열과 같은 이터러블 또는 객체를 비구조화(구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것이터러블 또는 객체에서 필요한 값만 추출하는 경우 유용ES6 배열 디스트럭처링

Set : 중복되지 않는 유일한 값들의 집합배열과의 차이점동일한 값을 중복하여 포함할 수 없음요소 순서 무관인덱스로 접근 불가Set 생성자 함수로 생성 가능이터러블을 인수로 전달 받음인수를 전달하지 않으면 빈 Set 객체 생성중복된 값은 요소로 저장하지 않음배열에서 중

웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행파싱 (parsing, 구문 분석)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 토근으로 분해하고, 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 일련의 과

39. DOM DOM (Document Object Model) HTML 문서의 계층적 구조와 정보를 표현함 이를 제어할 수 있는 프로퍼티와 메서드(API)를 제공하는 트리 자료구조 39.1. 노드 39.1.1. HTML 요소와 노드 객체 HTML 요소: HT

40.1. 이벤트 드리븐 프로그래밍 이벤트 핸들러 (event handler) : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러(함수) 호출 위임 이벤트 드리븐 프로그래밍 (event-driven program

호출 스케줄링 (scheduling a call) : 함수 호출 예약, 타이머 함수 사용타이머 함수는 호스트 객체ECMAScript 빌트인 함수가 아님자바스크립트 엔진은 싱글 스레드이므로 타이머 함수는 비동기 처리 방식으로 동작함setTimeout(func|code\[

함수의 실행 순서는 실행 컨텍스트 스택으로 관리함자바스크립트 엔진은 단 하나의 실행 컨텍스트를 가짐한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 (single thread) 방식시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업 중단) 발생동기

43.1. Ajax란? 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여, 웹페이지를 동적으로 갱신하는 프로그래밍 방식 Web API XMLHttpRequest 객체 기반으로 동작 XMLHttpRequest : HTTP 비동기 통

REST : HTTP 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST API : REST 기반으로 서비스 API 구현RESTful : REST의 기본 원칙을 잘 구현해낸 서비스 디자인자원 (Resource) : 자원표현 방법: URI (엔드

45.1. 콜백 패턴의 단점 45.1.1. 콜백 헬 45.1.2. 에러 처리의 한계 45.2. 프로미스 생성 45.3. 프로미스 후속 처리 메서드 45.3.1. Promise.prototype.then 45.3.1. Promise.prototype.catch 45.

46.1. 제너레이터란? 제너레이터(generator): ES6 도입 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 일반 함수와의 차이점 함수 호출자에게 함수 실행의 제어권 양도 가능 함수 코드를 일괄 실행하는 일반 함수와

에러는 언제나 발생할 수 있음에러나 예외 상황을 처리하지 않고 방치하는 경우 프로그램은 강제 종료됨try...catch 문과 같은 대응 코드를 작성하는 것이 중요함기본적인 에러 처리 구현 방법querySelector 또는 Array - 2. 에러 처리(error ha

모듈 (module): 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각일반적으로 기능을 기준으로 하여 파일 단위로 분리모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가짐파일 스코프는 캡슐화 되