개인공부/모던 자바스크립트 Deep Dive52 36장 디스트럭처링 할당 * 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다. 저작권에 문제가 된다면 삭제하도록 하겠습니다. 디스트럭처링 할당(distructuring assignment, 구조분해할당)은 구조화된 배열과 같은 이터러블 또는 객체를 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 36.1 배열 디스트럭처링 할당 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상은 이터러블 이어야 하며 할당 기준은 배열의 인덱스다.(순서대로 할당된다.) const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3.. 2023. 1. 17. 35장 스프레드 문법 * 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다. 저작권에 문제가 된다면 삭제하도록 하겠습니다. ES6에서 도입된 스프레드 문법(spread syntax)은 하나로 뭉쳐 있는 여러 값들의 집합을 펼처서 개별적인 값들의 목록으로 만든다. 이터러블만 스프레드 문법을 사용할 수 있다. 스프레드 문법의 결과는 값이 아니라 값들의 목록이다. 35.1 함수 호출문의 인수 목록에서 사용하는 경우 함수의 인수 목록으로 전달해야 할 경우 사용한다. const arr = [1, 2, 3]; // 스프레드 문법을 사용하여 배열 arr을 1, 2, 3으로 펼쳐서 Math.max에 전달한다. // Math.max(...[1, 2, 3])은 Math.max(1, 2, 3)과 .. 2023. 1. 16. 34장 이터러블(iterable) * 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다. 저작권에 문제가 된다면 삭제하도록 하겠습니다. 34.1 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜 - Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환하는 규칙. 이터레이터 프로토콜 - next 메서드를 .. 2023. 1. 16. 33장 Symbol * 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다. 저작권에 문제가 된다면 삭제하도록 하겠습니다. 33.1 Symbol 이란? ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. Symbol값은 다른 값과 중복되지 않는 유일무이한 값이다. 33.2 Symbol 값의 생성 33.2.1 Symbol 함수 Symbol값은 Symbol 함수를 통해서만 생성 가능하다. Symbol값을 생성할 때 문자열을 인수로 전달할 수 있는데, 이 문자열은 Symbol값에 대한 설명으로 디버깅 용도로만 사용된다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol('my'); console.lo.. 2023. 1. 15. 26장 ES6 함수의 추가 기능 * 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다. 저작권에 문제가 된다면 삭제하도록 하겠습니다. 26.1 함수의 구분 ES6 이전의 함수는 사용 목적에 따라 명확히 구분되지 않는다.(모든 함수가 callable이면서 constructor다.) ES6에서는 함수를 사용 목적에 따라 3가지로 구분했다. ES6 함수 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 26.2 메서드 ES6 이전에는 메서드에 대한 명확한 정의가 없었다. ES6 이후로 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. const obj = { x: 1, // foo는 메서드이.. 2023. 1. 15. 24장 클로저 * 아래 내용은 이웅모 저자님의 모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다. 저작권에 문제가 된다면 삭제하도록 하겠습니다. 클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 24.1 렉시컬 스코프(Lexical Scope) 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조'에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 바로 렉시컬 스코프다. 24.2 함수 객체의 내부 슬롯 [[Environment]] 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장하고 기억한다. 24.3 클로저와 렉시컬 환경 const x = 1;.. 2023. 1. 10. 이전 1 2 3 4 5 6 7 8 9 다음