모던 자바스크립트 Deep Dive

변수 키워드 자바스크립트에서 변수 선언시 var(ES5), let(ES6), const(ES6) 이렇게 세 개의 키워드를 사용한다. ES6 이전에는 var 키워드만을 사용했다. 하지만 var 키워드에는 여러 단점이 있는데 다음과 같다. var 키워드의 문제점 1. 변

원시타입(Primitive Type) 자바스크립트에선 7개의 원시타입이 존재한다. number string boolean undefined null symbol bigint 원시타입은 다음과 같은 특성을 가지고 있다. 변경 불가능한

함수 선언문 함수 f를 선언문으로 정의하면 위와 같다. 함수 선언문은 다음과 같은 특징을 같는다. 함수 이름 생략 불가 표현식이 아닌 문이기 때문에 완료 값으로 undefined 출력 위 코드를 보면 함수 이름을 통해 함수를 호출하는 것처럼 보인다. 하지만 함수

무명 리터럴로 생성 가능 (런타임 생성 가능)변수나 자료구조에 저장 가능함수의 매개변수로 전달 가능함수의 반환값으로 사용 가능위 조건을 만족하는 객체를 일급 객체라고 한다.함수는 객체이므로 다른 객체와 같이 프로퍼티를 갖는다. 그 프로퍼티는 다음과 같다.argument

스코프는 쉽게 말해 식별자가 유효한 범위를 말한다. 예를 들어 USER\\파일A\\A.txt와 USER\\파일B\\A.txt에서 A.txt에 대해서 생각해보자. 두 A.txt는 이름은 동일한 파일이지만 둘은 엄연히 다른 파일이다. 다른 파일이 될 수 있었던 이유는 자신

생성자 함수 생성자 함수(Constructor)란 new 연산자와 함께 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.

프로토타입(Prototype) 자바스크립트는 프로로타입 기반의 객체지향 프로그래밍 언어이다. 즉, 자바스크립트는 프로토타입을 기반으로 상속을 구현한다. 이는 클래스 기반 객체지향 프로그래밍 언어보다 더 효율적이며 강력한 객체지향 프로그래밍을 가능케 한다. 다음 코드를

자바스크립트 객체는 크게 3가지로 분류할 수 있다.표준 빌트인 객체호스트 객체사용자 정의 객체자바스크립트는 Object, String, Number 등 40여 개의 표준 빌트인 객체를 제공한다. 표준 빌트인 객체 중 String, Number, Boolean, Func

this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수를 뜻한다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

소스코드 타입 소스코드 타입을 구분하는 이유는 소스코드 타입에 따라 실행 컨텍스트를 생성,관리하는 과정이 다르기 때문이다. 전역 코드 : 전역변수 관리 위한 전역 스코프 생성, var 전역변수와 함수 선언문의 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩 및

클로저(Closure) 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어의 특성으로, 함수와 그 함수가 선언되었을 때의 렉시컬 환경과의 조합을 말한다. 자바스크립트 엔진은 함수를 어디에서 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라고 한다.

클래스 (Class) 자바스크립트는 프로토타입 기반 객체지향 언어이다. 따라서 클래스가 필요없는 객체 지향 스타일로 타 객체 지향 언어의 상속, 캡슐화 등의 개념을 구현할 수 있었다. ES5에서는 아래 코드와 같이 클래스를 구현하였다. ES6에 들어서면서 타 객체 지

배열은 객체타입이다. 프로토타입으로 Array.prototype을 가지며 모든 프로토타입 객체의 프로토타입 말단은 Object.prototype 이기에 일반 객체보다 값에 순차적으로 접근하기 적합한 자료구조이다.또한 일반적인 배열의 방식인 밀집 배열(Dense Arra

표준 빌트인 객체인 Number 객체는 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. new 연산자를 사용하지 않으면 인스턴스 대신 숫자를 반환한다. 이를 통해 명시적 타입 변환을 할 수 있다.다양한 프로퍼티가 있지만 사용할 수도 있을 법한 프

이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.원주율 값 반환기능 : 인수의 절대값을 반환한다.반환 : 인수의 절대값기능 : 인수의 소수점 이하를 반올림한 정수를

Date 생성자 함수는 new 연산자와 같이 쓰이며 현재 날짜와 시간을 가지는 Date 객체를 반환한다. 만약 new 연산자 없이 쓰면 현재 날짜와 시간을 가지는 문자열을 반환한다. 인수에 문자열을 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환한다.자주

이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.표준 빌트인 객체인 String 객체는 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. new

문자열을 대상으로 패턴 매칭 기능을 제공한다. 즉, 특정 패턴에 일치하는 문자열을 검색, 추출, 치환이 가능하다. 회원가입 입력 폼에서 전화번호, 이메일 등과 같이 특정 패턴을 요하는 상황에서 유용하게 쓰일 수 있다.위와 같이 /기호로 시작하여 패턴을(regexp) 작

ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 즉, 다른 값과 중복되지 않는 유일무이한 값이다. 주로 유일한 프로퍼티 키를 만들기 위해 사용되곤 한다.래퍼 객체를 생성하는 생성자 함수와 달리 new 연산자를 사용하지 않는다.Symbol 함

이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.이터레이션 프로토콜에는 다음과 같이 두 가지의 프로토콜이 있다.Well-known Symbol인 Symbol.iter

중복되지 않은 유일한 값들의 집합을 말한다. 수학적 집합을 구현하기 위한 자료구조이며 이터러블이다. 또한 배열과 차이점은 다음과 같다.동일한 값을 중복하여 포함할 수 없음요소 순서에 의미가 없음인덱스로 요소에 접근할 수 없음Set 객체의 요소 개수를 확인할 때 사용한다

브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.즉, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들간 관계를 표현할 수 있는 트리 구조로

이벤트(event)란 어떠한 사건을 의미하며, 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 방식이 필요하다.브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 이를 통지해준다. 보통의 경우는 이벤트가 발생하기 전에는 실행되

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출하도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다.기능 : 전달받은 시간 후에 단 한 번 동작하는 타이머를 생성반환 : 고유한 타이머 id (브라우저 : 0이 아닌 숫자,

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

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이며, REST API는 REST를 기반으로 서비스 API를 구현한 것이다.REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라 표현한다.자원, 행위, 표현의 3가

프로미스는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 갖는 객체이다.프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만, 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)

fetch 함수는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다.fetch 함수는 XMLHttpRequest보다 사용이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유

제너레이터 ES6에서 도입되었으며, 코드 블록을 일시 중지했다가 필요한 시점에서 재개할 수 있는 특수한 함수이다. 제너레이터 특징 제너레이터는 다음과 같은 특징이 있다. 함수 호출자에게 함수 실행 제어권을 양도할 수 있다. 함수 호출자와 함수 상태를 주고받을 수 있

제너레이터를 통해 비동기를 동기 처리처럼 동작하도록 구현하였지만, 코드의 가독성이 매우 떨어지는 문제점을 야기했다. ES8에서는 async / await가 제너레이터를 대신할 수 있게 되었다.async / await는 프로미스를 기반으로 동작한다. 프로미스의 후속 처리

에러가 없는 코드를 한 번에 작성하는 것은 매우 힘든 일이다. 에러가 발생하면 프로그램은 실행 도중 강제 종료되므로 에러 핸들링은 매우 중요하다.다음 코드를 보자.위 코드는 DOM에서 button 태그를 찾고 class 속성들 중 hidden이란 속성을 제거하라는 코드

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 즉, 자신만의 파일 스코프(모듈 스코프)를 가진다.파일 스코프를 갖는 모듈의 자산(변수, 함수 등)은 기본적으로 비공개 상태이다