[JS] 배열을 비우는 5가지 방법 (feat. 성능 비교)

javascript

 

 

배열을 비우는 건 간단해 보이지만, 자바스크립트에선 다양한 방법이 존재합니다. 어떤 방법을 선택하느냐에 따라 메모리 관리와 성능이 달라질 수 있어요. 오늘은 각 방법의 특징과 차이점을 코드와 함께 정리해봤습니다.

 

---

1. 길이를 0으로 설정하기

가장 직관적이고 효율적인 방법입니다.

let arr = [1, 2, 3];
arr.length = 0; // arr → []

• 장점: 원본 배열을 직접 수정하므로 다른 참조도 함께 초기화됨
• 단점: ES6 이상에서만 100% 안전

---

2. 새 배열로 재할당하기

let arr = [1, 2, 3]; arr = []; // 새로운 배열 할당

• 장점: 깔끔한 문법
• 단점: 기존 배열을 참조하는 변수가 있다면 영향 없음

let original = [1, 2, 3]; let copy = original; original = []; console.log(copy); // [1, 2, 3] (그대로!)

---

3. splice() 메서드 사용

배열의 모든 요소를 제거하는 전통적인 방법

let arr = [1, 2, 3]; arr.splice(0, arr.length); // arr → []

• 장점: IE 포함 모든 브라우저 호환
• 단점: 반환값으로 제거된 요소를 배열로 받음 (불필요한 메모리 사용)

---

4. pop() 반복 호출

비추천이지만 이론적으로 가능한 방법

let arr = [1, 2, 3]; while(arr.length > 0) { arr.pop(); }

 

• 단점: O(n) 시간 복잡도 → 대용량 데이터에선 치명적

---

5. length 프로퍼티 + splice() 하이브리드

let arr = [1, 2, 3]; arr.length = 0; arr.splice(0, arr.length); // 더블 체크!

• 왜?: 일부 구형 브라우저 버그 방지 (극히 드문 경우)

---

⚡ 성능 비교

10,000개의 요소로 테스트 시 (Chrome 기준):

• length = 0 → 0.01ms
• 재할당(= []) → 0.02ms
• splice() → 0.03ms
• pop() 반복 → 2.5ms

---

🚀 결론: 언제 어떤 방법을 써야 할까?

• 99%의 경우: arr.length = 0 추천!
• 다른 참조와 완전 분리 필요시: 재할당(= [])
• 구형 브라우저 대응: splice()

---

실전 팁

배열이 const로 선언됐다면 재할당이 불가능하므로 반드시 1번 또는 3번 방법을 사용해야 합니다.

const arr = [1, 2, 3]; arr = []; // ❌ Error arr.length = 0; // ✅ OK

---

이상으로 자바스크립트 배열 초기화 방법을 살펴봤습니다. 더 궁금한 점이 있다면 댓글로 남겨주세요! 👨💻

finish