이터레이터는 이터러블의 값을 순회하기 위해 사용되며, Symbol.iterator 메서드를 호출하여 이터레이터를 얻습니다. |
1. 이터레이터(Iterater)
- next() 메서드 : IteratorResult 객체
이터레이터는 이터러블 객체의 요소를 반복하는데 사용
현재 요소를 반환하고 다음 요소로 이동
value와 done이라는 프로퍼티를 가진 객체를 반환\
- 배열 출력하기_[키], [값], [키-값] 전체 출력
< js >
const user = [1, 'apple', '김사과', 20, '서울서초구'];
console.log(user);
console.log(user.values());
//Object [Array Iterator] {}
console.log(user.entries());
//Object [Array Iterator] {}
console.log(user.keys());
//Object [Array Iterator] {}
console.log('-------------------');
// 값 출력
console.log([...user.values()]);
// [1, 'apple', '김사과', 20, '서울서초구']
// 값-인덱스 쌍 출력
console.log([...user.entries()]);
// [[0, 1], [1, 'apple'], [2, '김사과'], [3, 20], [4, '서울서초구']]
// 인덱스 출력
console.log([...user.keys()]);
// [0, 1, 2, 3, 4]
</js >
| [ 1, 'apple', '김사과', 20, '서울서초구' ] Object [Array Iterator] {} Object [Array Iterator] {} Object [Array Iterator] {} ------------------- [ 1, 'apple', '김사과', 20, '서울서초구' ] [ [ 0, 1 ], [ 1, 'apple' ], [ 2, '김사과' ], [ 3, 20 ], [ 4, '서울서초구' ] ] [ 0, 1, 2, 3, 4 ] |
- 이터레이터를 사용하기1_배열의 [키], [값], [키-값]을 next()로 출력
< js >
const arr1 = [1, 2, 3, 4, 5];
const iterator1 = arr1.values();
console.log(iterator1.next().value); // 1
console.log(iterator1.next().value); // 2
console.log(iterator1.next().value); // 3
console.log(iterator1.next().value); // 4
console.log(iterator1.next().value); // 5
console.log('-------------------');
const arr2 = [1, 2, 3, 4, 5];
const iterator2 = arr2.entries();
console.log(iterator2.next().value); // [0, 1]
console.log(iterator2.next().value); // [1, 2]
console.log(iterator2.next().value); // [2, 3]
console.log(iterator2.next().value); // [3, 4]
console.log(iterator2.next().value); // [4, 5]
console.log('-------------------');
const arr3 = ['apple', 'banana', 'orange'];
const iterator3 = arr3.keys();
console.log(iterator3.next().value); // 0
console.log(iterator3.next().value); // 1
console.log(iterator3.next().value); // 2
</js >
| 1 2 3 4 5 ------------------- [ 0, 1 ] [ 1, 2 ] [ 2, 3 ] [ 3, 4 ] [ 4, 5 ] ------------------- 0 1 2 |
- 이터레이터를 사용하기2_배열의 [키], [값], [키-값]을 반복문으로 출력
< js >
const user = [1, 'apple', '김사과', 20, '서울서초구'];
//values() : 값
const iterator1 = user.values();
while(true){
const item = iterator1.next();
if(item.done) break;
console.log(item.value);
}
for(let item of user){
console.log(item);
}
console.log('-------------------');
//keys() : 키
const iterator2 = user.keys();
while(true){
const item = iterator2.next();
if(item.done) break;
console.log(item.value);
}
for(let item of user){
console.log(item);
}
console.log('-------------------');
//entries() : [ 키, 값 ]
const iterator3 = user.entries();
while(true){
const item = iterator3.next();
if(item.done) break;
console.log(item.value);
}
for(let item of user){
console.log(item);
}
</js >
| 1 apple 김사과 20 서울서초구 1 apple 김사과 20 서울서초구 ------------------- 0 1 2 3 4 1 apple 김사과 20 서울서초구 ------------------- [ 0, 1 ] [ 1, 'apple' ] [ 2, '김사과' ] [ 3, 20 ] [ 4, '서울서초구' ] 1 apple 김사과 20 서울서초구 |
- 정리하기
|
2. 이터러블(Iterable)
반복이 가능한 객체
- 이터러블(iterable)
String, Array, map, Set ...등 객체
[Symbol.iterator] 메서드를 구현하는 객체
[Symbol.iterator] 메서드는 이터레이터를 반환하는 메서드
이터러블 객체는 for ...of 이나 for... in 문법으로 반복이 가능
< js >
function iter(){
let index=0;
data=[1,2,3,4];
return {
next(){
if (index<data.length){
return {value:data[index++],done:false};
//0번으로 출력 한 후 다음번호부터 1 증가
//false: 데이터 있음 : 끝나지 않음
}else{
return {value:undefined,done:true};
//true: 데이터 없음 : 끝남
}
}
}
}
let i=iter();
console.log(i.next()); //{ value: 1, done: false }
console.log(i.next()); //{ value: 2, done: false }
console.log(i.next()); //{ value: 3, done: false }
console.log(i.next()); //{ value: 4, done: false }
console.log(i.next()); //{ value: undefined, done: true }
</js >
| { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false } { value: undefined, done: true } |
3. 스프레드(Spread) 연산자
전개구문이라고 함
모든 Iterable은 Spread가 될 수 있음
순회가능한 데이터는 펼쳐 질 수 있음
< js >
//원시값과 객체값의 비교
//원시값: 값에 의한 복사가 일어남
//객체값: 참조에 의한 복사(메모리 주소)
// 원시값
function display(num){
num = 10
console.log(num) //num=10
}
const value = 5;
display(value); //10 // display num
console.log(value); //5 //바로 위 num
console.log('-------------------');
//객체값
function displayObj(obj){
obj.age = 14;
console.log(obj);
}
const Rucy = {name: '루시', age: 10};
displayObj(Rucy); //{ name: '루시', age: 14 }
console.log(Rucy); //{ name: '루시', age: 14 }
//객체의 값을 변경하는 것은 좋지 않은 알고리즘
//객체를 복사하여 age를 변환하고 해당 객체를 반환
function changAge(obj){
return {...obj, age: 6};
}
PPomi = changAge(Rucy);
console.log(Rucy); //{ name: '루시', age: 14 }
console.log(PPomi); //{ name: '루시', age: 6 }
</js >
| 10 5 ------------------- { name: '루시', age: 14 } { name: '루시', age: 14 } { name: '루시', age: 14 } { name: '루시', age: 6 } |
| (... 구문) : JavaScript의 스프레드 문법입니다. 스프레드 문법은 배열이나 객체를 확장하거나 병합하는 데 사용됩니다. 이를테면:
|
- 스프레드 활용(1)
< js >
function add(num1, num2, num3) {
return num1 + num2 + num3;
}
console.log(add(10, 20, 30)); //60
const nums = [10, 20, 30];
console.log(add(nums[0],nums[1],nums[2])); //60
console.log(add(...nums)); //60
</js >
| 60 60 60 |
- 스프레드 활용(2)_배열
< js >
const fruits1 = ['🍎','🍉'];
const fruits2= ['🍌','🍓'];
let arr = fruits1.concat(fruits2);
console.log(arr);
arr = [...fruits1, ...fruits2];
console.log(arr);
arr = [...fruits1, '🍅',...fruits2];
console.log(arr);
</js >
| [ '🍎', '🍉', '🍌', '🍓' ] [ '🍎', '🍉', '🍌', '🍓' ] [ '🍎', '🍉', '🍅', '🍌', '🍓' ] |
- 스프레드 활용(3)_객체
< js >
const apple = {name:'김사과', age:20, address: {si:'서울시', gu:'서초구', dong: '양재동'}};
console.log(apple);
const new_apple = {...apple, job: '프로그래머'};
console.log(apple); //원본 객체는 그대로인 상태
console.log(new_apple); //새로운 객체에 복사하면서 추가됨
</js >
| { name: '김사과', age: 20, address: { si: '서울시', gu: '서초구', dong: '양재동' } } { name: '김사과', age: 20, address: { si: '서울시', gu: '서초구', dong: '양재동' } } { name: '김사과', age: 20, address: { si: '서울시', gu: '서초구', dong: '양재동' }, job: '프로그래머' } |
- 스프레드 활용(4)_배열해체
< js >
const fruits = ['🍓','🍌','🍉','🍎','🍒'];
const [fruit1, fruit2, ...others] = fruits; // 배열해체
console.log(fruit1);
console.log(fruit2);
console.log(others);
</js >
| 🍓 🍌 [ '🍉', '🍎', '🍒' ] |
| 배열해체 방법 const [fruit1, fruit2, ...others] = fruits; 라인에서 배열 해체를 수행합니다. 배열 fruits의 첫 번째 요소는 fruit1 변수에 할당되고, 배열fruits의 두 번째 요소는 fruit2 변수에 할당되고, 나머지 요소들은 others 배열에 할당됩니다. |
- 변수할당 (destructuring)
: 배열에서 요소를 추출하여 개별 변수에 할당하는 것을 말합니다
< js >
function sendEmoji(){
return [':딸기:', ':바나나:', ':수박:', ':사과:', ':체리:'];
}
const [f1,f2, f3, f4, f5] = sendEmoji(); // 해당 배열의 각 요소를 개별 변수에 할당
console.log(f1);
console.log(f2);
console.log(f3);
console.log(f4);
console.log(f5);
</js >
| :딸기: :바나나: :수박: :사과: :체리: |
- 해체 할당_1 (destructuring assignment)
: 객체나 배열에서 데이터를 추출하여 변수에 할당하는 방법입니다.
< js >
const new_apple = { name:'김사과', age:20, address:{ si: '서울시', gu: '서초구', dong: '양재동' }, job:'프로그래머'}
console.log(new_apple);
console.log('-------------------');
function display({name, age, address, job}){
console.log(`이름`,name);
console.log(`나이`,age);
console.log(`주소`,address);
console.log(`직업`,job);
}
display(new_apple);
</js >
| { name: '김사과', age: 20, address: { si: '서울시', gu: '서초구', dong: '양재동' }, job: '프로그래머'} ------------------- 이름 김사과 나이 20 주소 { si: '서울시', gu: '서초구', dong: '양재동' } 직업 프로그래머 |
- 해체 할당_2 (destructuring assignment)
: 객체의 속성을 개별 변수에 할당
< js >
const new_apple = {
name: '김사과',
age: 20,
address: { si: '서울시', gu: '서초구', dong: '양재동' },
job: '프로그래머'
};
const {name, age, pet='루시', address, job:hobby} = new_apple;
console.log(name);
console.log(age);
console.log(pet);
console.log(address);
console.log(hobby);
</js >
| 김사과 20 루시 { si: '서울시', gu: '서초구', dong: '양재동' } 프로그래머 |
- 객체 해체(destructuring)|
: 배열이나 객체를 비구조화하여 그 안에 있는 값을 추출하여 변수에 할당
(+ 중첩된 객체의 속성에 접근)
< js >
const component = {
name: 'Button',
style: {
size: 20,
color: 'black'
}
}
function changeColor({style: {color}}){
console.log(color);
}
changeColor(component);
</js >
| black |
'Web > Node.js' 카테고리의 다른 글
| 06. 버퍼(buffer), 스트림(Steam) (0) | 2024.04.24 |
|---|---|
| 05. Console, This, file (0) | 2024.04.23 |
| 04. JSON (0) | 2024.04.23 |
| 03. timeout, promise, async (0) | 2024.04.23 |
| 01. Node.js (0) | 2024.04.19 |
