[6회 - 데일리과제] Promise, async & await / 클로저

1. 프로미스(Promise)와 async/await에 대해 설명해보세요.

프로미스(Promise)는 비동기 처리를 위한 것이고 async/await는 프로미스를 좀 더 간결하게 사용되기 위한 문법입니다. async 키워드는 함수 앞에 붙는 키워드로, 해당 함수가 비동기 함수임을 의미합니다. async함수는 항상 Promise를 리턴하죠. await 키워드는 async 함수 내부에서만 사용 할 수 있으며, Promise가 resolved 또는 reject될 때까지 기다립니다.

에러핸들링의 차이점으로 프로미스를 활용할 때는 .catch ()문을 통해 에러를 핸들링 하지만 async await는 에러핸들링을 따로 하지 않고 try-catch문을 활용해야 합니다. 코드의 가독성 차이도 있습니다. 프로미스는 콜백지옥은 벗어났지만 .then의 지옥에 빠지는 가능성이 있습니다. 또한 코드가 길어질수록 async/await를 활용한 코드가 가독성이 좋습니다. async/await는 비동기 코드를 동기처럼 읽히게 해줍니다.

2. 스코프와 클로저란 무엇인가요?

 

스코프

스코프란 변수에 접근하거나 참조할 수 있는 위치를 의미합니다.

자바스크립트에서는 전역스포크와 지역스코프가 있습니다.

엘라의 Scope & Closure - 우아한 테크톡

 

엘라의 Scope & Closure - 우아한 테크톡

 

---

클로저

클로저는 함수 안에 또 다른 함수가 있을 때, 안쪽의 함수가 바깥쪽의 함수의 변수에 접근할 수 있도록 해주는 기능입니다. 이를 통해 안쪽의 함수는 바깥쪽의 함수가 끝나고 사라진 후에도 그 변수를 계속 사용할 수 있습니다.

이렇게 클로저를 사용하면 변수를 보호하거나 데이터를 숨기는 등의 기능을 구현할 수 있습니다. 

클로저에 의해 참조된 변수를 자유변수라고 합니다. 

<클로저 예제>

const x = 1;

function outer() {
  const x = 10;
  const inner = function () {
    console.log(x);
  };
  
  return inner;
}

const ella = outer();
ella(); //10

ella라는 함수에 outer를 집어넣으면서 실행 컨텍스트 스택에서 x = 10;은 사라진 것으로 보입니다.

그러나 실행결과를 보면 x = 10으로 나옵니다.

이유는 아우터 실행 컨텍스트는 종료되었지만, ella함수에서 outer함수를 참조하고,

그 안에 있는 변수까지 참조하고 있기 때문에 자유변수로써 참조하여 사용할 수 있습니다.

이런 현상을 클로저라고 합니다.