2022/08/26 - TIL

34장 이터러블

34.1 이터레이션 프로토콜

34.1.1 이터러블

이터러블 프로토콜을 준수한 객체이다

Symbol.iterator를 프로퍼티 키로 사용한 메서드로 직접 구현하거나 프로토타입으로 상속받은 객체를 말한다

const isIterableList = [[], '', new Map(), new Set(), {}]
isIterble(n)
//true, true, true, true, false

배열은 Symbol.iterator 메서드를 상속받은 이터러블이다. 이터러블은 for of문으로 순회할 수 있다.

console.log(Symbol.iterator in obj) //fakse
일반 객체는 Symbol.iterator 메서드를 구현하거나 상속받지 않는다
for(const item of obj){console.log(item)}; //typeerror obj is not iterable
일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다
const [a,b] = obj;
이터러블이 아닌 일반 객체는 for...of 문으로 순회할  수 없다

일반 객체도 이터러블 프로토콜을 준수하면 이터러블이된다.

34.1.2 이터레이터

이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.

const iterator = array [Symbol.iterator]();

console.log('next' in iterator);

next 메서드는 이터러블 요소를 순회하기 위한 포인터 역활을 한다. 순회한 결과는, 이터레이터 리절트 객체를 반환한다.

const iterator = array[Symbol.iterator]();
console.log(iterator.next()); //{value:1, done:false;}

34.2 빌트인 이터러블

표준 빌트인 객체들은 빌트인 이터러블이다.

Array.prototype[Symbol.iterator]
String.prototype[Symbol.iterator]
Map.prototype[Symbol.iterator]
Set.prototype[Symbol.iterator]
TypeArray.prototype[Symbol.iterator]
arguments.prototype[Symbol.iterator]
NodeList.prototype[Symbol.iterator]
HTMLCollection.prototype[Symbol.iterator]

34.3 for … of 문

for of문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당합니다.

for in문은 프로퍼티를 순회하며 Enumerable 값이 true인 프로퍼티를 열거한다.

for(;;){
	const res = iterator.next();
	if(res.done) break;//다음객체가 없어서 done이 ture가 되면 순회를 중지한다
	const item = res.value;
	console.log(item);//1 2 3
}

34.4 이터러블 유사 배열 객체

유사배열 객체는 인덱스로 프로퍼티값에 접근이 가능하고, 인덱스를 나타내는 숫자형식의 문자열을 프로퍼티키로 가지고 있고, length 프로퍼티를 가지고 있어 순회가 가능하다.

const arrayLike = {
	0:1,
	1:2,
	2:3,
	length:3
}
Array.from은 유사 배열 객체 또는 이터러블을 배열로 반환한다.
const arr = Array.from(arrayLike);
console.log(arr); //[1,2,3]

34.6 사용자 정의 이터러블

const fibonacciFunc = function (max){
let [pre, cur] = [0, 1];
return{
[Symbol.iteraator](){
return {
next(){
[pre, cur] = [cur, pre+cur];
return {value : cur, done >=max};		
}	
}
}
}
}
for (const num of fibonacciFunc(10)){
	console.log(num)
}

const fibonacciFunc = function(){
let [pre, cur] = [0, 1];
return{
[Symbol.iterator](){
return this},
next(){
[pre,cur] = [cur, pre+cur]'
return {value : cur}
}
}
}
}
for (const num of fibonacciFunc(){
if(num>10000) break;
console.log(num);
}

35장 스프레드 문법

이터러블에만 한정되어있다. 스프레드 문법은 값이 아니라 값의 목록이다

const list = ...[1,2,3] //SyntaxError : Unexpected token...

35.1 함수 호출문의 인수 목록에서 사용하는 경우

var = [1,2,3];
var max = Math.max.apply(null, arr);

스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같이 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것이다. 따라서 Rest파라미터와 스프레드 문법은 서로 반대의 개념이다.

function foo(...rest){
	console.log(rest)
}
foo(...[1,2,3]);

35.2 배열 리터럴 내부에서 사용하는 경우

[1,2].concat([3,4])//[1,2,3,4]
[...[1,2], ...[3,4]]//[1,2,3,4]
[1,4].slice(1, 0, [2,3])// [1,4]=> [1,2,3,4]로 변한다.
Array.prototype.splice.apply([1,4],  [1,0].concat([2,3])) //[1,2,3,4]
[1,4].splice(1, 0, ...[2,3)//[1,2,3,4]

///slice로 복사가가능하다

35.4 이터러블을 배열로 변환

이터러블을 배열로 변환하려면 apply, call메서드를 사용하여 slice 메서드를 호출해야한다

Array.prototype.slice.call(arguments);

스프레드 문법을 사용하면 더 간편하게 이터러블을 배열로 변환할 수 있다. arguments 객체는 이터러블이면서 유사 배열 객체다. 따라서 스프레드 문법의 대상이 될 수 있다.

function sum(){
	return [...arguments].reduce((pre, cur)=> pre+cur, 0)
}

const sum = (...args)=> args.reduce((pre,cur) =>pre+cur, 0)

주의 => 이터러블이 아닌 유사배열 객체는 스프레드 문법의 대상이 될 수 없다

const arrayLike = {
	0:1,
	1:2,
	2:3,
	length:3
}
const arr = [...arrayLike];

TypeError : object is not iterable(cannot read property Symbol (Symbol.iterator))

Array.from(arrayLike) //유사배열 객체 또는 이터러블을 배열로 변환한다

35.5 객체 리터럴 내부에서 사용하는 경우

const obj = {x:1, y:2};
const copy = {...obj};

(obj !==copy)// true;

const merged = {x:1, y:2, ...{a:3, b:4}}
console.log(merged) //{x:1, y:2, a:3, b:4};

const merged = Object.assign({}, {x:1, y:2}, {y:10, z:3})
//중복된 프로퍼티는 뒤가 제일 우선이다
console.log(merged)//{x:1, y:10, z:3}

36장 디스트럭처링 할당

36.1 배열 디스트럭처링 할당

배열로부터 추출하여 1개 이상의 변수에 할당한다. 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.(순서대로 할당된다)

const [a,b] = [1,2];
console.log(a,b);

const [g, ,h] =[1,2,3]
console.log(g, h); //1 3

const [e, f=1, h=1] = [1,2,]
console.log(e,f,h) //1,2,1 =>할당을 위한 기본 값을 설정할 수 있다

const [x, ...y] = [1,2,3]
console.log(x,y)//1,[2,3]

36.2 객체 디스트럭처링 할당

37장 Set과 Map

37.1 Set

const set = new Set();
console.log(set) //Set(0){}
const set = new Set([1,2,3, 3])
console.log(set) //Set(3){1,2,3}
const set = new Set('hello')
console.log(set)// Set(4) {'h', 'e', 'l', 'o'}

console.log([...new Set([1,2,2,3,3,3,3,4)])//[1,2,3,4]
//생성

const {size} = new Set([1,2,3,4])
console.log(size)//3
set.size =10;//무시된다. =>갯수변경이 안된다
console.log(set.size) //4

set.add(n) //n 더하기

set.has(n)//요소의 존재 확인하기
set.delete(n)//요소의 존재 삭제하기
set.clear()//요소 비우기

수업시간에 들은 내용

표현식 VS 메서드
2 ** 2
Math.pow(2,2)

메서드는, 프로퍼티 이름, 값의 위치 등 알아야할 것이 많다.
concat같은 경우 값을 바꾸는지(사이드 이펙트가 있는지)도 고민해야한다.

즉 표현식으로 해결하는게 좋다

스프레드 문법은 연산자가 아니라 목록이라는 것을 주의 할 것

배열 디스트럭처링 할당

객체 디스트럭처링 할당

두개로 나뉘고 배열 디스트럭처링 할당은 순서가 중요하다는게 중요하다

map을 객체를 키로 줄 수 있다는 차이가 있다.