[JS] async/await 구문 안에서 .filter 배열 메소드를 사용하기

async/await 구문 내에서 Array.filter 구문을 사용할 수 없다는 걸 알게 되고 찾아본 코드

.filter 뿐만 아니라 다양한 메소드 및 키워드들이 비동기 처리 구문 내에서 활용이 안되는 것 같다. 

 

필요해서 갖다 써 놓고 이해가 가지 않는 코드에 대해 뜯어보는 중이다. 

온전히 이해하려면 JS의 비동기식 프로그래밍, Promise 객체, async/await 그리고 Symbol 타입까지 알아봐야함. 

 

일단은 써놓고 어떻게 돌아가는지도 파악 못하는 건 우습기 때문에 사용한 부분이라도 알아본다. 

 

해당 파트의 구조.

 

1. asyncFilter 함수를 정의한다. 이 함수의 기능은 아래와 같다. 

 

   Promise.all 구문을 이용해 인자로 주어진 원본배열의 모든 요소를 순회한다. 

 

   이때 Promise.all을 사용할 수 있는 것은

   asyncFilter의 callback 함수에 포함된 doAsyncStuff 함수가 

   배열 요소 하나를 순회할 때마다 매번 Promise를 반납해주기 때문이다.

 

    순회하면서 .map 메소드를 이용해 새로운 배열을 생성하는데

 

         1) 현재 순회중인 배열의 요소가 조건식을 충족할 경우 그 값을 배열에 넣고

         2) 조건식에 맞지 않다면 변수 fail에 정의한 임의의 값, Symbol 을 배열에 넣는다.

           (*이렇게 하는 이유는 .map 메서드의 특성 때문임. 원본 배열과 동일한 length의 배열을 리턴)

 

         *이때 조건식은 callback 함수로 불러들인다는 점, 그 문법의 사용도 잘 살펴보자. 

 

         3) 그리고 이 배열을 "리턴할 때"

             .filter를 붙여서 Symbol 값이 들어간 부분들을 제외한

             즉 의도한 조건식에 맞는 요소들만으로 구성된 배열을 반납한다. 

 

2. doAsyncStuff 함수는 단순히 어떤 비동기 처리 행위를 해서 Promise를 반납하기 위해 정의한 함수이다.

    (아마도 이 부분에선 어떤 것이든 Promise를 반환하는 키워드를 채워 넣으면 될 것 같다?)

 

 

3.  asyncFilter 라는 함수를 호출하면서 인자로 아래의 2가지를 넣는다.

    1) filter할 원본 배열 (all_comments)

    2) 콜백 함수 - doAsyncStuff를 실행한 뒤 filtering의 조건식을 반환함. 

 

    그리고 이 asyncFilter 함수의 리턴값은 filtered_comments 라는 변수 (배열)에 할당한다.

 

 

 

 

이 글을 쓰는 중에 이해가 됨 오호

 

// 댓글 조회 API (no login)
router.get("/comment/:articleId", async (req,res) => {                  
  const { articleId }= req.params;
  const all_comments = await Comments.find(); 
  
  
  //여기부터
  
  
  // 3. asyncFilter 함수를 호출하며 원본 배열과 콜백함수를 인자로 넣어준다.
  // 이 때 콜백함수는 doAsyncStuff() 함수를 호출하고, filtering의 조건식을 반환한다. 
  const filtered_comments = await asyncFilter(all_comments , async item => {
    await doAsyncStuff()
    return item["location"] == Number(articleId)
  }) 

// 2. Promise를 반환하기 위한 함수를 정의한다.
  function doAsyncStuff() {
    return Promise.resolve()
  } 
 
 // 1. asyncFilter 함수를 정의한다. 필터링의 과정은 본문에.
  async function asyncFilter(arr, callback) {
    const fail = Symbol()
    return (await Promise.all(arr.map(async item => (await callback(item)) ? item : fail))).filter(i=>i!==fail)
  } 
  
  
  //여기까지 잘 뜯어보기


  function compare (key) {
    return (a, b) => (Date.parse(a[key]) < Date.parse(b[key]) ? 1 : (Date.parse(a[key]) > Date.parse(b[key]) ? -1 : 0));
  }
  const comments = filtered_comments.sort(compare("date"));

  res.json({
    comments
  });
});