async

async 키워드부터 알아봅시다. async는 function 앞에 위치합니다.

async function f() {
return 1;
}
function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환됩니다. 직접 확인해 봅시다.

async function f() {
return 1;
}

f().then(alert); // 1
명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다.

await

• await 문법은 다음과 같습니다.

// await는 async 함수 안에서만 동작합니다.
let value = await promise;
자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다(await는 '기다리다’라는 뜻을 가진 영단어입니다 – 옮긴이). 결과는 그 이후 반환됩니다.

1초 후 이행되는 프라미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다.

async function f() {

let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});

let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

alert(result); // "완료!"
}

f();
함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개됩니다. 이때 프라미스 객체의 result 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력됩니다.

• 일반함수에서는 await을 사용할 수 없다.

먼저 .then 호출을 await로 바꿔야 합니다.
function 앞에 async를 붙여 await를 사용할 수 있도록 해야 합니다.

Generator

• Generator는 함수의 실행을 멈추었다가 다시 실행 할 수 있는 독특한 기능이다.
• function* 으로 Generator 사용
• yield 키워드를 사용하여 yield에서 함수를 멈출 수 있다.

function* fn() {
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3);
console.log(4);
yield 3;
return "finish";
}

const a = fn();

console.log(a.next());// 1 , {value:1 , done:false} 함수의 실행이 끝났으면 true 반환

Generator는 next 메소드외에 return과 throw 메소드를 가지고 있다.

• console.log(a.return('END'));
  value값이 true로 반환되어 이 다음부터는 next메소드를 사용하더라도 value를 얻어 올수없고 done:true로 나오게 된다.

function* fn() {
try {

    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    console.log(4);
    yield 3;
    return "finish";
}catch (e){
    console.log(e);
}

}

const a = fn();

// console.log(a.return('END'));
console.log(a.throw(new Error('err')))

• Generator
• iterable
• Symbol.iterator 메서드가 있다.

• iterator
• next 메서드를 가진다.
• next 메서드는 value와 done 속성을 가진 객체를 반환하다.
• 작업이 끝나게되면 done은 true가 된다.

Generator는 값을 미리 만들어 두지 않는다.

function* fn() {
let index = 0;
while(true) {
yield index++;
}
}

const a = fn();
console.log(a.next())

이런식으로 필요한 순간까지 계산을 미뤄 둘 수 있다.

function* fn1() {
let index = 0;
while(true) {
yield index++;
}
}

const a = fn1();
console.log(a.next())
console.log(a.next())

function* fn2() {
const num1 = yield "첫번째 숫자를 입력해주세요";
console.log(num1);

const num2 = yield "두번째 숫자를 입력해주세요";
console.log(num2);

return num1 + num2;

}

const b = fn2();
console.log(b.next())
console.log(b.next(2));
console.log(b.next(4));

인자값을 넣어서 값을 받을 수도 있다.