4월 20일 cs : Promise,await, Closure

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

프로미스(Promise)는 자바스크립트 비동기 처리에 사용되는 객체입니다. 비동기 처리란, 어떤 작업을 수행할 때 그 결과가 나오기까지 시간이 걸리는 작업을 의미합니다. 예를 들어, 파일을 읽거나 데이터베이스에서 데이터를 가져오는 작업은 결과가 나오기까지 시간이 걸리기 때문에 비동기 처리가 필요합니다.

프로미스는 비동기 처리를 위해 사용되며, 일반적으로 다음과 같은 형태로 사용됩니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (작업이 성공) {
    resolve(결과);
  } else {
    reject(에러);
  }
});

promise.then((결과) => {
  // 결과 처리
}).catch((에러) => {
  // 에러 처리
});

프로미스는 new Promise()로 생성하며, 생성자 함수의 인자로는 resolve와 reject 함수를 인자로 받습니다. 작업이 성공하면 resolve 함수를 호출하고, 실패하면 reject 함수를 호출합니다.

이렇게 생성된 프로미스 객체는 then()과 catch() 메서드를 가지며, then() 메서드는 작업이 성공했을 때 실행되며, catch() 메서드는 작업이 실패했을 때 실행됩니다. then() 메서드와 catch() 메서드는 각각 콜백 함수를 인자로 받으며, 콜백 함수에는 각각 resolve()와 reject() 함수를 호출할 때 넘겨준 인자가 전달됩니다.

async/await는 ES8(ECMAScript 2017)에서 추가된 비동기 처리 패턴입니다. async/await는 프로미스를 기반으로 동작하며, 코드의 가독성을 높이고 비동기 처리를 보다 간편하게 처리할 수 있도록 해줍니다.

async 함수는 함수 선언문이나 함수 표현식 앞에 async 키워드를 붙여서 만듭니다. async 함수 내부에서는 await 키워드를 사용하여 프로미스 객체가 처리되고 결과가 반환될 때까지 기다릴 수 있습니다. 이 때, async 함수 내부에서 await 키워드를 사용한 코드는 비동기 처리가 완료되기 전까지는 다음 코드로 넘어가지 않습니다.

async function myFunction() {
  try {
    const result = await promise; // 프로미스 객체의 처리를 기다림
    // 비동기 처리 완료 후 처리할 코드
  } catch (error) {
    // 에러 처리
  }
}

async 함수는 프로미스 객체를 반환하며, 반환된 프로미스 객체는 then()과 catch() 메서드를 사용하여 처리할 수 있습니다.

클로저 (Closure)란 무엇인가요?

스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 렉시컬 스코핑(Lexical scoping)라 한다.

클로저(Closure)란, 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical Environment)과의 조합으로 만들어진 특별한 객체입니다. 클로저는 함수 내부에서 선언한 변수를 외부에서 참조할 수 있도록 해줍니다.

좀 풀어말하면 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.

예를 들어, 다음과 같이 함수 내부에서 선언한 변수를 외부에서 참조하는 경우, 클로저가 생성됩니다.

function outerFunction() {
  const outerVariable = 'outer';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const inner = outerFunction();
inner(); // "outer"

위 예제에서, outerFunction() 내부에서 선언한 outerVariable 변수를 innerFunction() 내부에서 참조하고 있습니다. 이 때, outerFunction()의 실행 컨텍스트가 종료되어도 innerFunction()이 outerVariable 변수를 계속 참조할 수 있도록 클로저가 생성됩니다.

클로저는 주로 다음과 같은 상황에서 사용됩니다.

정보 은닉(Information Hiding): 함수 내부에 선언한 변수를 외부에서 직접 접근하지 못하게 하여 정보를 보호할 수 있습니다. 즉 전역변수의 사용을 억제 해 많은 오류를 예방할 수 있다.
캡슐화(Encapsulation): 함수를 사용하여 객체를 생성하고, 클로저를 이용하여 객체 내부의 변수와 메서드를 숨길 수 있습니다.
함수 팩토리(Function Factory): 함수를 반환하는 함수를 만들어서, 반환된 함수가 자신이 만들어질 때의 렉시컬 환경을 기억하도록 할 수 있습니다.
클로저는 자바스크립트에서 중요한 개념 중 하나이며, 함수형 프로그래밍에서는 불변성과 함수의 순수성을 보장하기 위해 불가피하게 사용됩니다.

출저
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
https://poiemaweb.com/js-closure