Async + 배열 helper 기능

자바스크립트에는 비동기적 생태계가 있다.

 

아래는 배열의 helper 기능이 비동기 함수 setTimeout과 함께 쓰였을 때

어떤 값이 출력될지 확인해보는 예제이다.

 

---

 

const peppers = [5, 6, 6].map((e, i) => {
  setTimeout(() => {
    console.log(e)
    return 100
  }, 1000)
}) // what is peppers?

console.log(peppers)

퀴즈 1) peppers에는 무엇이 할당되었을까?

퀴즈 2) setTimeout의 log는 어떻게 찍힐까?

 

 

해설)

1. 먼저 map 기능이 동작된다. 이 기능은 매우 빠르게 모든 배열을 순회하며 setTimeout을 거의 동시에 동작시킨다.
2. settimeout의 return이 100인 것이지, map() => {}의 return이 100이 아니다. 따라서 map이 실행되면 배열에 undefined가 리턴된다. (배열에 아무것도 할당되지 않았다.)
3. map 기능이 모두 실행된 후 console.log(peppers)가 실행된다.
4. setTimeout은 1초 후 실행된다. 5, 6, 6을 출력하는 log가 거의 동시에 시작되었기 때문에 1초 후 모두 출력된다.

 

 

---

 

const friends = ['Tony Stark', 'Vision', 'Ultron'].reduce((a, b) => {
  setTimeout(() => {
    console.log('Greetings,', b)
  }, 2000)
  return a + b
}, '')

console.log(friends);

퀴즈 1) friends에는 어떤 값이 할당될까?

퀴즈 2) settimeout의 log는 어떻게 찍힐까?

 

 

해설)

1. 일단 reduce가 매우 빠르게 실행된다. setTimeout도 거의 동시에 실행된다.
2. reduce의 코드 진행에 맞게, 각 값이 하나씩 누적되며 Tony StartVisionUltron이 friends에 할당된다.
3. 2초 후 setTimeout의 log가 출력된다.

 

---

 

배운 점)

setTimeout은 그것을 품은 함수와 약간은 다른 시각을 가지고 볼 필요성이 있다.

setTimeout이 리턴한 값이 이것을 품을 함수의 return값이 되지 않는다.