Javascript 이론 공부 - 5

 

1) Iterator

- Iterable 하다는 것은, 순회가 가능하다는 것을 뜻함

   - Iterator 조건 1 : Iterable 프로토콜을 따라야함

   - Iterator 조건 2 : Symbol.iterator() 함수를 호출했을 때, Iterable 프로토콜을 따르는 객체를 반환해야 함

      >> 즉, 심볼 정의를 가진 객체나, 특정한 함수가 Iterator를 리턴하는 객체는 순회 가능한 객체!

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

- Iterable 하면 for of, spread 사용 가능

 

 

2) Generator

- Iterable 프로토콜을 따르고 Iterator 객체를 반환함

   - 따라서 ".value" , ".done" 값을 가지고 있음

- 함수에 " * "  키워드가 붙으면 generator 

   - 사용자가 원할 때까지 기다렸다가 리턴해주는 "yeid" 키워드가 있음

  Q. Iterator 와 차이점이 있다면?

   A. generator는 사용하는 사람에게 제어권을 넘겼다고 생각하면 쉬움

 

function* sumGenerator() {
  try {
    for (let i = 0; i < 10; i++) {
      yield i += 4;
    }
  } catch (error) {
    console.log(error);
  }
}

const sum = sumGenerator();
let next = sum.next();
console.log(sum.value);

// 끝내고 싶을때 사용하는 함수
sum.return();

//에러던지기
sum.throw('Error!');

next = sum.next();
console.log(sum.value, sum.done);

 

3) Spread 

- spread는 "순회하면서 펼쳐내는 것"

- 모든 Iterable은 spread가 될 수 있음

- 사용법 

    - function ( ...iterable)

    - [...iterable]

    - {...object}

function add(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];

// 함수 기본 사용법
console.log(add(nums[0], nums[1], nums[2]));

// 함수 spread 사용법
console.log(add(...nums));

// 함수 인자에서의 spread
// Rest parameters라고 불림
// 인자값으로 얼마나 더 들어올지 모를 때 주로 사용
function sum(first, second, ...nums) {
  console.log(first);
  console.log(second);
  console.log(nums);
}

sum(1, 2, 0, 1, 2, 4);


// Object를 이용한 spread
// shallow copy이기 때문에, 기존 객체 수정 시 주의해야함
const bob = { name: 'bob', age: 32 };
const update = {
  ...bob,              // <<< spread 사용
  job: 'teacher',
};

console.log(update);
console.log(bob);  // { name: 'bob', age: 32, job: 'teacher' };  출력

 

4) Concat

- 두 개 이상의 배열을 병합하는데 사용하며, 기존 배열은 건들이지 않고 새 배열을 반환함

- Shallow copy를 하기 때문에 기존 배열을 건들때 조심해야함

// Array Concat
const str1 = ['hello', 'world'];
const str2 = ['nice to', 'meet you'];


let arr = str1.concat(str2);
console.log(arr); // [ 'hello', 'world', 'nice to', 'meet you' ] 출력


// spread 사용 
arr = [...str1, ...str2];
console.log(arr); // [ 'hello', 'world', 'nice to', 'meet you' ] 출력

arr = [...str1, '!!!', ...str2]; // // [ 'hello', 'world', '!!!', 'nice to', 'meet you' ] 출력
console.log(arr);

 

5) Destructuring assignment

- 데이터 그룹화가 가능한 기능

let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 출력 값: 10
console.log(b); // 출력 값: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // 출력 값: Array [30, 40, 50]

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

 

6)  Symbol

- 생성자가 symbol 원시 값을 반환하는 내장 객체로, 유일한 키를 생성할 수 있음

- 사용법 

    - Symbol('값') 

        >> 키 값의 이름만 같으면 동일한 값을 리턴함

    - Symbol.for('값')

        >> 동일한 이름으로 하나의 키만 가지며, 생성된 키는 global symbol resgistry에 저장됨

        >> keyFor() 함수로 가져올 수 있음