개발/front-end

[JavaScript] flatMap

Developer.do.de.gee 2024. 6. 6. 21:52
반응형

evtSprtrList?.flatMap(sp => sp.lowEvtSprtrList);

주어진 JavaScript 코드 evtSprtrList?.flatMap(sp => sp.lowEvtSprtrList);는 evtSprtrList 배열이 정의되어 있고 null이 아닌 경우 각 요소의 lowEvtSprtrList 속성을 추출하고 이를 하나의 배열로 평탄화(flatten)하는 작업을 수행합니다.

이 작업을 설명하고자 할 때, 아래와 같은 예시와 함께 단계별로 설명해 보겠습니다:

예시 데이터

const evtSprtrList = [
  {
    id: 1,
    lowEvtSprtrList: [10, 20, 30]
  },
  {
    id: 2,
    lowEvtSprtrList: [40, 50]
  },
  {
    id: 3,
    lowEvtSprtrList: [60]
  }
];

코드 설명

flatMap 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 그 결과를 평탄화하여 단일 배열로 만듭니다.

단계별 설명

  1. Optional Chaining (?.) 사용:
    • evtSprtrList가 null 또는 undefined일 때, flatMap 메서드를 호출하지 않고 undefined를 반환하여 이후의 오류를 방지합니다.
  2. flatMap 메서드:
    • flatMap 메서드는 배열의 각 요소에 대해 콜백 함수를 호출한 후 결과를 하나의 배열로 결합합니다.
    • sp => sp.lowEvtSprtrList 콜백 함수는 각 요소(sp)의 lowEvtSprtrList 속성을 반환합니다.

동작 설명

위의 예시 데이터와 함께 코드를 실행하면 다음과 같은 단계를 거칩니다:

const flattenedList = evtSprtrList?.flatMap(sp => sp.lowEvtSprtrList);
console.log(flattenedList); // 출력: [10, 20, 30, 40, 50, 60]

결과

flatMap은 각 lowEvtSprtrList 배열을 추출하고 이를 하나의 배열로 평탄화하여 [10, 20, 30, 40, 50, 60] 결과를 반환합니다.

따라서, 주어진 코드는 evtSprtrList 배열이 존재하는 경우 각 요소의 lowEvtSprtrList 속성 값들을 결합한 단일 배열을 생성합니다. evtSprtrList가 null 또는 undefined일 경우 undefined를 반환합니다.


연관된 글 :

[개발/Java] - [Java] Stream API - map과 flatMap

참고:

https://devjem.tistory.com/41

https://jerryjerryjerry.tistory.com/159

반응형