모던 자바스크립트 Deep Dive

소개 모던 자바스크립트 Deep Dive이라는 책을 한번 정독하고 이후 다시 읽으면서 정리하는 글입니다. 내가 정확하게 몰랐던 부분이나, 중요하다고 생각하는 부분 위주로 정리할 생각입니다. 정리 프로그래밍언어 -> 기계어를 해주는 번역기를 컴파일러 혹은 인터프리터라고

정리 2장 javascript역사 ( 생략 ) 3장 javascript실행방법 ( 생략 ) 마무리

정리 1. 변수 모든 애플리케이션은 복잡해보여도 결국 데이터를 받아서 새로운 데이터를 도출하는 역할을 합니다. 그리고 그 데이터를 처리하는데 필요한 것이 변수입니다. 이때 sum을 변수라고 부르며, 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체를 의미한다. 간단하게 말하면 값을 가리키는 위치값을 상징적으로 부르는 이름 JavaScript에서...

정리 1. 값 식이 평가되어 생성된 결과를 의미 2. 리터럴 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 자바스크립트엔진이 런타임시에 리터럴을 보고 값을 생성함 3. 표현식 값으로 평가될 수 있는 문 4. 문 프로그램을 구성하는 기본 단위이자 최소 실행 단위 문은 여러 토큰으로 구성됨 토큰: 더 이상 나눌 수 없는 코...

정리 1. 데이터타입 데이터타입의 존재 이유 저장할 메모리공간의 크기를 지정하기 위해서 참조할 때 한번에 읽을 메모리공간의 크기를 지정하기 위해서 메모리에서 읽는 2진수를 해석할 방법을 알기 위해서 ( 65와 "A"의 차이 ) 1.1 원시타입 number, string, boolean, undefined, null, symbol 타입이 존재 숫자타입: ...

연산자 1. 비교연산자 ==: 동등연산자, 값이 일치하는지 체크 ===: 비교연산자, 값과 타입이 일치하는지 체크 Object.is(값1, 값2): 비교연산자와 같게 동작하며 NaN도 같다고 판단함 2. 논리연산자 ||: or &&: and !: not 3. typeof 4. 부수효과 기존 값에 영향을 주는 것을 의미한다. ++, --같은 연산자는 기...

요약 if while do ~ while switch ~ case for 문들에 대한 사용법 생략

요약 1. 타입변환 1.1 명시적타입변환 ( 타입캐스팅 ) 개발자의 의도에 맞게 타입을 변환한 것 1.2 묵시적타입변환 개바랒의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해서 타입이 변환되는 것 2. falsy값 자바스크립트에서는 아래의 6가지 값을 제외한 모든 값은 truthy로 평가된다. false undefined null 0...

요약 1. 객체구조 프로퍼티: 객체의 상태를 나타내는 값 메서드: 프로퍼티의 상태를 참조하고 조작할 수 있는 동작 프로퍼티키에는 문자열 or symbol값만 들어갈 수 있음 ( 문자열아니면 암묵적인 타입변환 ) 프로퍼티값에는 어떤 값이든 들어갈 수 있음 마무리 delete키워드를 이용해서 프로퍼티를 제거할 수 있음

요약 1. 원시타입과 객체타입 자바스크립트의 자료형은 크게 원시타입과 객체타입으로 나눠져있다. 여기서 원시타입은 변경 불가능한 값이고, 객체타입은 변경 가능한 값이다. 여기서 중요한것은 원시타입이 변경 불가능한 값이라는 것이다. 즉, 변수는 변경가능하고, 변수안에 들어간 값이 변경불가능하다는 것을 의미한다. 이게 무슨의미인지 예시를 들어보겠다. 위 예...

요약 1. 함수 함수란 입력값을 받아서 출력값을 내보내는 과정을 정의한 것을 의미한다. 함수란 일련의 과정을 문으로 구현하고 코드블럭으로 감싸서 하나의 실행 단위로 정의한 것이다. 매개변수: 입력을 전달받는 변수 인수: 함수내에서 사용하는 입력변수 반환값: 함수가 반환하는 결과값 2. 함수정의방법 함수선언문 함수표현식 생성자함수 화살표함수 2.1 함수...

요약 전역변수의 문제점 - 생략

요약 1. var의 특징 중복선언이 가능함 함수스코프를 가짐 호이스팅에 의해서 선언 이전에 사용해도 오류가 나지 않음 선언과 동시에 초기화단계가 발생함 브라우저 환경에서 선언시 window라는 전역객체의 프로퍼티로 생성됨 2. let의 특징 중복선언 금지 블록스코프를 가짐 호이스팅은 일어나지만 선언전에 사용하면 에러발생 ( ReferenceError ) ...

정리 1. 내부슬롯과 내부메서드 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 없도록 만들어둔 슬롯 or 메서드 하지만 몇몇슬롯과 메서드는 간접적으로 접근할 수 있는 수단을 제공하기도 한다 대부분 [[Prototype]]처럼 이중 대괄호로 감싸져있다. [[Prototype]]과 proto 2. 프로퍼티 어트리뷰트 자바스크립트는 프로퍼티를...

요약 1. 생성자 함수 생성자 함수를 사용하는 이유는 객체지향프로그래밍에서 class를 정의해서 객체를 찍어내는 이유와 동일하다고 생각한다. 객체의 틀인 생성자함수를 한번 정의해두면 손쉽게 여러 객체들을 생성할 수 있다. 1.1 생성자 함수의 인스턴스 생성 과정 위의 Person()을 예시로 사용하겠다. new를 이용해서 함수 호출시 일어나는 일 thi...

요약 1. 일급객체 일급객체의 조건은 아래의 4가지이다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 변수나 자료구조에 저장이 가능하다. 함수의 매개변수로 전달이 가능하다. 함수의 리턴값으로 사용이 가능하다. 자바스크립트의 함수는 위 4가지 조건에 만족하므로 일급객체다. 2. 함수의 프로퍼티 함수도 근본은 객체이므로 객체처럼 사용이 ...

요약 1. 프로토타입과 상속 아직 프로토타입은 어떤것이다라고 한줄로 정의할 수 없어서 예시를 들어보겠다. 일단 프로토타입을 유용하게 사용한 경우를 보여주겠다 위 코드에서 보면 r이라는 변수는 각 객체마다 다른 값을 가지지만, getArea()는 this값을 제외하고는 같은 행위를 하고 있다. 위처럼 같은 행위를 하는 메서드는 각각의 객체마다 가지는 것보단...

strict mode 생략

요약 1. 표준 빌트인 객체 전역 객체의 프로퍼티로 제공되며, 브라우저환경이나 노드환경 어디서든 사용이 가능하다. Object, String등의 40여개의 표준 빌트인 객체가 존재하고 Math, Reflect, JSON을 제외하고 모두 생성자 함수로 사용이 가능하다. 2. 원시값과 래퍼객체 기본적으로 원시값에는 .연산자를 붙일수가 없고 에러가 나는게 맞게...

요약 1. this this의 사용하는 이유는 생성자에 정의한 메서드에서 자신의 객체를 가리킬 방법이 없기 때문이다. 무슨말이냐면 생성자에서 메서드를 정의하는 시점과 객체를 생성하는 시점을 구분해서 나눠보면 이해가 쉽다. 필연적으로 메서드를 정의하는 시점이 객체를 생성하는 시점보다 먼저오게 된다. 그러면 메서드에서는 자신을 호출한 객체의 값을 알아야하는데...

요약 1. 스코프 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효범위가 정해진다. 중요한 것은 어디서 사용되는냐에 따라서 정해지는 것이 아닌 최초 선언된 위치에 의해서 스코프가 정해진다는 것 그리고 이것을 정적스코프 또는 렉시컬스코프를 따른다고 말한다. ( 어디서 사용 X, 어디서 정의 O ) 2. 스코프체인 모든 식별자...

요약 1. 실행 컨텍스트 소스코드 평가과정에서 생성하는 것으로 소스코드를 실행하는 데 필요한 환경을 제공하는 영역 즉, 식별자를 등록하고 관리 스코프와 코드 실행 순서를 관리하는 객체다. 2. 렉시컬 환경 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조값을 기록하는 자료구조 즉, 식별자와 스코프를 관리함. 식별자는 환경레코드( Environme...

요약 1. 클로저 클로저의 사전적 정의는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 내가 이해한 바로 쉽게 바꿔보면 함수와 그 함수 외부에 선언된 변수와의 관계를 의미한다. 예시를 들어보면 클로저를 알기전에 위 예시를 자세히 살펴보면 이상하다고 느낄만한 부분이 존재한다. 함수는 분명 종료되면 실행 컨텍스트 스택에서 제거되는데 그렇다면 함수내부에...

요약 1. 클래스 자바스크립트도 C++처럼 클래스를 이용한 객체지향 프로그래밍 수행이 가능하다. 하지만 클래스라는 문법을 만들어놓은 것 뿐이지 실제로는 생성자함수와 프로토타입에 의한 설탕문법이다. 2. 클래스와 생성자함수의 차이점 new없는 호출은 무조건 에러 extends와 super키워드 사용 클래스는 항상 let과 같은 호이스팅이 일어남 ( 일시적 ...

요약 1. 함수 1.1 ES6이전 함수 모든 함수는 callable이면서 constructor이다. 즉, 호출가능하며, 생성자함수로 사용이 가능하다. 1.2 ES6이후 함수 메서드 축약 표현으로 정의한 함수와 화살표 함수는 [[Constructor]]와 [[Prototype]]이 없다. 대신 [[HomeObject]]가 존재해서 super가 사용이 가능하...

요약 1. 배열 1.1 밀집배열 다른 언어에서 말하는 일반적인 배열을 의미한다. 배열의 요소의 모든 자료형이 동일하고, 연속된 메모리에 저장된 배열을 의미한다. 장점 : 임의의 요소에 대한 접근이 빠르다. 단점 : 요소 삽입 및 삭제에 많은 처리를 해야한다. 2.2 희소배열 자바스크립트의 배열은 기본적으로 희소배열이다. 배열의 요소의 자료형이 달라도 상...

요약 1. Number 생략 2. Math 생략 3. Date 생략 4. RegExp 정규표현식 생략 5. String 생략

요약 1. Symbol 다른 값과 중복되지 않는 유일무이한 값이다. 문자열과 같이 프로퍼티의 키값으로 사용할 수 있다. 변경불가능한 원시값이다. ( 원시값이라서 new를 이용해서 생성하면 안됨 ) 타 언어의 enum처럼 활용가능함 프로퍼티로 만들면 기본적으로 은닉되며, Object.getOwnPropertySymbols로 찾을 수 있음

요약 1. 이터러블 이터러블이란 이터러블 프로토콜을 준수하는 객체다. 이터러블이면 for ~ of, spread operator, destructuring가 사용 가능하다. 1.1 이터러블 프로토콜 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속받고, 그 함수를 호출하면 이터레이터 프로토콜에 준수한 이...

요약 1. 스프레드 문법 간단하게 요소를 개별적으로 분리하거나 합쳐주는 문법이다. 기본적으로 이터러블에 사용이 가능하다. 사용 가능한 곳 함수 호출문의 인수 배열 리터럴 객체 리터럴 내부 ( 이터러블 아니어도 사용가능 ) 2. 구조분해할당 ( 디스트럭처링 ) 디스트럭처링, 구조분해할당, 비구조화할당 등의 이름으로 불린다. 단어 그대로 구조대로 분해...

요약 1. Set 중복되지 않는 유일한 값들의 집합이다. 요소의 순서에 의미가 없다. 인덱스로 접근이 불가능하다. 이터러블이다. Set의 메서드 Set.prototype.size: 요소의 개수 Set.prototype.add(): 요소추가 ( 체이닝 가능 ) Set.prototype.has(): 존재여부 ( T/F ) Set.prototype.de...

요약 1. 브라우저의 렌더링 과정 브라우저의 렌더링이란 브라우저가 어떻게 HTML, CSS, JavaScript를 해석해서 화면에 출력하는 것을 의미한다. 용어 정리 파싱: 구문분석, 문자열을 토큰단위로 분해하는 것을 의미한다. 토큰: 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 렌더링: HTML, CSS, JavaScript을 파싱해서 브라...

DOM API

이벤트처리

스로틀과 디바운스에 대한 개념 정리

자바스크립트의 동작 원리와 개념들에 대한 정리

Ajax정의

REST의 정의와 규칙에 대한 간단한 정리

Promise 사용이유와 사용법 정리