전체 글

우당탕탕 버라이어티 야생 서바이벌
·study/js-deepdive
35장 스프레드 문법스프레드 문법은 하나로 뭉쳐 있는 여러 값을의 집합을 펼쳐서 개별적인 값들의 목록을 만든다.스프레드 문법을 사용할 수 있는 대상은 Array, Sting, Map, Set, DOM 컬렉션, arguments와 같이 for...of문으로 순회할 수 있는 이터러블에 한정된다.스프레드 문법의 결과물은 값으로 사용할 수 없고, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.함수 호출문의 인수 목록배열 리터럴의 요소 목록객체 리터럴의 프로퍼티 목록// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다. (1, 2, 3)console.log(...[1, 2, 3]); // 1 2 3// 문자열은 이터러블이다.console.log(..."Hello"); // H e..
·study/js-deepdive
27장 배열 (Array)01. 배열이란?배열은 여러 개의 값을 순차적으로 나열한 자료구조다.배열이 가지고 있는 값을 요소(element)라고 부른다.배열에서 자신의 위치를 나타내는 0이상의 정수인 index를 갖는다.배열은 요소의 개수, 길이를 나타내는 length 프로퍼티를 갖는다.배열은 객체지만 일반 객체와는 구별되는 독특한 특징이 있다.구분객체배열구조프로퍼티 키와 프로퍼티 값인덱스와 요소값의 참조프로퍼티 키인덱스값의 순서✕○length 프로퍼티✕○- 일반 객체와 배열을 구분하는 가장 명확한 차이는 값의 순서와 length 프로퍼티다.- 인덱스로 표현하는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조다.배열의 장점은 처음부터 순차적으로 요소에..
·study/js-deepdive
26장 ES6 함수의 추가 기능01. 함수의 구분ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성한다.ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.ES6 이전의 함수는 다르게 말하면 callable이면서 constructor다.호출할 수 있는 함수 객체를 callable이라 하며, 인스턴스를 생성할 수 있는 객체를 constructor라 부른다.이는 혼란스러운 실수를 유발할 가능성이 있고 성능에도 좋지 않다.주의할 것은 ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor라는 것이다.따라서 객체..
·study/js-deepdive
25장 클래스01. 클래스는 프로토타입의 문법적 설탕인가?ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다.클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있다.(새로운 객체 생성 메커니즘으로 보는 것이 좀 더 합당하다.)클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다.클래스는 생성자 함수와 매우 유사하게 동작하지만 몇가지 차이가 존재한다.클래스를 new 연산자 없이 호출하면 에러가 발생한다..
·study/js-deepdive
24장 클로저(closure)클로저는 자바스크립트 고유의 개념이 아니다.함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다.MDN에서는 클로저에 대해 다음과 같이 정의하고 있다.클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다01. 렉시컬 스코프(Lexical scope)자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.이를 렉시컬 스코프(정적 스코프)라 한다.실행 컨텍스트에서 살펴보았듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다.이 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉..
·study/js-deepdive
23장 실행 컨텍스트01. 소스코드의 타입ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다.4가지 타입의 소스코드는 실행 컨텍스트를 생성한다.소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다.전역 코드(global code): 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등 내부 코드는 포함되지 않는다.함수 코드(function code): 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다.eval 코드(eval code): 빌트인 전역 함수인 eval함수에 인수로 전달되어 실행되는 소스코드를 말한다.모듈 코드(module code): 모..
·study/js-deepdive
22장 this01. this 키워드동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.생성자 함수 방식으로 인스턴스를 생성하는 경우를 생각해보자생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다.하지만 생성자 함수에 의한 객체 생성 방식은 먼저 생성자 함수를 정의한 이후 new 연산자와 함께 생성자 함수를 호출하는 단계가 추가로 필요하다.즉, 생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재해야 한다.따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한..
·study/js-deepdive
21장 빌트인 객체01. 자바스크립트 객체의 분류자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.표준 빌트인 객체(standard built-in objects/native objects/global objects)표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다.ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행환경(브라우저 또는 Node.js)과 관계없이 언제나 사용할 수 있다.표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다.호스트 객체(host objects)호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환..
온몸비틀기
누군가도 나와 같은 고민을 할 것 같아서