이중 배열을 일차원 배열 하나로, 일차원 배열로 구분

일차원 배열 하나로

flat() - 한 단계만 평탄화

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4, 5, 6]

 

reduce() - 배열을 누적하여 하나의 배열로 합산

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = arr.reduce((acc, val) => acc.concat(val), []);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

 

(...) 스프레드연산자와 concat() - 배열을 펼쳐서 합산

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = [].concat(...arr);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

 

 

forEach()와 push()로 직접 추가 - 새로운 배열 만들기

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = [];
arr.forEach(subArr => flattened.push(...subArr));
console.log(flattened); // [1, 2, 3, 4, 5, 6]

 

 

flat(Infinity) - 중첩 배열 평탄화

const deepArr = [[1, [2, 3]], [4, [5, 6]]];
const flattened = deepArr.flat(Infinity);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

 

---

✨이중배열을 일차원배열로 구분✨

배열을 개별 변수로 분리 - twoArr의 각 내부 배열이 개별 변수로 할당.

const twoArr = [[1, 2], [3, 4], [5, 6]];

const [oneArr1, oneArr2, oneArr3] = twoArr;
console.log(oneArr1); // [1, 2]
console.log(oneArr2); // [3, 4]
console.log(oneArr3); // [5, 6]

console.log("twoArr", twoArr);
//twoArr [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]

 

 

변수를 직접 나열 - 원본 배열과 무관하게 개별 배열 생성됨.

const twoArr = [[1, 2], [3, 4], [5, 6]];

const oneArr1 = [1, 2], oneArr2 = [3, 4], oneArr3 = [5, 6];
console.log(oneArr1); // [1, 2]
console.log(oneArr2); // [3, 4]
console.log(oneArr3); // [5, 6]

console.log("twoArr", twoArr);
//twoArr [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]

 

 

함수를 활용한 동적 분리 - 배열 길이가 유동적일때 동적으로 변수 생성

객체 형태로 각 배열을 동적으로 매핑하는 방법.

const twoArr = [[1, 2], [3, 4], [5, 6]];
const vars = twoArr.map((arr, i) => ({ [`oneArr${i + 1}`]: arr }));

console.log(vars);
// [{ oneArr1: [1, 2] }, { oneArr2: [3, 4] }, { oneArr3: [5, 6] }]

 

 

 

만약, 들어오는 배열의 수를 모를때 구조 분해 할당을 동적으로 처리하거나, 동적으로 변수를 생성한다.

1. 동적 구조 분해 할당(배열로 관리) - 변수 개수를 유동적으로 처리

const twoArr = [[1, 2], [3, 4], [5, 6]];

const [...oneArr] = twoArr; // 배열의 각 요소를 개별 변수처럼 할당
console.log(oneArr); // [[1, 2], [3, 4], [5, 6]]

// 개별 배열에 접근
console.log(oneArr[0]); // [1, 2]
console.log(oneArr[1]); // [3, 4]
console.log(oneArr[2]); // [5, 6]

 

 

2. 객체에 동적 변수 생성 -  배열의 개수를 모를때 객체에 동적으로 변수명 생성

const twoArr = [[1, 2], [3, 4], [5, 6]];
const dynamicVars = {};

twoArr.forEach((arr, index) => {
    dynamicVars[`oneArr${index + 1}`] = arr;
});

console.log(dynamicVars);
/*
{
  oneArr1: [1, 2],
  oneArr2: [3, 4],
  oneArr3: [5, 6]
}
*/

// 개별 변수처럼 접근 가능
console.log(dynamicVars.oneArr1); // [1, 2]
console.log(dynamicVars.oneArr2); // [3, 4]
console.log(dynamicVars.oneArr3); // [5, 6]

 

 

정리

 

• 배열로 접근 가능해야 한다면? → [...oneArr]로 구조 분해 할당
• 각 배열을 개별 변수처럼 관리하고 싶다면? → 객체(dynamicVars)를 사용