모던 자바스크립트 Deep Dive

04장 변수

값 : 식(표현식)이 평가되어 생성된 결과.변수는 하나의 값을 저장한다.리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성한다| value | Type |\| --- \| ----

자바스크립트는 7개의 데이터 타입을 제공하고, 원시타입과 객체타입으로 분류된다.원시타입(변경 불가능한 값) : 숫자타입(숫자), 문자열타입(문자열), 불리언타입(true, false), undefined타입(undefined), null타입(null), 심벌타입객체타입

연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만드는 것.산술 연산자 : 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듬. 산술 연산이 불가능한 경우, NaN을 반환.부수효과 : 피연산자의

제어문 : 조건에 따라 코드 블록을 실행하거나 반복실행 할 때 사용블록문 : 0개 이상의 문을 중괄호로 묶은 것.자바스크립트는 블록문을 하나의 실행 단위로 취급단독으로 사용 가능하지만, 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적블록문의 끝에는 세미콜론

명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것암묵적 타입 변환(타입 강제 변환) : 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환 되는것.암묵/명시적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니고

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.프로퍼티 : 객체의 상태를 나타내는 값메서드 :

원시 타입변경 불가능한 값변수에 할당하면 변수에는 실제 값이 저장값에 의한 전달 (원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달)객체 타입변경 가능한 값변수에 할당하면 변수에는 참조 값이 저장참조에 의한 전달 (객체를 가리키는 변수를 다른

함수는 자바스크립트에서 가장 중요한 핵심 개념 이다. 입력(input)을 받아 출력(output)을 내보내는 일련의 과정을 정의한 것이며, 마치 재료를 투입받아 제품을 생산하는 기계와 같다.함수 : 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로

스코프 : 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언 된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 된다. 즉, 식별자의 유효한 범위를 말한다.var 키워드로 선언한 변수와 let / const 로 선언한 변수의

변수는 자신이 선언된 위치에서 생성되고 소멸한다.전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.변수 선언은 런타임 이전에 먼저 실행 되는데, 이건 전역 변수에 한정된 설명이다

var 키워드로 선언한 변수는 중복 선언이 가능하다.초기화문이 있는 변수 선언문은 var 키워드가 없는 것처럼 동작한다.초기화문이 없는 변수 선언문은 무시한다.var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 함수 외부에서 var 키워

ECMAScript 사양에서 이중 대괄호(\[...])로 감싼 이름들이 내부 슬롯과 내부 메서드다.내부 슬롯과 내부 메서드는 외부로 공개된 객체의 프로퍼티가 아니기 때문에, 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다.일부 내부 슬롯과 내부 메서드에 한

객체 리터럴({...})에 의한 객체 생성 방식은 가장 일반적이고, 간단한 객체 생성 방식이다.new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.생성자 함

일급 객체의 조건1\. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.2\. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.3\. 함수의 매개변수에 전달할 수 있다.4\. 함수의 반환값으로 사용할 수 있다.자바스크립트 함수는 위의 조건을 모두 만

객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조. 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조.객체의 상태 : 프로퍼티동작 : 메서드객체지향 프로그래밍 : 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러

위의 코드에서 x의 값을 찾기 위해서, x변수가 어디에 선언되었는지 스코프 체인을 통해 검색하기 시작한다.foo 함수 스코프에서 찾지 못하였기 때문에, 상위 스코프인 전역 스코프에서 검색을 한다.전역 스코프에서도 선언된 것을 찾을 수 없기 때문에 ReferenceErr

표준 빌트인 객체 : ECMAScript 사양에 정의된 객체. 애플리케이션 전역의 공통 기능 제공. 자바스크립트 실행 환경과 관계 없이 언제나 사용할 수 있음. 전역 객체의 프로퍼티로서 제공되며, 별도의 선언 없이 전역 변수처럼 언제나 참조 가능.호스트 객체 : ECM

this는 자신이 속한 객체 또는 자신이 생선한 인스턴스를 가리키는 자기 참조 변수다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.함수를 호출하면 arguments 객체와 this가 암묵적으로 전달되고, this도

자바스크립트의 동작 원리를 담고 있는 핵심 개념ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다.4가지 타입의 소스코드는 실행 컨텍스트를 생성한다전역 코드 : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 되지 않음.함수 코

클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다.렉시컬 스코프 : 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정함.렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참

자바스크립트는 프로토타입 기반 객체지향 언어다.프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체 지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.하지만, 클래스 기반 언어에 익숙한 프로그

ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.ES6 이전의 모든 함수는 callable 이면서 construcot다. 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor다.ES6 이전

배열은 여러 개의 값을 순차적으로 나열한 자료구조다.자바스크립트의 모든 값은 배열의 요소가 될 수 있다.배열의 요소는 배열에서 자신으 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다.배열은 배열의 길이를 나타내는 length 프로퍼티를 갖는다.인덱스와 length를

표준 빌트인 Number 객체는 생성자 함수 객체다.new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다.Number 생성자 함수를 호출하면 \[NumberData] 내부 슬롯에 인수를 할당해 Number 래퍼 객체를 생성한다.인수를 전달하지 않으면,

원주율 PI 값을 반환한다.인수로 전달된 숫자의 절대값을 반환한다.절대값은 반드시 0 또는 양수이어야 한다.인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다.인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다.인수로 전달된 숫자의 소수점 이하를 내림한

날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다.UTC는 국제 표준시이고, KST는 UTC에 9시간을 더한 시간이다.현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다.1970년 1월 1일 00:00:00(UTC)을 기점으

정규 표현식 : 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어.자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.문자열을 대상으로 패턴 매칭 기능을 제공한다.패턴 매칭 기능 : 특정 패턴과 일치하는 문자열

String 객체는 생성자 함수 객체다.String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 \[StringData] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다.String 생성자 함수를 new 연산자와 함께 호출 하면

심벌 : ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다.주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다.심벌 값은 Symbol 함수를 호출하여 생성한다.다른 데이터 타입과 다르게 리터럴 표기법으로 생성할 수 없다.이

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.ES6 이전에는 순회가능한 데이터 컬렉션(배열, 문자열, 유사배열객체, DOM 컬렉션 등)은 for문, for...in문

ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM컬렉션, arguments 와 같이 for...of 문으로

디스트럭처링 할당 : 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당 하는 것배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출

Set 객체는 중복되지 않는 유일한 값들의 집합이다.Set은동일한 값을 중복하여 포함할 수 없다요소 순서에 의미가 없다인덱스로 요소에 접근할 수 없다Set 객체는 Set 생성자 함수로 생성한다.Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이

브라우저는 다음과 같은 과정을 거처 렌더링을 수행한다.1\. 브라우저는 HTML, CSS, JS, IMAGE, FONT 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다2\. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과

DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킨다.애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.이벤트가 발생했을 때 호출될

호출 스케줄링 : 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것.setTimeout과 setInterval 함수는 ECMAScript 사양에 정의된 빌트인 객체가 아닌, 호스트 객체다.자바스크립트 엔진은 싱글 스레드로 동작하

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 콜스택(실행 컨텍스트)에 푸시되고 함수 코드가 실행 되고, 함수 코드의 실행이 종료 되면 팝되어 제거 된다.함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다.자바스

Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.Aj

REST는 HTTP를 기반으로 클라이어트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다.REST API는 자원, 행위, 표현의 3가지 요소로 구성된다.자원 : 자원 / URI행위 : 자원

비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를

코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수다.제너레이터와 일반 함수의 차이제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출

에러가 발생하지 않는 코드를 작성하는 것은 불가능하다.발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.try ... catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.try ...

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.일반적으로 기능을 기준으로 파일 단위로 분리하고, 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.다만, 애플리케이션과 완전히 불리되어 개별적으로 존재하는 모듈은 재