JavaScript ES6 스프레드 연산자로 배열 요소 필터링 및 깊은 복사하기

JavaScript ES6에서 도입된 스프레드 연산자는 매우 강력하고 유용한 도구입니다. 이 글에서는 스프레드 연산자를 사용하여 배열의 요소를 필터링하고 깊은 복사를 수행하는 방법에 대해 자세히 알아보겠습니다.

스프레드 연산자의 기본 이해

스프레드 연산자는 JavaScript의 여러 데이터를 개별 요소로 확장할 수 있는 편리한 방법을 제공합니다. 이는 배열, 객체 및 함수 인수에서 유용하게 사용됩니다. 스프레드 연산자는 다음과 같이 세 점(...)으로 표시됩니다.

배열의 스프레드 연산자 사용 예

javascript
const numbers = [1, 2, 3, 4, 5];
console.log(...numbers); // 1 2 3 4 5

위의 코드는 배열 numbers의 각 요소를 개별 요소로 확장하여 콘솔에 출력합니다. 이 방식은 배열을 다른 배열이나 객체로 병합할 때 매우 유용합니다.

배열 요소 필터링

스프레드 연산자를 사용하여 배열의 요소를 필터링할 수 있습니다. 필터링은 원치 않는 요소를 제거하고 새 배열을 생성하는 작업입니다. 일반적으로 filter() 메서드를 사용하지만, 스프레드 연산자와 결합하여 더욱 직관적으로 필터링 작업을 수행할 수 있습니다.

javascript
const originalArray = [1, 2, 3, 4, 5];
const filteredArray = [...originalArray].filter(number => number > 2);
console.log(filteredArray); // [3, 4, 5]

여기서 [...originalArray]는 originalArray를 스프레드하여 새로운 배열을 생성합니다. 그 후, filter() 메서드를 사용하여 값이 2보다 큰 요소만 남깁니다.

중복 제거 예시

배열에서 중복 요소를 제거하는 예를 봅시다. 새로운 Set을 사용하여 중복을 제거하고 이를 스프레드 연산자로 배열로 변환할 수 있습니다.

javascript
const duplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueElements = [...new Set(duplicates)];
console.log(uniqueElements); // [1, 2, 3, 4, 5]

이 예에서 새로운 Set 객체는 배열의 중복 요소를 자동으로 제거하고, 스프레드 연산자를 사용하여 새로운 배열로 변환됩니다.

깊은 복사

배열 복사에는 얕은 복사와 깊은 복사가 있습니다. 얕은 복사는 참조를 복사하는 반면, 깊은 복사는 실제 데이터를 복사하여 새로 만듭니다. 스프레드 연산자는 얕은 복사를 수행하지만, 중첩된 객체나 배열을 포함하는 경우 깊은 복사도 가능합니다.

얕은 복사 예시

javascript
const originalArray = [1, 2, 3];
const shallowCopy = [...originalArray];
console.log(shallowCopy); // [1, 2, 3]

// originalArray와 shallowCopy는 다른 참조를 가짐
console.log(originalArray === shallowCopy); // false

중첩 구조의 깊은 복사

중첩된 객체나 배열이 있는 경우, JSON.stringify와 JSON.parse를 결합하여 쉽게 깊은 복사를 할 수 있습니다.

javascript
const nestedArray = [[1, 2], [3, 4]];
const deepCopy = JSON.parse(JSON.stringify(nestedArray));
console.log(deepCopy); // [[1, 2], [3, 4]]

// nestedArray와 deepCopy는 다른 참조를 가짐
console.log(nestedArray === deepCopy); // false

그러나 이 방법은 함수 및 undefined 값을 포함한 객체에 작동하지 않습니다. 이런 경우에는 재귀적 깊은 복사 함수를 만들어 사용해야 합니다.

스프레드 연산자의 활용 사례

스프레드 연산자는 함수 인수에도 사용할 수 있습니다. 예를 들어, 최대 값을 찾는 Math.max 함수에 배열 요소들을 개별 인수로 전달할 수 있습니다.

javascript
const values = [10, 20, 30, 40];
const maxValue = Math.max(...values);
console.log(maxValue); // 40

또한 객체 병합에도 스프레드 연산자를 사용할 수 있습니다.

javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }

obj1과 obj2를 병합할 때, 키가 중복되면 나중에 나온 값으로 덮어씁니다.

결론

스프레드 연산자는 JavaScript에서 매우 유용한 도구입니다. 배열 요소를 필터링하거나 깊은 복사를 수행할 때, 코드의 가독성과 효율성을 크게 높여줍니다. 다양한 활용 사례를 통해 스프레드 연산자의 강력함을 느껴보길 바랍니다. 이를 통해 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있을 것입니다.