[JS] Why does JavaScript map function return undefined?

문제 상황

      const AllCourierIds = [{id: 1, ...}, {id: 2, ...}, {id: 3, ...}]
        .map((courier) => {
          if (courier.id !== 3) {
            return courier.id;
          }
        }).join();

원했던 결과물(AllCourierIds)는 '1,2' 였는데 ,가 끝에 붙어서 나왔다.

원인

      const AllCourierIds = [{id: 1, ...}, {id: 2, ...}, {id: 3, ...}]
        .map((courier) => {
          if (courier.id !== 3) {
            return courier.id;
          }
        })    // [1, 2, undefined]
        .join();  // ,로 구분하기 때문에 '1,2,'가 나오는 게 맞다

해결책

• Why does JavaScript map function return undefined?

The map function is used to map one value to another, but it looks like you actually want to filter the array, which a map function is not suitable for.

map 함수는 한 개의 값을 다른 값으로 바꿀 때 사용됩니다. 하지만 당신이 원한 건 배열에서 특정 원소를 필터링하는 것 같네요. 그럼 map 함수는 적합하지 않습니다.

수정한 코드

      const AllCourierIds = [{id: 1, ...}, {id: 2, ...}, {id: 3, ...}]
        .filter((courier) => courier.id !== 3)
        .map((courier) => courier.id)
        .join();

🤔오늘의 교훈 : 필터링을 할 때는 filter() 함수를 사용하자