[TIL] 2023/10/13 스파르타 내일배움캠프 JAVASCRIPT 4주차

콜백 함수

• 콜백 함수를 실행할 때 제어권은 그 함수를 실행하는 자에게 제어권이 있다.
  // ex) setInterval, setTimeOut
• 인자에 대한 제어권
  // ex) map, filter, find, forEach

콜백 함수 thisbinding

• 콜백 함수는 기본적으로 this 전역객체를 가리킨다.
• 예외) btn.addEventListener - 가리키는 값(btn)을 this로 받아온다.

this bind(객체)

var obj1 = {
 name: "obj1",
 func: function () {
   console.log(this.name);
 },
};

let boundObj1 = obj1.func.bind(obj1);
setTimeout(boundObj1, 1000);

let obj2 = { name: "obj2" };
// obj1에 obj2의 객체를 bind함.
setTimeout(obj1.func.bind(obj2), 1500);

동기 함수와 비동기 함수

• 동기 함수 // 직렬적이다.

• 비동기 함수 // 병렬적이다.

• 비동기 함수를 동기 함수로 바꿀 수 있다.
  // 콜백지옥을 안 겪을 수 있는...
  // 바꾸는 이유 (순서를 보장 받지 못하는데 순서를 보장받기 위해서다.)

• promise - then

new Promise((resolve)=>{
		setTimeout(function(){
        }},500)
        .then)(다음에 실행할 것)

• generator
  //////

• async 와 await

// promis를 반환하는 함수
var addCoffee = function (name) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(name);
    }, 500);
  });
};

var coffeeMaker = async function () {
  var coffeeList = "";
  var _addCoffee = async function (name) {
    coffeeList += (coffeeList ? ", " : "") + (await addCoffee(name));
  };
  // promise를 반환하는 함수인 경우, await를 만나면 무조건 끝날 때까지 기다린다.
  await _addCoffee("에스프레소"); // addCoffee를 반환할 때까지 기다린다.
  console.log(coffeeList);
  await _addCoffee("아메리카노");
  console.log(coffeeList);
  await _addCoffee("카페모카");
  console.log(coffeeList);
  await _addCoffee("카페라떼");
  console.log(coffeeList);
};
coffeeMaker();