JavaScript 개발을 하다 보면 기존 배열의 모든 요소를 제거하고 배열을 초기화해야 하는 상황이 자주 발생합니다. JavaScript에서 배열을 비우는 방법은 크게 네 가지가 있으며, 각각의 특징과 동작 방식이 다릅니다.
배열을 비우는 4가지 방법
- 새로운 빈 배열 할당 − 배열 변수에 새로운 빈 배열([])을 재할당하는 방식입니다. 가장 직관적이지만, 원본 배열을 참조하던 다른 변수에는 영향을 주지 않습니다.
- length 속성 활용 − 배열의 length 속성을 0으로 설정하는 방식입니다. 원본 배열 자체를 수정하므로 해당 배열을 참조하는 모든 변수에도 적용됩니다.
- pop() 메서드 활용 − 반복문을 통해 배열 길이가 0이 될 때까지 마지막 요소를 계속 제거하는 방식입니다.
- splice() 메서드 활용 − 시작 인덱스를 0으로, 제거할 요소 개수를 배열 전체 길이로 지정하여 한 번에 모든 요소를 삭제하는 방식입니다.
아래 예제 코드는 네 가지 방법을 모두 활용하여 배열을 비우는 과정을 보여줍니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>JavaScript에서 배열을 비우는 다양한 방법</h1>
<div class="sample">
a=[1,2,3,4], b=['a','b','c'], c=['A','B','C','D'], d=[11,22,33,44]
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 네 개의 배열이 모두 비워집니다</h3>
<script>
let resEle = document.querySelector(".result");
let a, b, c, d;
(a = [1, 2, 3, 4]),
(b = ["a", "b", "c"]),
(c = ["A", "B", "C", "D"]),
(d = [11, 22, 33, 44]);
document.querySelector(".Btn").addEventListener("click", () => {
let emptyArr = [];
a = emptyArr;
resEle.innerHTML = " a = " + a + "<br>";
b.length = 0;
resEle.innerHTML += " b = " + b + "<br>";
while (c.length > 0) {
c.pop();
}
resEle.innerHTML += "c = " + c + "<br>";
d.splice(0, d.length);
resEle.innerHTML += "d = " + d + "<br>";
});
</script>
</body>
</html>실행 결과
초기 화면에서는 각 배열에 담긴 값들이 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 네 가지 방식으로 각각 처리된 결과가 출력되며, 모든 배열이 빈 배열이 된 것을 확인할 수 있습니다.
방법별 차이점 정리
- 새 배열 할당(a = []): 변수가 새 배열 객체를 가리키게 되므로, 이전 배열을 참조하던 곳이 있다면 여전히 기존 데이터를 유지합니다.
- length = 0(b.length = 0): 가장 간단하고 성능도 좋아 실무에서 널리 사용됩니다. 원본 배열을 그대로 유지합니다.
- pop() 반복(c.pop()): 요소를 하나씩 제거하므로 대용량 배열에서는 비효율적일 수 있습니다.
- splice(0, d.length): 한 번의 호출로 모든 요소를 제거하며, 원본 배열 참조도 그대로 유지됩니다.
상황에 따라 적절한 방법을 선택하면 되는데, 일반적으로는 length 속성을 0으로 설정하거나 splice()를 사용하는 것이 원본 배열 참조를 유지하면서 안전하게 배열을 비우는 권장 방식입니다.