async, await와 forEach..를 통해 변경한 값이 안바뀌는 오류

forEach를 통해 한 객체의 값을 await 을 통해서 받아온 값으로 변경하고,

변경된 객체를 백엔드로 보내서 db에 삽입하려 했다.

 

이상하게 분명 변경이 된 것 같은데..

콘솔로 출력해보면 변경된 값이 잘 반영되서 뜨는데..

실제로 백엔드에서 받는 값은 변경 전 값인 버그가 생겼다.

 

_.cloneDeep을 사용해서 깊은 복사 후 출력해보니.. 진짜 값이 안바뀌었다...!

 

한 두시간 정도 낭비하고나서야 그 이유를 알았다.

 

바로 자바스크립트의 동기 비동기 때문ㅜ

 

items.forEach( async (e:any)=> {
               let a = await ~~네트워크 통신 코드~~;
	   e.id = a.id;
            }

console.log(items);

await 백엔드에 items보내서 db에 입력하는 코드~~;

이런 식으로 코드를 짰었다.

 

forEach안에 await을 써서 매개변수값을 바꾸려면 매개변수 받아오는 부분 앞에 async가 있어야 한다.

저 async는 forEach에 한해서만 기다려주니까

저 통신을 기다릴 동안 바로 db insert가 실행되어버린 이었다..ㅜ

 

그니까

1. await 통신 시작

2. insert 실행

3. await 통신 완료

4. console 출력

 

이런 순서로 꼬여버리게 된 것....

 

 

그냥 forEach안쓰고 for로 돌리면 아주 간단하게 해결된다.

for에는 async안 붙여도 되니까 메서드 단위로 기다려주기 때문인 것 같다.. 

괜히 forEach써서 하려다가 시간만 날린 버그ㅜㅜ

 

동기 비동기를 더 정확하게 공부해야겠다!