JavaScript에서 기존 배열에 영향을 주지 않고 새 배열 만드는 방법

JavaScript에서 배열을 복사할 때 원본 배열의 값이 변경되지 않도록 독립적인 새 배열을 만들어야 하는 경우가 자주 있습니다. 이번 글에서는 기존 배열에 영향을 주지 않고 새 배열을 생성하는 방법을 예제와 함께 살펴보겠습니다.

현재 배열 예시

다음과 같은 배열이 있다고 가정해 보겠습니다.

var listOfNames=["John","Mike","Sam","Carol"];

새 배열을 만드는 방법

JSON.parse(JSON.stringify())를 사용하면 배열을 문자열로 변환한 뒤 다시 파싱하여 완전히 새로운 복사본을 만들 수 있습니다. 또한 slice() 메서드를 활용하면 간단하게 배열의 복사본을 생성할 수 있습니다. 두 방법 모두 원본 배열에는 어떠한 영향도 주지 않습니다.

예제 코드

function createNewArray(listOfNames) {
   return JSON.parse(JSON.stringify(listOfNames));
}
var listOfNames=["John","Mike","Sam","Carol"];
var namesArray = listOfNames.slice();
console.log("The new Array=");
console.log(namesArray);

위 프로그램을 실행하려면 터미널에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo111.js라고 가정하겠습니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo111.js
The new Array=
[ 'John', 'Mike', 'Sam', 'Carol' ]

참고: 깊은 복사와 얕은 복사의 차이

slice() 메서드는 1차원 배열을 복사할 때 안전하게 동작하지만, 중첩된 배열이나 객체가 포함된 경우 내부 요소의 참조가 공유될 수 있습니다. 이러한 경우에는 JSON.parse(JSON.stringify()) 방식이나 최신 JavaScript에서 제공하는 structuredClone() 함수를 사용하는 것이 더 안전합니다. 상황에 맞는 복사 방법을 선택하면 원본 데이터를 보호하면서 자유롭게 새 배열을 조작할 수 있습니다.