자바스크립트에서 비동기를 처리하는 주요 문법

1. 콜백 함수 (Callback)

콜백 함수는 비동기 작업이 완료된 후 실행되는 함수입니다.

주로 setTimeout, setInterval, 이벤트 리스너 등에서 사용됩니다.

javascript

 

function fetchData(callback) {

    setTimeout(() => { callback("데이터 로드 완료");

}, 1000); }

 

fetchData((message) => { console.log(message); // "데이터 로드 완료" }); 

 

fetchData함수호출 인수로 ()=>{ } 화살표 함수가 들어간다

fetchData( callback )  매개변수 callback으로 전달 된다

 

setTimeout() 함수에 인자로 ()=>{} , 1000 1초 후에 화살표 함수를 실행 시켜야 한다

 

setTimeout()  첫번째 인자 자리에 실행해야 할 구문에 callback("데이터 로드 완료") 호출한다

호출하면 화살표함수가 실행되고

 

콜백함수 쉽게 이렇게 생각하면 된다

콜 택시

콜을 하면 택시가 불러진다

 

함수안에 함수를 불렀기 때문에 콜백함수

"데이터 로드 완료" 가 화살표함수의 매개변수로 전달 돼서  

"데이터 로드 완료" 문자열이 message의 매개변수로 전달 된다

 

(message) => { console.log(message);

 

"데이터 로드 완료" 문자열이 출력된다

 

 

콜백 함수의 특징

 

콜백 함수는 단순히 다른 함수에 매개변수로 전달되고, 해당 함수 내에서 특정 작업을 완료한 후 나중에 호출되는 함수입니다.

• 콜백 함수의 주요 특징은:
  • 다른 함수의 매개변수로 전달된다.
  • 다른 함수 내에서 어떤 조건이나 작업이 완료된 후 호출된다.
  • 보통 비동기 작업이나 이벤트 처리 등에서 많이 사용된다.

함수 안에 들어간 콜백 함수 예시

javascript

 

function fetchData(callback) {

setTimeout(() => { const data = "데이터 로드 완료";

    callback(data); // 비동기 작업 후 콜백 함수 호출

}, 1000); }

 

function displayData(message) {

    console.log(message); // 콜백 함수

}

 

fetchData(displayData); // displayData는 콜백 함수로 전달

• 여기서 displayData는 콜백 함수입니다. fetchData 함수가 호출될 때 displayData 함수를 매개변수로 전달하고, 비동기 작업 후 callback(data)로 호출됩니다.

 

---

2. Promise

Promise는 비동기 작업의 완료를 나타내는 객체로, resolve(성공), reject(실패) 상태를 관리합니다. 비동기 작업이 완료되면 **then**이나 catch 메서드를 통해 결과를 처리합니다.

예시:

javascript

코드 복사

const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터 로드 완료"); }, 1000); }); }; fetchData() .then((result) => { console.log(result); // "데이터 로드 완료" }) .catch((error) => { console.error(error); });

---

3. async/await

async와 await는 Promise를 더 간결하게 처리할 수 있도록 도와주는 문법입니다.

• **async**는 함수가 Promise를 반환하게 하고,
• **await**는 Promise가 해결될 때까지 기다립니다.

예시:

javascript

코드 복사

const fetchData = async () => { const result = await new Promise((resolve) => { setTimeout(() => resolve("데이터 로드 완료"), 1000); }); console.log(result); // "데이터 로드 완료" }; fetchData();

---

비동기 문법 요약

1. 콜백 함수: 비동기 작업이 완료되면 실행될 함수 전달.
2. javascript
   코드 복사
   setTimeout(() => { console.log("작업 완료"); }, 1000);
3. Promise: 비동기 작업의 결과를 처리하는 객체.
4. javascript
   코드 복사
   new Promise((resolve, reject) => { resolve("완료"); }).then(result => console.log(result));
5. async/await: Promise를 간단하고 동기적인 코드처럼 작성.
6. javascript
   코드 복사
   const fetchData = async () => { const data = await someAsyncFunction(); console.log(data); };