자바스크립트는 동적 프로그래밍 언어로서 동적으로 변수를 생성하고 관리할 수 있다는 장점을 가지고 있습니다. 그러나 이러한 유연성은 동시에 메모리 사용에 대한 고려도 필요하다는 것을 의미합니다. 이에 따라 불필요한 메모리 사용을 피하기 위한 몇 가지 코딩 패턴을 살펴보겠습니다.
1. 변수의 스코프 관리
자바스크립트에서는 변수를 var, let, const 등으로 선언할 수 있습니다. 변수의 스코프를 적절하게 관리하여 불필요한 메모리 사용을 피할 수 있습니다.
-
Global scope (전역 스코프)에서 변수를 선언하는 것은 자제해야 합니다. 여러 곳에서 접근이 가능하고 사용이 끝난 후에도 메모리에 유지되기 때문에 메모리 누수의 원인이 될 수 있습니다. 따라서 필요한 경우에만 전역 변수를 사용하고, 다른 경우에는 국소적인 스코프를 사용하는 것이 좋습니다.
-
변수의 범위를 최소화하는 것 역시 좋은 습관입니다. 단순히 변수의 스코프를 최대한 좁게 제한함으로써 메모리 사용을 줄일 수 있습니다.
2. 객체 리터럴 사용
자바스크립트에서 객체를 생성하는 방법에는 다양한 방법이 있지만, 객체 리터럴을 사용하는 것이 메모리 사용면에서 효율적입니다.
// Bad
var person = new Object();
person.name = "John";
person.age = 30;
// Good
var person = {
name: "John",
age: 30
};
객체 리터럴을 사용하면 여러 개의 속성을 한 번에 정의할 수 있으므로 코드의 가독성도 높아집니다.
3. 재활용 가능한 변수 및 객체 사용
동일한 값을 반복적으로 사용하는 경우, 해당 값을 재활용 가능한 변수에 저장하여 메모리 사용을 줄일 수 있습니다.
// Bad
for (var i = 0; i < 1000; i++) {
console.log("Hello");
}
// Good
var message = "Hello";
for (var i = 0; i < 1000; i++) {
console.log(message);
}
또한 재사용 가능한 객체를 사용하여 메모리 사용을 최적화할 수 있습니다. 예를 들어, 같은 기능을 하는 함수에서 매번 새로운 객체를 생성하는 대신, 재활용 가능한 객체를 사용하면 메모리 사용량을 줄일 수 있습니다.
4. 이벤트 핸들러 등록 해제
이벤트 핸들러 등록 시에는 항상 이벤트 핸들러를 등록 해제해야 합니다.
// Bad
var element = document.getElementById("myElement");
element.addEventListener("click", function() {
// 이벤트 핸들러 로직
});
// Good
var element = document.getElementById("myElement");
function onClick() {
// 이벤트 핸들러 로직
}
element.addEventListener("click", onClick);
// 이벤트 핸들러 해제
element.removeEventListener("click", onClick);
이벤트 핸들러를 등록한 뒤에 이벤트 핸들러를 등록 해제하지 않으면 메모리 누수가 발생할 수 있습니다. 이에 주의하여 코딩해야 합니다.
5. 정리하지 못한 리소스 해제
자바스크립트에서 리소스 해제는 참조 카운트 기반의 가비지 컬렉션 방식으로 처리되므로 개발자가 직접 메모리를 해제할 필요는 없지만, 몇 가지 상황에서는 개발자의 개입이 필요할 수 있습니다.
-
setTimeout()또는setInterval()과 같이 타이머 함수를 사용했을 경우, 반드시 타이머를 해제해야 합니다. -
AJAX 요청을 보냈을 경우, 요청이 완료되고 이벤트 핸들러가 호출된 후에는 리소스를 해제해야 합니다.
// Bad
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onload = function() {
// AJAX 로직
};
xhr.send();
// Good
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onload = function() {
// AJAX 로직
// 리소스 해제
xhr = null;
};
xhr.send();