🛠️ 처음부터 만드는 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)
데이터가 여러 단계로 중첩된 배열이라면?
```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), []);
```
# 실제 사용처
# 공식 대안
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 views
Comments (0)
💬
No comments yet.
Be the first to comment!