[자바스크립트] 2차원 배열을 1차원 배열로 변환하기

2차원 배열을 1차원 배열로 변환하는 작업은 JavaScript에서 flat() 메서드를 사용하여 간단하게 수행할 수 있지만, 이 변환을 수행하는 다른 방법을 알아봄으로써 JavaScript 배열에 대한 이해를 더욱 깊이 있게 할 수 있다. 이 포스트에서는 이 작업을 수행하는 네 가지 다른 방법을 설명한다.

1. Array.flat() 메서드 적용
2. Spread 구문 사용
3. Array.reduce() 활용
4. forEach() 루프 활용

1. Array.flat() 메서드 적용

Array.flat()은 배열을 평탄화하는 내장 메서드이다.

const twoDArray = [[1, 2], [3, 4]];
const oneDArray = twoDArray.flat();
console.log(oneDArray); // 결과: [1, 2, 3, 4]

이 방식은 간결하고 목적에 맞게 작성되었지만, 일부 오래된 브라우저에서는 지원되지 않을 수 있다.

2. Spread 구문 사용

Spread 구문은 인자가 예상되는 위치에서 iterable을 확장하는 데 사용될 수 있다. 이를 사용하여 2차원 배열을 평탄화할 수 있다.

const twoDArray = [[1, 2], [3, 4]];
const oneDArray = [].concat(...twoDArray);
console.log(oneDArray); // 결과: [1, 2, 3, 4]

이 접근 방식은 직관적이고 현대적이지만, 깊게 중첩된 배열에는 적합하지 않을 수 있다.

3. Array.reduce() 활용

Array.reduce()를 사용하여 2차원 배열을 1차원 배열로 변환할 수 있다.

const twoDArray = [[1, 2], [3, 4]];
const oneDArray = twoDArray.reduce((acc, val) => acc.concat(val), []);
console.log(oneDArray); // 결과: [1, 2, 3, 4]

이 방법은 다양하게 활용할 수 있지만, reduce 메서드에 익숙하지 않은 사람들에게는 가독성이 떨어질 수 있다.

4. forEach() 루프 활용

forEach() 루프를 사용하여 배열을 수동으로 평탄화할 수 있다.

const twoDArray = [[1, 2], [3, 4]];
let oneDArray = [];
twoDArray.forEach(subArray => oneDArray.push(...subArray));
console.log(oneDArray); // 결과: [1, 2, 3, 4]

이 방법은 세밀한 제어를 제공하지만, 덜 우아한 방법으로 간주될 수 있다.

위에서 설명한 각 방법은 독특한 목적을 가지며, 특정 이점과 단점을 갖고 있다. 이러한 방법을 연습함으로써 자바스크립트 Array에 대해 보다 깊이있는 이해를 할 수 있을 것이다.

FAQ

1. 2차원 배열을 1차원 배열로 변환할 때, 어떤 방법이 가장 효율적인가요? 대개 배열을 평탄화하는 데 가장 효율적인 방법은 Array.flat() 메서드이다.
2. 깊게 중첩된 배열을 평탄화하기 위한 방법이 있나요? Array.flat()을 사용하여 깊이를 나타내는 인자와 함께 사용할 수 있다. 예를 들어, Array.flat(Infinity)는 모든 깊이에 대해 적용된다.
3. 브라우저 호환성은 어떤가요? Array.flat()과 같은 최신 기능을 사용하는 경우 오래된 브라우저에서 지원되지 않을 수 있으니 호환성을 확인해보자.
4. 이러한 방법을 결합할 수 있을까요? 복잡한 상황에서는 원하는 결과를 얻기 위해 여러 방법을 결합할 수 있다.
5. 변환 과정을 더 세밀하게 제어하려면 어떻게 해야 하나요? forEach()나 reduce()와 같은 방법을 사용하면 변환 프로세스를 더욱 사용자 정의할 수 있다.