배열 복제(Clone)란 하나의 배열을 다른 배열에 복사하는 것을 의미합니다. 예전에는 slice() 메서드를 사용해 배열을 복제했지만, ES6(ES2015)에서는 스프레드 연산자(...)가 도입되어 훨씬 간결하고 직관적으로 배열을 복제할 수 있게 되었습니다. 이 글에서는 두 가지 방법을 모두 살펴보고 각각의 특징을 비교해 보겠습니다.
slice() 메서드를 사용한 배열 복제
slice() 메서드는 원래 배열의 특정 인덱스 범위를 잘라내어 새로운 배열을 반환하는 함수입니다. 인덱스를 지정하지 않고 호출하면 배열 전체가 잘려나가며, 그 결과를 할당 연산자(=)를 통해 새로운 변수에 담으면 배열이 복제됩니다.
예제 코드
<html>
<body>
<script>
const games = ['cricket', 'hockey', 'football', 'kabaddi'];
const clonegames = games.slice();
document.write(clonegames);
</script>
</body>
</html>
실행 결과
cricket,hockey,football,kabaddi
위 예제에서 games.slice()는 시작 인덱스와 끝 인덱스가 전달되지 않았기 때문에 배열 전체를 복사하여 새로운 배열을 만들어 냅니다.
스프레드 연산자를 사용한 배열 복제
ES6는 다양한 새로운 기능을 도입했으며, 그중 스프레드 연산자(...)가 가장 널리 활용되는 기능 중 하나입니다. 스프레드 연산자는 함수 호출 시 인수를 펼치거나, 여러 배열을 합치는 등 다양한 용도로 사용되며, 배열 복제 역시 대표적인 활용 사례입니다.
예제 코드
<html>
<body>
<script>
const games = ['cricket', 'hockey', 'football', 'kabaddi'];
const clonegames = [...games];
document.write(clonegames);
</script>
</body>
</html>
실행 결과
cricket,hockey,football,kabaddi
[...games]처럼 작성하면 원본 배열의 모든 요소가 새로운 배열 안으로 펼쳐져 들어가므로, 단 한 줄의 코드로 완벽하게 복제된 배열을 얻을 수 있습니다.
두 방법의 차이점 정리
- slice(): ES6 이전부터 사용된 전통적인 방식으로, 하위 호환성이 필요한 환경에서 유용합니다.
- 스프레드 연산자(...): 코드가 더 짧고 가독성이 뛰어나며, 배열 병합 등 다른 용도로도 확장 가능합니다.
- 두 방법 모두 얕은 복사(shallow copy)를 수행합니다. 즉, 배열 내부에 객체가 포함된 경우 참조값만 복사되므로 중첩 구조까지 완전히 복제하려면 깊은 복사(deep copy) 방법을 추가로 고려해야 합니다.
현대 JavaScript 개발 환경에서는 가독성과 간결함 덕분에 스프레드 연산자를 사용한 복제가 가장 권장되는 방식입니다.