자바스크립트 중급 (6) - Class, Promise, async, await, Generator

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다.

[자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s)

---

1. Class

class는 ES6에 추가된 스펙이다.

const User = function(name, age){
    this.name = name;
    this.age = age;
    this.showName = function(){
    console.log(this.name);
    };
};

const mike = new User("Mike", 30);

console.log(mike); // User{name : "Mike", age: 30, showName()};


// Class 사용
class User2 {
    constructor(name, age){
    this.name = name;
    this.age = age;
    };
    showName(){console.log(this.name)};
};


const tom = new User2("Tom", 19);

 

class 내에는 객체를 만들어주는 생성자 메소드인 constructor가 존재한다.

showName처럼 class가 정의한 메소드는 User2의 프로토타입으로 저장된다.

class를 사용하지 않았을 땐 new 생성자를 붙이지 않으면 undefined로 반환되었지만, clas`에서는 TypeError가 발생한다.

객체에 for ... in 문을 사용했을 때 class의 속성은 제외된다.

class에서는 extends를 사용해서 상속한다.

class Car {
    constructor(color){
    this.color = color;
    this.wheels = 4;
    };
};


class Bmw extends Car {
    park(){
    console.log("PARK");
    };
};


const z4 = new Bmw ("blue"); // Bmw {park(), prototype{}}

class Car {
    constructor(color){
    this.color = color;
    this.wheels = 4;
    };
    stop(){console.log("STOP!")};
};

class Bmw extends Car {
    stop(){
    super.stop(); // 프로토타입의 속성 불러옴 => 메서드 오버라이
    console.log("OFF");
    };
};


const z4 = new Bmw("blue");
z4.stop(); // "STOP!" // "OFF"

✔️ 자식 class에도 constructor를 할당하고 싶다면 super()로 항상 this를 실행하기 전에 부모 constructor를 불러와야 한다.

---

2. Promise

new Promise 생성자가 반환하는 promise 객체는 state와 result를 프로퍼티로 갖는다.

.then()을 통해서 resolve와 reject를 둘 다 처리 가능하지만,  .catch()로 reject를 따로 빼주는 것이 좋다.

.finally()는 결과가 resolve이던 reject이던 간에 마지막에 실행된다.

const pr = new Promise((resolve, reject)=>{// 실행할 code});
pr.then(function(result){};).catch(function(result){}).finally(function(){console.log("끝"});

 

callback

어떤 일이 실행되고 난 후에 실행되는 함수

 

promise chaining

f1().then((res)=>f2(res)).then((res)=>f3(res))...

promise chaining은 순차적으로 진행된다. 맨 마지막 함수가 실행되기까지 기다렸다가 값을 반환한다.

 

promise.all()

함수가 한꺼번에 실행되며, 만약 promise 함수 중 하나라도 rejection이 있다면 error가 발생하며 아무 값도 얻지 못한다.

 

promise.race()

하나라도 완료가 되면 나머지가 계산중이여도 상관하지 않고 바로 완료된 값을 반환한다.

---

3. async, await

async는 항상 promise를 반환한다.

await는 async 함수 안에서만 사용 가능하며, await 다음에는 promise 함수가 온다.

async function getName(){
    return "Mike"
};

getName().then((name)=>{console.log(name)};


async function showName(){
    const result = await getName('Mike');
};


showName();
// promise 함수가 실행되기까지 기다리다가 resolve 반환되면 result에 값을 반

• async await 문에서 catch를 작성할 때 try{//실행할 코드}catch(){//error code} 형식으로 작성한다.

async function order(){
    try{
    const result1 = await f1();
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(result3);
    } catch(e){
    console.log(e);
    };
};


order();

---

4. Generator

generator

함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능으로, function* 형식으로 사용한다.

.next()를 실행 시, generator는 {value : n, done : f/t}를 반환하며, done은 실행이 완전히 끝났는지의 여부를 보여준다.

generator 함수 안에는 yield가 들어가는데, a.next() 실행시 가장 가까운 yield 1에서 멈추고, 그 다음 a.next() 실행시 그 다음 코드가 실행되다 yield 2에서 멈춘다.

yield 옆에 있는 값이 value로 들어가며, 값이 없을 땐 undefined를 반환한다.

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

const a = fn();

a.next(); // {value : 1, done : false}
a.next(); // {value : 2, done : false}
a.next(); // {value : 3, done : false}
a.next(); // {value : "finish", done : true}

 

next()

generator 함수 계속 진행

 

return()

generator 함수를 끝냄. return() 안에 값을 집어넣으면 해당 값을 반환함.

 

throw()

generator 함수를 error로 반환하면서 끝내버림. 이 때의 value는 undefined이다.

✔️ generator 함수는 iterable임과 동시에 iterator이다.

✔️ generator는 외부로부터 값을 입력받을 수 있다. 이 때의 value는 yield가 아닌 외부 값이 된다. a.next(2)

✔️ generator는 값을 미리 만들어두지 않기 때문에 메모리 관리 측에서 효율적이다.

✔️ yield* fn()을 통해 generator 안에 또 다른 generator를 불러올 수 있다.

 

iterator

• value와 done 속성을 가진 객체를 반환하는 next 메서드를 가져야 한다.
• 작업이 끝나면 done은 true를 갖는다.