💻 Dev

🛠️ 처음부터 만드는 Flatten — 중첩 배열을 평탄화하기

# 문제
데이터가 여러 단계로 중첩된 배열이라면?
```javascript
const nested = [1, [2, 3], [[4, 5]], 6];
// → [1, 2, 3, 4, 5, 6] 으로 펼쳐야 함
```
# 기본: 재귀로 구현하기
```javascript
function flatten(arr) {
const result = [];
for (const item of arr) {
if (Array.isArray(item)) {
result.push(...flatten(item));
} else {
result.push(item);
}
}
return result;
}
flatten([1, [2, 3], [[4, 5]], 6]);
// [1, 2, 3, 4, 5, 6]
```
어떻게 동작하는가:
  • 배열 순회하며 각 원소 확인

  • 배열이면 재귀 호출해서 펼침

  • 아니면 그냥 추가

  • # 심화: 깊이 제어하기
    전체 다 펴고 싶지 않다면? 깊이 2까지만 펼치거나?
    ```javascript
    function flattenDepth(arr, depth = Infinity) {
    const result = [];
    for (const item of arr) {
    if (Array.isArray(item) && depth > 0) {
    result.push(...flattenDepth(item, depth - 1));
    } else {
    result.push(item);
    }
    }
    return result;
    }
    flattenDepth([1, [2, [3, [4]]]], 2);
    // [1, 2, 3, [4]] ← 깊이 2까지만
    ```
    # 현대적: reduce + concat 버전
    더 간결하게:
    ```javascript
    const flatten = (arr) =>
    arr.reduce((acc, val) =>
    acc.concat(Array.isArray(val) ? flatten(val) : val), []);
    ```
    # 실제 사용처
  • API 응답 평탄화: 중첩 JSON 펼치기

  • 파일 시스템: 폴더 구조 → 전체 파일 목록

  • DOM 선택자: querySelector 결과 병합

  • # 공식 대안
    JavaScript 내장: `Array.prototype.flat(depth)`
    ```javascript
    [1, [2, 3], [[4]]].flat(); // 깊이 1 (기본값)
    [1, [2, 3], [[4]]].flat(2); // 깊이 2
    [1, [2, 3], [[4]]].flat(Infinity); // 전체
    ```
    → [MDN: Array.prototype.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
    💬 0
    👁 0 views

    Comments (0)

    💬

    No comments yet.

    Be the first to comment!