46, 47장

// 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너레이터 메서드 const obj = { * genObjMethod() { yield 1; } }; // 제너레이터 클래스 메서드 class MyClass { * genClsMethod() { yield 1; } } // ❌불가능❌ // 제너레이터 함수는 화살표 함수로 정의할 수 없음 const genArrowFunc = * () => { yield 1; } // 제너레이터 함수는 new 키워드와 함께 생성자 함수로 호출할 수 없음 function* genFunc() { yield 1; } new genFunc(); // 애스터리스크(*)의 위치는 function키워드와 함수이름 사이라면 어디든 상관없음 // 일관성을 위해 function키워드 바로 뒤에 위치시키는 것을 추천

function* genFunc() { yield 1; yield 2; yield 3; } const generator = genFunc(); // 이터러블, 이터레이터 증명 console.log(Symbol.iterator in generator) // true console.log('next' in generator) // true // 각 메서드들은 이터레이터 리절트 객체를 반환 .next() // {value: 'yield된 값', // done: '제너레이터 함수가 끝까지 실행되었는가에 대한 불리언값'} .return() // {value: '인수로 전달된 값', done: true} .throw() // {value: '함수의 return 값', done: true}

// next, return 메서드 예시 function* genFunc() { try { yield 1; yield 2; yield 3; } catch (e) { console.error(e); } } const generator = genFunc(); console.log(generator.next()) // {value: 1, done: false} console.log(generator.return('hi')) // {value: 'hi', done: true}

// next, throw 메서드 예시 function* genFunc() { try { yield 1; yield 2; yield 3; } catch (e) { console.error(e); } } const generator = genFunc(); console.log(generator.next()) // {value: 1, done: false} console.log(generator.throw()) // {value: undefined, done: true} // generator.next() 하지않고 throw를 하면 이터레이터 리절트 객체가 반환되지 않음

function* genFunc(){ yield 1; yield 2; yield 3; } const generator = genFunc(); // <next 메서드 실행> // yield까지 실행 후 일시중단 // -> value에 yield 뒤에 오는 표현식의 평가결과를 반환, // done에 끝까지 실행되었는가에 대한 불리언값을 반환 // -> 더이상 남은 yield 표현식이 없으면 제너레이터 함수가 마지막까지 실행이 된 후, // {value: '제너레이터 함수의 리턴값', done: true} 반환 console.log(generator.next()) // {value: 1, done: false} console.log(generator.next()) // {value: 2, done: false} console.log(generator.next()) // {value: 3, done: false} console.log(generator.next()) // {value: undefined, done: true}

// 예제 46-09 function* genFunc() { const x = yield 1; const y = yield (x + 10); return x + y; } const generator = genFunc(0); // 아규먼트에 왜 0 넣어준지 모르겠음 let res = generator.next(); console.log(res); // {value: 1, done: false} res = generator.next(10); console.log(res); // {value: 20, done: false} res = generator.next(20); console.log(res); // {value: 30, done: true} // 일반적으로 제너레이터 함수의 반환값은 의미가 없음 // 따라서 값을 반환할 필요가 없고 return은 종료의 의미로만 사용해야 함

// async 함수 선언문 async function foo(n) { return n; } // async 함수 표현식 const bar = async function (n) { return n; } // async 화살표 함수 const baz = async n => n; // async 메서드 const obj = { async foo(n) { return n; } } // async 클래스 메서드 class MyClass { async bar(n) { return n; } const myClass = new MyClass(); // ❌불가능❌ class MyClass { async constructor() { } // SyntaxError: Class constructor may not be an async method } const myClass = new MyClass();

const getGithubUserName = async id => { const res = await fetch(`https://api.github.com/users/${id}`); // (1) const { name } = await res.json(); // (2) console.log(name); }; getGithubUserName('meenoie'); // mincheol.shin 출력 // (1) fetch 함수가 반환한 프로미스가 settled 상태가 될때까지 대기 후, // settled 상태가 되면 프로미스가 resolve한 처리 결과가 res 변수에 할당

const foo = async () => { try { const wrongUrl = 'https://wrong.url'; const response = await fetch(wrongUrl); const data = await response.json(); console.log(data); } catch (err) { console.error(err); // TypeError: Failed to fetch } }; foo(); // foo 함수의 catch 문은 HTTP 통신에서 발생한 네트워크 에러뿐 아니라 // try 코드 블록 내의 모든 문에서 발생한 일반적인 에러까지 모두 캐치할 수 있음

const foo = async () => { const wrongUrl = 'https://wrong.url'; const response = await fetch(wrongUrl); const data = await response.json(); console.log(data); }; foo() .then(console.log) .catch(console.error); // TypeError: Failed to fetch

// DOM에 button 요소가 존재하지 않으면 // querySelector 메서드는 에러를 발생시키지 않고 null을 반환 const button = document.querySelector('button'); // null button.classList.add('disabled');

try { // 실행할 코드 (에러가 발생할 가능성이 있는 코드) } catch (err) { // try 코드 블럭에서 에러가 발생하면 이 코드 블록의 코드가 실행됨 // err에는 try 코드 블록에서 발생한 Error 객체가 전달됨 } finally { // 에러 발생과 상관없이 반드시 한 번 실행됨 }

console.log('시작') try { foo(); } catch (err) { console.error(err); } finally { console.log('finally') } console.log('끝')

const error = new Error('에러');

try { throw new Error('something wrong'); } catch (error) { console.log(error); // Error: something wrong // at <anonymous>:2:11 }