모던 자바스크립트 Deep Dive

요구사항을 분석하여 적절한 자료구조와 함수의 집합으로 변환 후 , 그 흐름을 제어하는 것.프로그래밍 언어가 제공하는 문법을 적절히 사용하여 변수를 통해 값을 저장,참조하고 연산자로 값을 연산,평가하고 조건문과 반복문에 의한 흐름제어로 코드의 실행 순서를 제어하고 함수로

메모리 : 데이터를 저장할 수 있는 메모리셀(1Byte=8bit)의 집합컴퓨터는 1Byte(메모리셀)단위로 데이터를 저장,읽음 메모리셀은 각각 고유한 메모리 주소를 갖음메모리 주소는 메모리 상황에 따라 임의로 결정 -> 항상 다르다메모리 주소를 통한 직접적인 접근은 위

표현식이 평가되어 생성된 결과 변수에는 항상 값이 할당 된다이해할 수 있는 문자, 약속된 기호로 값을 생성하는 표기법 값을 생성하기 위해 약속한 표기법 리터럴 자체가 표현식이다값으로 평가되는 문(statement)표현식이 평가되면 값을 생성하거나 기존값 참조표현식과 표

값의 종류 원시 타입 : 숫자, 문자열, 불리언, null, undefined, 심벌객체 타입 : 객체, 배열, 함수배정밀도 64비트 부동소수점 형식모든 수는 실수로 처리특별한 값 : Infinity,-Infinity, NaN변경 불가능한 값 작은 따옴표, 큰 따옴표,

코드의 실행 순서를 바꾼다코드의 흐름을 이해하기 어렵게 하기 때문에 forEach,map,filter,reduce 같은 고차함수를 사용하고 제어문은 지양한다0개 이상의 문을 { }로 묶는 것자체 종결성을 갖기 때문에 ; 붙이지 않는다if else ( 삼항 연산자로 나타

명시적 타입 변환(타입 캐스팅)암묵적 타입 변환 JS엔진은 표현식을 에러없이 평가하기 위해 피연산자 값을 암묵적 타입 변환하여 새로운 값을 만들어 내고 한번 사용하고 버림코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환한다\+: 피연산자 중 한개라도 문자열이 있

0개 이상의 프로퍼티(객체의 상태를 나타내는 값)로 구성된 집합 프로퍼티 값이 함수인 걸 메서드라고 함객체 리터럴 : { }프로퍼티 키 : 모든 문자열(공백가능), 심벌 값문자열이나 심벌 값 외에 값을 사용하면 암묵적 타입변환으로 문자열로 변환됨 식별자 네이밍 규칙

변경 불가능한 값, 읽기전용 let score = 100;score = 90;변수에 값을 재할당 하면 새로운 메모리 공간을 확보해서 값을 저장 후 변수가 가르키는 메모리 주소가 변경되는 이유가 변경 불가능한 값이기 때문에 = 불변성JS에서 문자열은 원시타입이다. 다른

var 키워드로 선언한 변수는 함수의 코드 블록만을 스코프로 인정var 키워드로 선언한 변수는 변수 호이스팅이 일어남변수 선언문 이전에 참조가능\-> 프로그램 흐름에 맞지 않고, 가독성 저하, 오류 발생할 여지모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프호

자바스크립트 엔진의 내부 로직, 원칙적으로 직접 접근과 호출이 불가일부만 간접적으로 접근할 수 있는 수단이 제공됨자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 자동 정의함프로퍼티 어트리뷰트 : 프로퍼티의 상태를 나타냄프로퍼티 어트리뷰트는 내부 슬롯이다

생성자 함수 : new연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수Date,String,Number,Boolean,Array...동일한 프로퍼티를 갖는 객체를 여러개 선언할 때 일일히 다 코드 작성해야함객체를 생성하기 위한 템플릿처럼 프로퍼티 구조가 동일한 객

일급 객체 4가지 만족 시 일급 객체 무명의 리터럴로 생성 가능 변수나 자료구조에 저장 가능 함수의 매개변수로 전달 가능 함수의 반환값으로 사용 가능 함수 객체의 프로퍼티

독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임객체 : 상태를 나타내는 데이터(데이터 프로퍼티)와, 상태를 조작할 수 있는 동작(메서드)을 하나의 단위로 묶은 자료구조일반적인 생성자 함수로 여러 객체를 만들면 동일한 메서드가 계속 만들어짐이를 프로토타

암묵적 전역x에 1을 할당하기 위해 x를 찾는데 x가 선언이 되어 있지 않다전역 스코프까지 올라와서도 x가 없다암묵적으로 전역 객체에 x를 프로퍼티로 추가strict mode는 문법을 보다 엄격히 적용하여 명시적 에러를 발생시킴'use strict'; 를 코드의 선두에

자바스크립트 객체의 분류 표준 빌트인 객체 ECMAScript 사양에 정의된 객체 전역 객체의 프로퍼티로 제공됨 전역 변수처럼 선언 없이 언제나 참조 가능 호스트 객체 브라우저,Node.js 에서 추가로 제공되는 객체 사용자 정의 객체 사용자가 정의한 객체

전역 코드 : 전역 실행 컨텍스트 생성함수 코드 : 함수 실행 컨텍스트 생성eval 코드 : eval 실행 컨텍스트 생성모듈 코드 : 모듈 실행 컨텍스트 생성소스코드의 평가를 마친 뒤 실행한다평가 : 실행 컨텍스트 생성, 선언문을 먼저 실행해 식별자를 렉시컬 환경의 환

프로토타입 기반의 객체 생성의 새로운 메커니즘클래스는 생성자 함수보다 엄격하고 생성자 함수에서 제공하지 않는 기능도 제공new 연산자 없이 클래스 호출시 에러extends,super 키워드 제공 호이스팅이 발생하지만 발생하지 않는 것처럼 동작 let,const처럼클래스

ES6 이전의 함수는 일반 함수로 호출할 수 도 있고 new 연산자와 함께 생성자 함수로 호출할 수도 있다흔히 메서드로 알고 있는 객체에 바인딩된 함수도 constructor여서 생성자 함수로 호출이 가능하다객체에 바인딩 된 함수가 constructor이면그 함수 객체

여러 개의 값을 순차적으로 나열한 자료구조배열의 각각의 값 : 요소배열에서 값의 위치 : 인덱스배열의 길이 : length 프로퍼티자바스크립트의 배열은 객체 타입이다배열의 생성자 함수는 Array, 프로토타입은 Array.prototype이다배열은 일반 객체와 다르게

숫자,문자열,불리언,객체,null,undefined 6가지 데이터 타입에 이어서ES6에서 도입된 7번째 데이터 타입원시 타입의 값이고 다른 값과 중복되지 않는 유일무이한 값리터럴로 생성 불가, Symbol 함수를 호출해야만 생성 가능생성되는 심벌 값은 외부로 노출되지

ES6 도입값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬...이터러블for ...of 으로 순회가능한 이터러블만 가능Array, String, Map, Set, DOM 컬렉션, arguments스프레드 문법의 결과는 값이 아님 -> 변수 할당 불가함수의 인수 목록

구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당필요한 값만 추출하여 변수에 할당할 때 유용배열은 인덱스 기준으로 순서대로 할당됨변수를 배열 리터럴 형태로 선언해야함변수를 객체 리터럴 형태로 선언배열은 인덱스가 할

중복되지 않는 유일한 값들의 집합객체임Set 생성자 함수로 생성인수로 전달받은 이터러블에서 중복된 값은 제외하고 Set 객체 생성한다Set로 배열 중복 요소 제거 가능Set.prototype.size로 확인size프로퍼티(접근자 프로퍼티)는 setter 함수가 없기 때

파싱 : 프로그래밍 언어의 문법에 맞게 텍스트 문서를 읽어서 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰의 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로

HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API를 제공하는 트리 자료구조 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체가 됨태그사이에 다른 태그가 있을 수 있으므로 각각의 요소들은 중첩관계를 갖을 수 있다요소

p{ margin : 0; border-top : 1px solid # ; } table { border: 1px solid #e5e5e5; border-collapse: collapse; text-a

함수 코드의 평가를 마치고 생성된 함수의 실행 컨텍스트가 실행 컨텍스트 스택에 푸시된다는 것은함수 실행의 시작을 의미함또한 여러개의 함수가 호출된 순서대로 실행되는 것은 호출된 순서대로 해당 함수의 실행 컨텍스트가 만들어지고 실행 컨텍스트 스택에 푸시되기 때문즉 함수의

Asynchronous Javascript and XML브라우저가 자바스크립트를 사용하여 서버에 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식Web API인 XMLHttpRequest 객체를 기반으로 동작

HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐RESTful : REST의 기본 원칙을 성실히 지킨 서비스 디자인REST API : REST를 기반으로 서비스 API를 구현한 것구성 3요소자원 (resource) : 자원을 뜻함, URI

자바스크립트는 비동기 처리를 위해 콜백 패턴을 사용한다하지만 이런 콜백 패턴 방식은 비동기 처리가 여러 개일 때 가독성이 매우 나쁘고, 에러 처리가 곤란하다ES6부터 비동기 처리를 위한 패턴으로 프로미스를 도입비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가

일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위매개변수 : 함수 내부로 입력을 전달받는 변수인수 : 입력반환값 : 출력함수 정의를 통해 생성함수 호출을 통해 명시적으로 함수의 실행을 지시동일한 코드의 중복을 억제 -> 재사용 가능, 코드의 신뢰성 증

애플리케이션을 구성하는 개별적 요소, 재사용 가능한 코드 조각기능을 기준으로 파일 단위로 분리자신만의 파일 스코프를 갖어야함기본적으로 모듈의 리소스는 비공개지만 비공개면 재사용이 불가능하니 의미가 없음 개발 효율성과 유지보수성 향상export : 공개가 필요한 리소스에

함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성자바스크립트 고유의 개념이 아니므로 ECMAScript에 클로저는 없음MDN에서 클로저의 정의 : 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다자바스크립트 엔진은 함수를 어디서 호출했는지가