프로미스와 async/await

프로미스

• 프로미스는 자바스크립트에서 비동기 작업을 다루는 객체로써, 비동기 작업이란 네트워크 요쳥, 데이터 베이스 쿼리, 파일 조작,DOM 등 시간이 오래걸리거나 완료까지 시간이 불확실한 작업
• 비동기 작업은 자바스크립트 엔진이 아닌 백그라운드에서 실행되며, 자바스크립트가 코드를 백그라운드에서 동시에 처리할 수 있도록 하는 작업
• 처리가 지연되는 요청들을 동기적으로 처리하면 다음 작업 처리까지 작업이 블로킹 되기 때문에 백그라운드에서 비동기적으로 처리하여 블로킹하지 않고 비동기적으로 처리하는 것이 포인트

프로미스 3가지 상태

• 대기(pending): 비동기 작업이 진행 중인 상태
• 이행(fulfiled) : 비동기 작업이 성공적으로 완료된 상태.
• 거부(rejected): 비동기 작업이 실패한 상태

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공적으로 작업이 완료되면 resolve(value) 호출
  // 작업이 실패하면 reject(error) 호출
});

async/await

• async/await은 프로미스를 기반으로한 비동기작업을 보다 간결하고 동기적으로 코드를 작성할 수 있게 해주는 문법
• async키워드로 함수앞에 비동기 함수임을 선언함
• 함수내부에서 await 키워드를 사용하여 프로미스를 처리, await은 프로미스가 이행될때 까지 기다린 다음, 프로미스의 결과값을 변환함

// 비동기 작업을 수행하는 함수 (프로미스를 반환하는 함수)
function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 시뮬레이션 (1초 후 데이터 반환)
    setTimeout(() => {
      const data = { name: "John", age: 30 };
      resolve(data); // 성공적으로 작업 완료
      // reject(new Error("Failed to fetch data")); // 작업 실패
    }, 1000);
  });
}

// async 함수에서 await를 사용하여 fetchData 함수 호출
async function getData() {
  try {
    const result = await fetchData();
    console.log("Data:", result);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

getData(); // getData 함수 호출

클로져

• 함수가 자신이 선언될 떄의 환경(스코프)을 기억하여 이후에 호출될 때에도 그 환경에도 접근할 수 있도록함
• 클로저는 함수와 그 함수가 선언된 렉시컬 스코프의 조합
• 렉시컬 스코프는 함수가 선언될때 함수가 속한 스코프를 의미함
• 함수 내부에서 정의된 함수가 외부 함수의 변수에 접근할 때 클로저가 형성됨

function outerFunction() {
  const outerVariable = 'I am from the outer function';

  function innerFunction() {
    console.log(outerVariable); // 클로저: innerFunction은 외부 함수인 outerFunction의 변수에 접근할 수 있음
  }

  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 출력: "I am from the outer function"