JavaScript에서 배열을 비우는 방법은 여러 가지가 있습니다. 각 방법마다 동작 방식과 주의점이 다르므로, 상황에 맞는 방법을 선택하는 것이 중요합니다.
먼저 다음과 같은 배열이 있다고 가정해 보겠습니다.
var array1 = [1, 2, 3, 4, 5, 6, 7];방법 1: 새로운 빈 배열 할당하기
array1 = [];위 코드는 기존 변수에 새로운 빈 배열을 할당하는 방식입니다. 원본 배열 array1을 참조하는 다른 변수가 없다면 가장 간단하고 직관적인 방법입니다.
다만 이 방법에는 주의할 점이 있습니다. 만약 다른 변수가 이미 원본 배열을 참조하고 있다면, 해당 참조 변수에는 여전히 기존 배열이 그대로 남아 있게 됩니다.
예제
<html> <body> <script> var array1 = [1,2,3,4,5,6,7]; // 배열 생성 var anotherArray = array1; // anotherArray가 array1을 참조 array1 = []; // 새로운 빈 배열 할당 document.write(anotherArray); // 출력 결과: [1,2,3,4,5,6,7] </script> </body> </html>
위 예제에서 array1은 빈 배열이 되었지만, anotherArray는 여전히 원래 배열의 값을 유지하는 것을 확인할 수 있습니다.
방법 2: length 속성을 0으로 설정하기
array1.length = 0;위 코드는 배열의 length 속성을 0으로 설정하여 모든 요소를 제거하는 방식입니다. 이 방법은 원본 배열 자체를 수정하므로, 이 배열을 참조하는 모든 변수에도 동일하게 적용됩니다.
예제
<html> <body> <script> var array1 = [1,2,3,4,5,6,7]; // 배열 생성 var anotherArray = array1; // anotherArray가 array1을 참조 array1.length = 0; // length를 0으로 설정해 배열 비우기 console.log(anotherArray); // 출력 결과: [] </script> </body> </html>
방법 3: splice() 메서드 사용하기
array1.splice(0, array1.length);splice() 메서드를 사용하면 인덱스 0부터 배열 끝까지의 모든 요소를 한 번에 제거할 수 있습니다. 이 방법 역시 원본 배열을 직접 수정하므로, 해당 배열을 참조하는 모든 변수가 함께 업데이트됩니다.
예제
<html> <body> <script> var array1 = [1,2,3,4,5,6,7]; // 배열 생성 var anotherArray = array1; // anotherArray가 array1을 참조 array1.splice(0, array1.length); // splice()로 배열 비우기 console.log(anotherArray); // 출력 결과: [] </script> </body> </html>
어떤 방법을 선택해야 할까?
- 다른 참조가 없는 경우:
array1 = []처럼 새 배열을 할당하는 방법이 가장 간단하고 성능 면에서도 유리합니다. - 참조 관계를 유지해야 하는 경우:
length = 0또는splice(0, length)방식을 사용하세요. 두 방법 모두 원본 배열 객체를 그대로 둔 상태에서 내용만 비우기 때문에, 참조 중인 모든 변수에 변경 사항이 반영됩니다.