js) 헷갈리는 콜백/callback 정리

항상 콜백은 머리를 어지럽게 해서 흐름을 정리 했다.  

1  const one = (callback) => {
2    const a = 'one 함수 실행 후 생기는 데이터';
3    console.log("one 함수");
4    
5    callback(a);
6  };
7  
8  const two = (a) => {
9    console.log(`${a}를 이용하는 two`);
10  };
11  
12  one(two);
13  
14  //print
15  one 함수 
16  one 함수 실행 후 생기는 데이터를 이용하는 two

 

코드 흐름 설명

12 one(two)

one 이 실행 되면서 two라는 인자가 넘어가게 되고

 

1 (callback)

callback이라는 매개변수에

two가 담긴다

one 함수에서 실행되는 함수를 모두 실행하면

2- a라는 데이터가 생기고

5- 매개변수(callback)로 넘겨준 callback(a)이라는 함수에 a라는 데이터를 넘길수 있게 된다.

그래서 식별자a  -> callback(a) 이렇게 순서가 보장된다.

 

8- 코드를 실행하면 위 흐름대로 코드가 실행되고 callback(a) 함수가 실행되면서

two(a) 함수가 실행되면서 

16  [one 함수 실행 후 생기는 데이터를 이용하는 two]

이 출력된다.

 

 

 

 

 

---

async 와 promise

async 함수는 항상 Promise 객체를 반환.

async 함수가 호출되면 반환값이 Promise로 감싸져서 반환된다는 의미. 

이 말은 **비동기 작업이 완료될 때까지 기다리는 약속(Promise)**을 제공한다는 뜻.

 

 

1  const A3 = async () => {
2    const a = 'A3 함수 실행 후 생기는 데이터';
3    return a; // 4. 첫 번째 A3() 함수 내에서 데이터 반환
4  };
5
6  const B3 = (a) => {
7    console.log(`${a}를 이용하는 B3`);  // 7. 'A3 함수 실행 후 생기는 데이터를 이용하는 B3' 출력
8  };
9
10  A3() // 1. 첫 번째 A3() 호출
11    .then((a) => { //1-2. Promise 반환되고 해결될 때까지 then 대기
12    console.log('A3 실행 성공!');  // 5. 'A3 실행 성공!' 출력
13      B3(a);  // 6. B3(a) 호출
14       
15      console.log('-----------'); // 8. '-----------' 출력
16    })
17    .catch((err) => {
18      console.log(err.message);
19    });
20
21  const func = async () => {
22    const a = await A3(); // 3. 두 번째 A3() 호출, 이때 Promise 반환되고 해결될 때까지 await은 대기
23     // 9. 두 번재 A3() 호출로 'A3 함수 실행 후 생기는 데이터'값을 await이 받아 a식별자에 담음.
24     
25      console.log('A3 실행 성공!!!!!!!!');  // 10. 'A3 실행 성공!!' 출력
26   
27      B3(a);  // 11. B3(a) 함수 호출후 B3(a) 함수 내 콘솔 출력
28	  // 두 번째 A3()에서 반환된 값이 a에 저장됨
29
30  };
31  func();  // 2. func() 호출, 내부에서 A3() 실행
32

//print
A3 실행 성공!
A3 함수 실행 후 생기는 데이터를 이용하는 B3
-----------
A3 실행 성공!!!!!!!!
A3 함수 실행 후 생기는 데이터를 이용하는 B3

 

처음 쳇지피티의 도움을 받고 계속 반복적으로 중얼거리며 익혔다.

 

 

 

 

A3() 함수 호출 / .then() 대기

10- 첫 번째 A3()함수가  호출되고 promise를 반환한다.

11- .then()을 실행되지 않고 비동기적으로 대기상태가 되면서

1- A3()내부 코드가 실행되고 return 값은 비동기적으로 반환된다.

 

func() 함수 호출 / await A3() 대기

31- func() 함수(비동기)가 내부에서 await A3()함수를 호출하고 A3()의 promise를 반환 한다.

22- A3()가 두 번째 호출되고 await은 promise가 해결될 때까지 대기한다.

await은 두 번째 A3()에서 반환된 "A3 함수 실행 후 생기는 데이터"를 await로 받는다.

 

.then() 대기끝 / 첫 번째 A3() 함수 실행.

첫 번째 A3()가 실행되고  비동기 작업이 끝난 후,  3- return값  "A3 함수 실행 후 생기는 데이터"가 
11- then()에 의해 전달된다. then() 내부로 들어가 12- 'A3 실행 성공!' 콘솔이 출력되고, 

13- B3( a) 호출하고 6- B3()함수로 가서 ("A3 함수 실행 후 생기는 데이터를 이용하는 B3") 출력 후
15- 호출한 B3(a)로 다시 돌아와 "-----------" 출력한다.

 

22- 자바스크립트엔진은 그 후속 작업으로 두 번째 A3()에서 반환된 값을  await을 통해 a식별자에 저장한다.

25- 그리고 'A3 실행 성공!!!!!!' 콘솔이 출력되고

27- B3(a) 함수가 호출되서

7- a값을 들고('A3 함수 실행 후 생기는 데이터') B3() 내부 콘솔이 출력된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 

나, 제로베이스 강의 -  , 쳇지피티