[마스터 개념] 4 | 이터러블

[마스터 개념] 4 | 이터러블

1 variable 변수

2 operator 연산자

3 function 함수

4 object 객체

5 class 클래스

7 built-in 빌트인 객체

8 array 배열

9> iterator 이터러블

10 map

11 more-operators 유용한 연산자들

12 module 모듈

13 promise 프로미스

14 scope 스코프

15 prototype 프로토타입

16 closure 클로져

17 this 

9 iterator 이터러블

[Symbol.iterator]( ) : Iterator{ next( ) : {value, done}};

 

 Iterable 은 순회가 가능하다. Iterable 은 객체가 [Symbol.iterator]( )를 가지고 있어야 하며, 호출했을 때 Iterator 를 반환해야 한다. 그 Iterator 안에는 value 와 done 값을 반환하는 next( ) 함수가 반환되어야 한다.

 

 Itarable 을 따르는 객체인 Array, String, Map, Set 과, 심볼 정의를 가진 객체, Iterator 를 리턴하는 특정 함수는 순회가 가능한 객체이므로 for .. of, spread 연산자를 사용할 수 있다.

 

const array = [1, 2, 3];
for (const item of array.values()) {
  console.log(item);		// 1
				// 2
				// 3
}

const obj = { 0: 1, 1: 2 };
for (const item in obj) {
  console.log(item);		// 0
				// 1
}

 

for .. in : for .. of 객체를 사용할 수 없는 일반 객체일 때, key 값을 출력

 

// next() 를 수동으로 출력
const iterator = array.values();
console.log(iterator.next().value);		// 1
console.log(iterator.next().value);		// 2
console.log(iterator.next().value);		// 3
// done : true -> 반복이 끝남
onsole.log(iterator.next().done);  		// true

 

// for .. of, for .. in 가 없다면,
while (true) {
  const item = iterator.next();
  if (item.done) break;
  console.log(item.value);		// 1
  					// 2
					// 3
}

 

// 0부터 10미만 숫자의 2배값을 순회하는, 이터레이터(반복자) 만들기
// input : 0, 1, 2, 3, ... , 9
// output : 0, 2, 4, 6, ... , 18

const multiple = {
  [Symbol.iterator]() {
    const max = 10;
    let num = 0;
    return {
      next() {
        return { value: num++ * 2, done: num > max };
      },
    };
  },
};

for (const number of multiple) {
  console.log(number);			// 0
  					// 2
					// 4
					// ...
					// 18
}

 

// 재사용 가능하게 함수로 재구성 하기

// 0부터 10미만 숫자의 2배값을 순회하는, 이터레이터(반복자) 만들기
// input : 0, 1, 2, 3, ... , 9
// output : 0, 2, 4, 6, ... , 18

function makeIterable(initialValue, maxValue, callback) {
  return {
    [Symbol.iterator]() {
      let num = initialValue;
      return {
        next() {
          return { value: callback(num++), done: num > maxValue };
        },
      };
    },
  };
}

const multiple = makeIterable(0, 10, (num) => num * 2);
for (const number of multiple) {
  console.log(number);			// 0
  					// 2
					// 4
					// ...
					// 18
}

 

Spread

 

 전개구문, 순회가 가능한 모든 것을 펼칠 수 있다. 따라서 모든 Iterable은 Spread 될 수 있다.

 

function add(a, b, c) {
  return a + b + c;
}
const nums = [1, 2, 3];
console.log(add(...nums));		// 6

 

// Rest Parameters
function sum(first, second, ...nums) {
  console.log(nums);			// [ 0, 1, 2, 4 ]
}
sum(1, 2, 0, 1, 2, 4);

 

const fruits1 = ["사과", "키위"];
const fruits2 = ["딸기", "바나나"];

// Array Concat
let arr = [...fruits1, "복숭아", ...fruits2];
console.log(arr);			// [ '사과', '키위', '복숭아', '딸기', '바나나' ]

 

const person = { name: "mallang", age: 20, home: { address: "home" } };

const updated = {
  ...person,
  job: "s/w engineer",
};
console.log(person);		// { 
				//   name: "mallang", 
				//   age: 20, 
				//   home: { address: "home" },
				//   job: 's/w engineer'
				// }

 

 이때 Object 는 얕은 복사가 일어나며 기존의 것을 변경하지 않는다.

 

Destructure 구조 분해 할당

 

 데이터의 그룹화를 쉽게 만들 수 있다.

 

const fruits = ["사과", "키위", "딸기", "바나나"];
const [first, second, ...others] = fruits;
console.log(first);			// 사과
console.log(second);			// 키위
console.log(others);			// [ '딸기', '바나나' ]

 

const point = [1, 2, 8];
const [x, y, z = 0] = point;
console.log(x);			// 1
console.log(y);			// 2
console.log(z);			// 8

 

 지정된 값이 없는 경우, 초기값을 지정해 줄 수 있지만 지정된 값이 있다면 초기값보다 그 값이 우선순위가 높으므로 지정된 값이 출력된다.

 

function createKorean() {
  return ["apple", "사과"];
}
const [title, korean] = createKorean();
console.log(title);		// apple
console.log(korean);		// 사과

 

const mallang = { name: "mallang", age: 20, job: "s/w engineer" };
const { name, age, job: occupation, pet = "거북이" } = yeHyun;
console.log(name);			// mallang
console.log(age);			// 20
console.log(occupation);		// s/w engineer
console.log(pet);			// 거북이

 

 job 이라는 키가 occupation 이라는 키로 변환되었고, pet 처럼 키와 값을 추가할 수 있다.