[Javascript] 상속, 프로토타입 , class , Promise , async, await, Generator

자바스크립트 중급 강좌

 

 

이 포스팅에서 작성하는 내용은 자바스크립트 중급 강좌 에서 발췌하였습니다.

https://inf.run/QG5D

[무료] 자바스크립트 중급 강좌 - 인프런 | 강의

---

1. 상속, 프로토타입

• 위의 사진과 같이, 객체에 기본적으로 담겨있는 함수들 / 상속받은 함수들의 모임을 프로토타입이라고 한다.
• 객체 내부와 프로토타입에 같은 함수가 있다면? 
  객체 내부에 있는 함수가 동작 (탐색 순서 : 객체 > 프로토타입)

const animal = {
  sound() {
    console.log('animal');
  }
};

const dog = {
  legs: 4
};
dog.__proto__ = animal;

dog.sound();	// 'animal'

• 상속을 원하는 경우, 위의 예제처럼 __proto__ (언더바 2개씩) 을 이용해서 상속할 수 있다.
• key / value 를 사용하는 메소드는 상속된 프로퍼티까지 인식하지 않는다.
• hasOwnProperty(a) : 특정 객체에 a 프로퍼티가 있는 지 확인 (있으면 true / 없으면 false 상속된 객체는 못찾음)
• prototype : 사용자가 직접 생성자 함수에 넣는 것
• __proto__ : new를 호출할 때 prototype을 참조하여 만들어지는 것

 

 

 

2. class

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  printInfo() {
    console.log('name: ' + this.name + ', age: ' + this.age);
  }
}

const tom = new User('tom', 18);
tom.printInfo(); // name: tom, age: 18

// ** 상속 **
class ExtendedUser extends User {
  constructor(name, age, birthday) {
    super(name, age);
    this.birthday = birthday;
  }
  printInfo() {
    super.printInfo();
    console.log('birthday: ' + this.birthday);
  }
}
const mike = new ExtendedUser('Mike', 20, '2003-01-01');
mike.printInfo();
// name: Mike, age: 20
// birthday: 2003-01-01

• ES6 에 추가된 기능
• constructor / new 를 이용해서 해당 클래스의 인스턴스를 생성할 수 있다.
• extends 를 사용해서 클래스를 상속받을 수 있다.
• 프로토타입과의 차이점
  • 객체 내부에 함수가 세팅된다.
  • new 연산자를 붙이지 않으면 오류가 발생한다. (프로토타입 방식은 undefined)

 

 

 

3. Promise

const promiseTest = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success');
    // reject(new Error('error!!');
  }, 2000)
});

promiseTest.then(result => {
  console.log(result);
}).catch(err => {
  console.log(err);
}).finally(() => {
  console.log('END');
});

// success
// END

• 동기 처리 방식을 지원하는 함수이다.
• resolve, reject 는  callback 함수이다.
  • resolve : 함수 처리 결과가 성공적이라면 resolve
  • reject : 함수 처리 중 예상치 못한 결과가 나타나면 reject
• resolve() 를 호출하는 경우, then() 으로.
  reject() 를 호출하는 경우, catch() 로 가게 된다.
• finally() 는 then() / catch() 어디를 갔던 무조건 타는 영역이다.
• Promise.all() : Promise 함수들을 동시에 실행시켜서 모두 끝날 때까지 대기하는 메소드이다.
• Promise.race() : Promise 함수들을 동시에 실행시켜서 가장 먼저 완료된 함수를 결과값으로 이행
• Promise.any() : Promise 함수들을 동시에 실행시켜서 가장 먼저 성공한 객체 반환

 

 

 

4. async / await

function getStr(str) { 
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(str);
      // reject(new Error('error!!'));
    }, 1000);
  });
};

async function showStr(string) {
  try {
    const str = await getStr(string);
    console.log(str);
  } catch (err) {
    console.log(err);
  }
}

showStr('Iron Man');	// Iron Man

• async: function 앞에 async 키워드를 붙이면, 그 메소드는 Promise를 반환한다.
• await : async 메소드 내부에서만 사용할 수 있으며, await 메소드 뒤에 Promise 함수를 사용한다.
  await에 대한 에러 처리 방법은 try..catch 문을 사용한다.

 

 

5. Generator

function* generator() {
  console.log('1');
  yield 1;
  
  console.log('2');
  yield 2;
  
  return 'END';
}

let result = generator();	
result.next();	// 1
result.next();	// 2
result.next();	// {value: 'END', done: true}

• 함수를 단계별로 실행시켜주는 기능
• function 뒤에 * 을 붙여서 표현한다.
• 메소드 내부에 yield 라는 키워드를 이용해 단계를 표현할 수 있다.
• next() : 해당 함수의 다음 단계를 실행
• return() : 해당 함수의 실행 상태를 완료로 상태 변경
• throw() : 예외를 발생시키며 해당 함수의 실행 상태를 완료로 상태 변경