🙄이터러블? 이터레이션 프로토콜?
ES6에서 도입된 이터레이션 프로토콜은 순회가능한 데이터 컬렉션을 만들기 위해 약속한 규칙입니다.
ES6 이전에는 통일된 규약 없이 다양한 방법으로 순회할 수 있었지만
ES6에서는 이터레이션 프로토콜을 준수하는 이터러블로 통일하여
for...of 문, 스프레드 문법, 배열디스트럭처링 할당의 대상으로 사용할 수 있게 일원화 했습니다.
이 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있습니다.
이터레이션프로토콜 | |
이터러블프로토콜 | 이터레이터프로토콜 |
for...of문으로 순회 가능 스프레드 문법 배열 디스트럭처링 할당 대상으로 사용가능 |
이터레이터는 이터러블의 요 소를 탐색하기 위한 포인터 역할을 합니다. |
🙄for of 문? for in 문?
for of 문과 for in 문은 굉장히 형식이 유사합니다
하지만 for of 문은 이터러블에 사용할 수 있고
for in 은 객체에 사용할 수 있다는 차이점이 있습니다.
for(변수선언문 of 이터러블) {} for(변수선언문 in 객체){}
🙄이터레이션 프로토콜이 필요한 이유?
만약 다양한 데이터 공급자(Array,string,map/set 등)이 각자의 순회 방식을 갖는다면
데이터 소비자(for..of,스프레드,map/set생성자 등)은
다양한 데이터 공급자의 순회방식을 모두 지원해야하며 이는 효율적이지 않습니다.
하지만 다양한 데이터 공급자가 이터레이션 프로토콜을 준수하도록 규정하면
데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현 하면 되므로 효율적입니다.
즉 이터레이션 프로토콜은 데이터 소비자와 데이터 공급자를 연결해주는
인터페이스의 역할을 한다고 할 수 있습니다.
🙄지연 평가가 뭔가요?
지연 평가는 데이터가 필요한 시점 이전까지는 미리 데이터를 생성하지 않다가
데이터가 필요한 시점이 되면 그때야 비로소 데이터를 생성하는 기법입니다.
즉 평가 결과가 필요할 때 까지 평가를 늦추는 기법입니다.
1. 불필요한 계산을 하지 않으므로 빠른 계산이 가능.
2. 무한 자료 구조를 사용 가능.
3. 복잡한 수식에서 오류 상태를 피할 수 있어짐.
과 같은 장점이 있습니다.
🙄스프레드 문법이 뭔가요?
스프레드 문법 ...은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서
개별적인 값들의 목록으로 만드는 문법입니다.
스프레드 문법은 Array, String, Map, Set, DOM 컬렉션, arguments 등과 같은
순회할 수 있는 이터러블에 사용할 수 있습니다.
🙄디스트럭처링 할당
디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를
비구조화 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.
배열과 같은 이터러블이나 객체 리터럴에서 필요한 값만 추출하여
변수에 할당할때 매우 유용합니다.
배열 디스트럭처링 할당을 할 때 할당의 대상은 이터러블이어야 하며
할당 기준은 배열의 인덱스로 순서대로 할당됩니다.
객체 디스트럭처링 할당을 할 때엔 할당의 대상은 객체여야 하며
할당 기준은 프로퍼티 키입니다. 즉 순서는 의미가 없고
선언된 변수 이름과 프로퍼티키가 일치하면 할당됩니다.
const {lastName, firstName} = {firstName : "Ungmo" , lastName : "Lee"}
// lastName = "Lee"
선언한 변수이름과 프로퍼티키를 일치시켜줘야하는군요!
중첩 객체에 디스트럭처링 할당을 하고 싶은 경우엔 어떻게 해야할까요?
//중첩 객체에 디스트럭처링 할당
const user = {
name : 'lee',
address: {
zipcode : 93,
city : 'sa'
}
}
//address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출합니다.
const { address: {city} } = user
console.log(city)
반응형
'javascript' 카테고리의 다른 글
요약 정리는 못 참지 않을까요? (14) DOM (0) | 2023.01.17 |
---|---|
요약 정리는 못 참지 않을까요? (13) 브라우저의 렌더링 과정 (0) | 2023.01.17 |
요약 정리는 못 참지 않을까요? (11) RegExp (1) | 2023.01.17 |
요약 정리는 못 참지 않을까요? (10) 배열 (0) | 2023.01.16 |
요약 정리는 못 참지 않을까요? (9) ES6 함수의 추가 기능 (0) | 2023.01.16 |