모던 자바스크립트 Deep Dive: 37장 Set과 Map

37장 Set과 Map37.1 SetSet 객체는 중복되지 않는 유일한 값들의 집합Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.동일한 값을 중복하여 포함할 수 없다.요소 순서에 의미가 없다.인덱스로 요소에 접근할 수 없다.Set 객체의 특성은 수학적 집합의 특성과 일치해 수학적 집합을 구현하기 위한 자료구조이다.따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.Set 객체의 생성Set 객체는 Set 생성자 함수로 생성한다.Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됨const set = new Set();console.log(set); // Set(0)[]Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성하게 되는데 이터러블의..

• format_list_bulleted JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 36장 디스트럭처링 할당

디스트럭처링 할당은 구화된 배열과 같은 이터러블 또는 객체를 구조 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출해 변수에 할당할 때 유용하다.36.1 배열 디스트럭처링 할당ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.const arr = [1,2,3];const [one,two,three] = arr;console.log(one,two,three); // 1,2,3배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 즉, 순서대로 할당된다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시..

• format_list_bulleted JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 35장 스프레드 문법

35장 스프레드 문법ES6에서 도입된 스프레드 문법(전게 문법)은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐 개별적인 값들의 목록으로 만든다.스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for...of 문드로 순회할 수 있는 이터러블에 한정된다.스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.함수 호출문의 인수 목록배열 리터럴의 요소 목록객체 리터럴의 프로퍼티 목록스프레드 문법의 결과는 값이 아닌 목록이다.console.log(...[1,2,3]); // 1 2 3예전에 배운 Rest 파라미터와는 서로 반..

• format_list_bulleted JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 34장 이터러블

34장 이터러블34.1 이터레이션 프로토콜ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하며 미리 약속한 규칙이다.ES6 이전 순회 가능한 자료 구조는 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등으로 통일된 규약 없이 각자 나름의 구조로 for문, for...in문, forEach 메서드 등 다양한 방법으로 순회가 가능했다.ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했다.이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다.이터러블 프로토콜Symbol.iterator를 프로퍼티 ..

• format_list_bulleted JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 33장 7번째 데이터 타입 Symbol

33장 7번째 데이터 타입 Symbol33.1 심벌이란?심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다.10.3절 프로퍼티에서 살펴본 바와 같이 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이다.33.2 심벌 값의 생성33.2.1 Symbol 함수심벌 값은 Symbol 함수를 호출하여 생성한다. 다른 원시값, 즉 문자열, 숫자, 불리언, undefined, null 타입의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심벌 값은 Symbol 함수를 호출해 생성해야한다. 이때 생성된 심벌 값은 외..

• format_list_bulleted JavaScript
• · 2024. 8. 6.
• textsms

모던 자바스크립트 Deep Dive: 26장 ES6 함수의 추가 기능

26장 ES6 함수의 추가 기능26.1 함수의 구분ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수도 있으며, 객체에 바인딩되어 메서드로서 호출할 수도 있다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능 면에서도 손해다.다음 코드를 살펴보면 ES6 이전의 함수는 동일한 함수여도 다양한 형태로 호출할 수 있다.var foo = function (){ return 1;};//일반 함수로 호출foo();//생성자 함수로 호출new foo();//메서드로 호출var obj = {foo:foo};obj.foo();이..

• format_list_bulleted JavaScript
• · 2024. 8. 6.
• textsms