[javascript] 배열 5-1 / 배열 변환 (map, filter, flatMap)

map()

• 배열의 모든 요소에 대해 콜백 함수를 실행하고, 그 결과를 모아 새로운 배열을 반환함.
• 원본 배열은 변하지 않음
• 원본 배열과 길이가 동일
• 변환 중심 메서드 (요소 변경)

✓ 지도는 길을 변환해서 보여줌 → map은 값을 변환

---

기본 문법

// [문법]
배열.map((요소, 인덱스, 배열) => {
  return 변환값;
});

// [문법 - 한 줄 반환이면 중괄호 {}와 return 생략 가능]
배열.map(요소 => 변환값);

구분	설명
요소	현재 순회 중인 배열의 값
인덱스	현재 요소의 인덱스 (선택)
배열	map을 호출한 원본 배열 전체 (선택)
반환	변환된 요소들로 이루어진 새로운 배열

const numbers = [1, 2, 3];
const squares = numbers.map(num => num * num);

console.log(squares); // [1, 4, 9]

---

filter()

• 배열의 모든 요소 중 조건을 만족하는 요소만 추출해서 새로운 배열을 만듦.
• 조건이 true일 때만 요소가 결과 배열에 포함됨.
• 원본 배열은 변하지 않음
• 반환 배열의 길이는 원본보다 짧거나 같음
• 조건 중심 메서드

✓ 필터는 필요 없는 건 걸러내고, 필요한 것만 남긴다 → filter는 true인 것만 남긴다

---

기본 문법

// [문법]
배열.filter((요소, 인덱스, 배열) => {
  return 조건식; // true면 결과 배열에 포함
});

// [문법 - 간단히 조건만 쓰면 더 짧게 가능]
배열.filter(요소 => 조건식);

구분	설명
요소	현재 순회 중인 배열의 값
인덱스	현재 요소의 인덱스 값 (선택)
배열	원본 배열 (선택)
반환	true / false 결과를 반환해야 함 → true일 경우 결과 배열에 포함 조건을 만족하는 요소들로 이루어진 새로운 배열

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(x => x % 2 === 0);
console.log(even); // [2, 4]

---

flatMap() (ES6+)

• map()과 flat()을 결합한 메서드
• 각 요소를 매핑한 후 결과를 한 단계(flat) 펼쳐줌.
• 배열 안에 배열이 있는 경우 유용
• map() 후 flat(1)을 자동 적용
• 2단계 이상 평탄화는 지원하지 않음 (즉, flatMap()은 1단계까지만 펼침)
• 변환 + 평탄화가 동시에 필요한 경우 효율적

✓ "map으로 변환 후, 접힌 걸 펴준다(flat) → flatMap"

---

기본 문법

// [문법]
배열.flatMap((요소, 인덱스, 배열) => {
  return 변환값;
});

// [문법 - 한 줄 형태]
배열.flatMap(요소 => 변환값);

구분	설명
요소	현재 순회 중인 배열의 값
인덱스	현재 요소의 인덱스 값 (선택)
배열	원본 배열 (선택)
반환	- 일반 값 → 그대로 결과 배열에 추가 - 배열 값 → 1단계까지만 자동으로 펼쳐짐(flat) * map()처럼 변환하지만, 결과가 배열이면 1단계 평탄화까지 자동 적용됨.

/* 단순 변환 + 평탄화 */
const words = ["Hello", "World"];
const result = words.flatMap(word => word.split(""));

console.log(result); // ['H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd']

/* 조건부 변환 */
const numbers = [1, 2, 3, 4];
const result = numbers.flatMap(num => (num % 2 === 0 ? [num, num * 2] : []));

console.log(result); // [2, 4, 4, 8]