모던자바스크립트딥다이브 읽기

1. 프로그래밍 1.1 프로그래밍이란? 컴퓨터에게 정확하고 상세하게 요구사항을 설명하는 작업 이 때 요구되는 것이 문제해결방안, 그리고 컴퓨터가 이해할 수 있게 정확하게 설명하는 것. (컴퓨팅 사고) 1.2 프로그래밍 언어 문제해결방안은 컴퓨터가 이해할 수 있는 언어로 전달해야한다. 프로그래밍 언어로 프로그램을 작성하면 컴파일러, 인터프리터를 사용해 ...

1996년 11월 넷스케이프 커뮤니케이션즈가 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구 ECMA 인터내셔널에 자바스크립트 표준화를 요청하였다.2009년 ECMA Script5(ES5) 출시2015년 ECMA Script6(ECMAscript 2015, ES6)

HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것DOM API제공 (HTML요소를 선택하거나 조작하는 기능)파일시스템 지원하지 않음.브라우저 외부에서 자바스크립트 실행환경을 제공하는 것DOM API를 제공하지 않음파일시스템 기본 제공 (

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름.어떤 값을 구별해서 식별할 수 있는 고유한 이름 (=== 변수이름)선언(declaration)에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.변수를 생성하는

식이 평가되어 생성된 결과사람이 이해할 수 있는 문자 (아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호 ('', "", ., \[], {}, // 등)를 사용해 값을 생성하는 표기법값으로 평가될 수 있는 문, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참

자바스크립트는 7개의 데이터타입을 제공하고, 데이터타입은 원시타입과 객체타입으로 분류할 수 있다.자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않는다.자바스크립트는 모든 수를 실수로 처리한다.추가적으로 세 가지 특별한 값도 표현할 수

2개의 피연산자를 산술 연산하여 숫자 값을 만들고, 피연산자의 값을 변경하는 부수효과가 없다.1개의 피연산자를 산술 연산하여 숫자 값을 만들고, 피연산자의 값을 변경하는 부수효과가 있다. 또한 증가/감소(++/--) 연산자는 위치에 의미가 있다.\+연산자는 피연산자 중

제어문은 조건에 따라 코드 블록을 실행하거나 반복실행할 때 사용한다.주어진 조건식의 평과 결과에 따라 실행할 블록문을 결정하며 조건식을 추가하고 싶으면 else if문을 사용한다.else문과 else if문은 옵션이다.주어진 표현식을 평가하여 그 값과 일치하는 표현식을

값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.개발자가 의도적으로 값의 타입을 변환하는 것은 명시적 타입 변환, 타입 캐스팅이라 한다.반면, 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을

자바스크립트에서는 원시 값을 제외한 나머지 값은 모두 객체이다.객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키와 값으로 구성된다.자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있고, 프로퍼티 값이 함수일 경우에는 메서드라고 부른다.객체 리

자바스크립트의 문자열은 원시 타입이며 변경 불가능하다. 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있다.변수에 원시 값을 갖는 변수를 할당하면 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라고 한다

12. 함수 12.1 함수란? 프로그래밍의 함수 : 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 12.2 함수를 사용하는 이유 코드의 재사용 측면에서 매우 유용 -> 유지보수의 편의성과 코드의 신뢰성을 높이는 효과가 있다.

스코프 = 식별자가 유효한 범위, 식별자를 검색할 때 사용하는 규칙전역은 전역 스코프를 만들고, 전역에 변수를 선언하면 전역변수가 되며, 어디서든지 참조할 수 있다.지역 = 함수 몸체 내부지역변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.스코프는 중첩이 가

함수 내부에 선언된 지역함수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.지역변수의 생명주기 === 함수의 생명주기※ 호이스팅 : 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징var키워드로 생성한 전역변수의 생명주기 ===

전역변수명과 같은 이름의 지역변수를 함수 내부에 선언하게 되면 먼저 선언된 값이 변경된다.var키워드로 선언한 변수는 전역변수가 된다.변수 호이스팅에 의해 var키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. (할당문 이전에 참조하면 undefined를 반

16. 프로퍼티 어트리뷰트 16.1 내부 슬롯과 내부 메서드

new연산자와 함께 Object생성자 함수를 호출하면 빈 객체를 생성해서 반환함생성자 함수를 통해 생성된 객체를 인스턴스라고 함직관적이고 간편하지만 동일한 프로퍼티를 갖는 객체를 여러개 생성해야할 경우는 비효율적임프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수

아래의 조건을 만족하는 객체를 일급 객체라고 함자바스크립트의 함수 == 일급 객체무명의 리터럴로 생성할 수 있음 (런타임에 생성 가능)변수나 자료구조(객체, 배열 등)에 저장할 수 있음함수의 매개변수에 전달할 수 있음함수의 반환값으로 사용할 수 있음함수는 객체이고 프로

속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조상속 : 객체지향 프로그래밍의 핵심 개념자바스크립트는 프로토타입을 기반으로 상속을 구현함생성자 함수로부터 생성된 인스턴스의 메서드 중복 생성 방지에 유용함객체 간 상속을 구현하기 위해 사용됨모든 객체는

선언하지 않은 변수를 참조하면 ReferenceError가 발생함delete연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생함중복된 매개변수를 사용하면 SyntaxError가 발생함with문을 사용하면 SyntaxError가 발생함. 사용하지 않는

표준 빌트인 객체 :ECMAScript사양에 정의된 객체로 자바스크립트 환경과 관계없이 언제나 사용 가능함.전역 객체의 프로퍼티로서 제공되므로 별도의 선언없이 전역변수처럼 언제나 참조 가능함호스트 객체 :ECMAScript사양에 정의되어 있지 않지만 자바스크립트 실행환

https://velog.io/@saiani1/%EB%A9%B4%EC%A0%91%EC%8A%A4%ED%84%B0%EB%94%94-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%9D%B

https://velog.io/@saiani1/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%9F%B0%ED%83%8

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합임자바스크립트 엔진에 의해 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 것을 렉시컬 스코프(정적 스코프)라 함렉시컬 환경의 상위 스코프에 대한 참조는 함수 정의가 평가되는

25장 클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? 문법적 설탕이라기 보다는 새로운 객체 생성 매커니즘으로 보는 것이 합당함 클래스 문법 vs 생성자 함수 1. new연산자 사용 클래스: new연산자 없이 호출하면 에러 발생 생성자 함수: new연산자 없이

ES6이전의 모든 함수는 일반 함수로도 호출할 수 있고 생성자함수로도 호출할 수 있음ES6메서드는 메서드 축약표현으로 정의된 함수만을 의미함ES6메서드는 인스턴스를 생성할 수 없는 non-constructor이므로 생성자함수로서 호출할 수 없음ES6메서드는 자신을 바인

여러 개의 값을 순차적으로 나열한 자료구조요소: 배열이 가지고 있는 값인덱스 : 배열에서 자신의 위치를 나타내는 0 이상의 정수length프로퍼티 : 배열의 길이를 나타냄자바스크립트의 배열은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져있지 않을수도 있는데 이를 희

Number객체는 생성자 함수 객체이므로 new연산자와 함께 호출하여 Number인스턴스를 생성할 수 있음부동소수점으로 인해 발생하는 오차를 해결하기 위해 사용Number.MAX_VALUE는 자바스크립트에서 표현할 수 있는 가장 큰 양수 값임Number.MAX_VALU

Math는 생성자 함수가 아니므로 정적 프로퍼티와 정적 메서드만 제공함원주율 PI값을 반환함Math.abs메서드는 인수로 전달된 숫자의 절대값 반환절대값은 반드시 0 또는 양수여야 함Math.round메서드는 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환함M

30장 Date 30.1 Date 생성자 함수 Date는 생성자 함수로, Date객체는 날짜와 시간을 나타내는 정수값을 가짐 30.1.1 new Date() new연산자와 같이 호출하면 Date객체를 정수값으로 반환, new연산자 없이 호출하면 Date객체를 반환하지

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 (자바스크립트 고유 문법이 아님)문자열을 대상으로 패턴 매칭 기능 제공정규 표현식 리터럴은 패턴과 플래그로 구성됨RegExp생성자 함수를 사용하여 RegExp객체생성 가능 (ES6)Re

String객체는 생성자 함수로, new연산자와 함께 호출하여 String인스턴스 생성 가능문자열은 배열처럼 인덱스를 사용해서 각 문자에 접근할 수 있음문자열은 원시값이므로 변경할수 없음length프로퍼티는 문자열의 문자 개수를 반환함indexOf메서드는 대상 문자열에

심벌은 변경 불가능한 원시타입, 중복되지 않는 유일무일한 값심벌값은 Symbol함수를 호출하여 생성해야 함생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없음new연산자로 호출하지 않음심벌 값에 대한 설명이 같더라도 생성된 심벌은 유일무일한 값임심벌 값은 암묵적으로

순회 가능한 데이터 컬렉션이터러블 프로토콜을 준수한 객체Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체이터러블인지 확인하는 방법이터러블 Symbol.iterator메서드를 호출하면 이터레이터 프로토콜을

ES6에서 도입됨하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬사용할 수 있는 대상 : for...of문으로 순회할 수 있는 이터러블(ex. Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollectio

이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 의미함ES5에서 디스트럭처링 할당하는 방법ES6에서 디스트럭처링 할당하는 방법(할당 대상은 이터러블, 할당 기준은 배열의 인덱스임)배열 디스트럭처링 할당을 위한 변수에 Res

Set객체는 중복되지 않는 유일한 값들의 집합배열과는 다르게 요소 순서에 의미가 없고, 인덱스로 요소에 접근할 수 없음수학적 집합을 구현하기 위한 자료구조임 (교집합, 합집합, 차집합, 여집합)Set생성자 함수로 생성함인수를 전달하지 않으면 빈 Set객체가 생성됨Set

브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성함브라우저의 자바

DOM은 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API(프로퍼티, 메서드)를 제공하는 트리 자료구조HTML요소 : HTML문서를 구성하는 개별적인 요소중첩관계에 의한 부자관계가 형성되어 트리구조를 가지게 됨트리자료구조 : 노드들의 계층구조를

이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록 : 이벤트가 발생했을 때, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것이벤트 드리븐 프로그래밍(event-driven programming) : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래

호출 스케줄링: 함수를 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것setTimeout함수의 콜백함수는 두번째 인수로 전달받은 시간 이후 단 한번 실행되도록 호출 스케줄링 됨clearTimeout함수는 호출 스케줄링을 취소함

자바스크립트 엔진은 싱글스레드방식으로 동작동기 처리 : 현재 실행중인 태스크가 종료할 떄까지 다음에 실행될 태스크가 대기하는 방식비동기 처리 : 실행중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식브라우저 내장기능 중 하나로 자바스크립트의 동시성

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용하여 브라우저 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식브라우저에서 제공하는 Web API인 XMLHt

REST: HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST API: REST를 기반으로 서비스 API를 구현한 것URI는 동사보다는 명사를 사용

콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상을 콜백 헬이라고 함콜백 패턴의 가장 심각한 문제점은 에러 처리가 곤란하는 것에러는 호출자 방향으로 전파되고, 콜백 함수를 호출한 건 setTimeout이 아니기 때문에 setTimeout의 콜백함수가 발생시킨 에러는 c

에러가 발생하지 않는 코드를 작성하는 것은 불가능함. 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요함에러를 처리하는 방법 : 예외적인 상황이 발생하면 반환하는 값을 if문이나 단축평가, 옵셔널 체이닝 연산자를 통

46. 제너레이터와 async/await 46.1 제너레이터란? 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할수 있는 특수한 함수 1. 제너레이터와 일반 함수의 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음 제너레이터 함수는

48. 모듈 48.1 모듈의 일반적 의미

Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 구형 브라우저에서도 동작하는 ES5사양의 소스코드로 트랜스파일링 할 수 있음Webpack은 의존관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈