Array

개념 flatMap은 각 요소를 매핑한 결과를 한 단계만 평탄화하는 배열 메서드 arr.map(fn).flat(1)과 동등 동작 콜백 시그니처 (value, index, array) 콜백이 배열을 반환하면 concat 후 depth 1 평탄화 더 깊은 중첩은 유지됨 희소 배열의 빈 슬롯은 평탄화 과정에서 제거됨 ES2019 이후 표준 지원 범위 넓음 예시 const arr = [1, 2, 3, 4] arr.flatMap(x => [x * 2]) // => [2, 4, 6, 8] arr.flatMap(x => [[x * 2]]) // => [[2], [4], [6], [8]] const s = ["it's Sunny in", "", "California"] s.flatMap(x => x.split(" ")) // => ["it's","Sunny","in","","California"] 주의와 팁 깊이 2 이상 평탄화 필요 시 flat(depth) 사용 또는 map + flat 조합 고려 콜백은 배열을 반환하는 패턴 권장, 스칼라를 섞으면 의도치 않은 구조 발생 가능 희소 배열 처리 시 구멍이 사라지는 특성 주의 성능상 불필요한 중첩 생성은 피하고 필요한 경우에만 flatMap 사용 권장 참고자료 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

개요 리터럴 선언 시 조건에 따라 요소나 속성을 넣었다 뺄 수 있는 패턴 정리 분기문 없이 스프레드 연산자만으로 가독성 유지 사용법/예시 배열은 피연산자가 이터러블이어야 하므로 삼항 연산자 사용 const arr = [ ...(cond ? [1, 2, 3] : []), 4, 5, 6, ] // cond === true => [1, 2, 3, 4, 5, 6] // cond === false => [4, 5, 6] 객체는 원시값을 스프레드해도 자체 속성이 없어 무시됨 불리언화로 안전성 확보 const obj = { ...(!!cond && { a: 1, b: 2 }), c: 3, d: 4, } // cond === true => { a: 1, b: 2, c: 3, d: 4 } // cond === false => { c: 3, d: 4 } 주의 사항 배열에서 …(cond && [1,2,3]) 사용 금지, cond가 false면 이터러블 아님 오류 발생 객체에서 null이나 undefined를 그대로 스프레드하면 오류 가능, !!cond로 불리언화하거나 cond ? {..} : {} 형태 권장 타입스크립트에서는 && 패턴이 타입 좁히기 미흡할 수 있음, 삼항으로 빈 객체 반환 또는 적절한 타입 주석 권장 ...