ES5까지는 객체의 순환을 위해서는 length에 의존해야 했다. ES6부터는 이터레이터가 등장하면서 더이상 length에 의존하지 않고, 이터레이터를 이용한 순환이 가능해졌다. 이터러블 객체에는 문자열, 배열, Map, Set이 있다.
- 이터러블(iterable) : 객체의 값을 반복 순회할 수 있는 자격을 가진 객체
- 이터레이터(interator) : 이터러블 객체의
[Symbol.iterator]()메서드로부터 리턴되는 객체. 이터레이터를 통해 이터러블 객체의 순회 정보를 확인할 수 있다.
ES5 VS. ES6
ES5 객체 순회
const fruits = ["apple", "melon", "grape", "lemon"];
for(let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
// "apple"
// "melon"
// "grape"
// "lemon"
}ES6 객체 순회
const fruits = ["apple", "melon", "grape", "lemon"];
for (let i of fruits) {
console.log(i)
// "apple"
// "melon"
// "grape"
// "lemon"
}이터러블 / 이터레이터 프로토콜
이터러블을 for of, 전개 연산자 등과 함께 동작하도록 한 규약을 말합니다.
이터레이터 직접 사용
const fruits = ["apple", "melon", "grape", "lemon"];
const iterator = fruits.values();
console.log(iterator.next());
// { done: false, value: "apple" }
console.log(iterator.next());
// { done: false, value: "melon" }
console.log(iterator.next());
// { done: false, value: "grape" }
console.log(iterator.next());
// { done: false, value: "lemon" }
console.log(iterator.next());
// { done: true, value: undefined }for of 문
for of 문은 이터러블 객체의 이터레이터를 활용하여 객체를 순환한다. for of 문을 사용하면 이터러블 객체의 이터레이터를 받아와서 next() 메서드를 통해 순회하는 복잡한 과정을 직접 하지 않아도 된다.
전개 연산자 (...)
전개 연산자는 이터러블 객체를 전개해준다.
const fruits = ["apple", "melon", "grape", "lemon"];
console.log(...fruits) // "apple", "melon", "grape", "lemon"Set()
Set는 모든 자료형의 값을 고유하게 저장하는 객체다.
Set 생성자
// Set 생성
const car = new Set();Set 관련 메서드
| 메서드 | 설명 |
|---|---|
| size | Set 객체의 value 개수 반환 |
| add(value) | Set 객체에 value 추가 |
| delete(value) | Set 객체의 특정 value 삭제 |
| clear() | Set 객체의 모든 요소 삭제 |
| has(value) | Set 객체의 특정 value의 존재 여부를 boolean으로 반환 |
Set 순회
이터레이터 직접 사용
const fruits = new Set();
fruits.add("apple");
fruits.add("melon");
fruits.add("grape");
console.log(fruits); // Set {"apple", "melon", "grape"}
const iterator = fruits.values();
console.log(iterator.next());
// { done: false, value: "apple" }
console.log(iterator.next());
// { done: false, value: "melon" }
console.log(iterator.next());
// { done: false, value: "grape" }
console.log(iterator.next());
// { done: true, value: undefined }for of 사용
const fruits = new Set();
fruits.add("apple");
fruits.add("melon");
fruits.add("grape");
console.log(fruits); // Set {"apple", "melon", "grape"}
for (let fruit of fruits) {
console.log(fruit); // "apple", "melon", "grape"
}Set 응용
배열 중복 제거
Set의 값을 고유하게 저장하는 특징을 활용하면 배열 중복 요소를 쉽게 제거할 수 있다.
const fruits = ["apple", "apple", "grape", "lemon"];
let newFruits = [...new Set(fruits)];
console.log(newFruits) // ["apple", "grape", "lemon"]1.
new Set()Set 생성자를 통해 중복값 제거
Set {'apple', 'grape', 'lemon'}
2. 전개 연산자...를 사용해 Set을 전개
"apple", "grape", "lemon"
3.[]로 다시 묶어 새 배열로 만들면 깊은 복사 완료
["apple", "apple", "grape", "lemon"]
Map()
Map은 Set과 거의 비슷하지만 키와 값 형태이다.
Map 생성자
const user = new Map();Map 순회
Map은 Set과 다르게 forEach 문을 사용할 수 있다.
forEach 사용
const user = new Map();
user.set("영희", 30);
user.set("민수", 23);
user.set("슬기", 41);
console.log(user);
// Map {'영희' => 30, '민수' => 23, '슬기' => 41}
user.forEach((val, key) => {
console.log(key, val);
// 30 '영희'
// 23 '민수'
// 41 '슬기'
})for of 사용
const user = new Map();
user.set("영희", 30);
user.set("민수", 23);
user.set("슬기", 41);
for (let [key, val] of user) {
console.log(key, val);
// 30 '영희'
// 23 '민수'
// 41 '슬기'
}참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
+=