addEventListener 내부에서 선언된 변수의 유효범위..

개인생각

프론트엔드 지식이 미천하기 때문에 GPT 도움을 받고있는데..

변수의 유효범위가 계속 의문이었다.

DOMContentLoaded 이벤트는 문서가 로딩될떄 단 한번만 실행되고,

그리고 안에서 const, let 선언된 변수들은 다 지역변수로 생각되서

저 코드가 과연 동작할까(?) 이 생각을 하고, 테스트 했는데 잘 되는..ㄷㄷ

근데 마치 static 변수처럼 사용되는걸 보니 이해가 안가서

GPT 한테 질문했는데, 클로저(?) 라는 개념이 나왔는데.. 뭔지 모르겠고..ㅋㅋ

일단 이해한건 가비지컬렉터가 수집을 안하고 변수에 저장한 값은 계속 유효하다는 것이다.

마치 static 변수로 생각하면 되는건지.. 아직 잘 모르겠다.

---

✅ document.addEventListener("DOMContentLoaded", function () {} 내부의 let 변수의 유효 범위 (Scope)

코드를 보면 let activeItem = null; 변수가 DOMContentLoaded 이벤트 리스너 내부에 선언되었습니다.
이 변수의 유효 범위(Scope)가 어떻게 동작하는지 자세히 설명드리겠습니다.

---

📌 1. activeItem 변수의 유효 범위 (Scope)

document.addEventListener("DOMContentLoaded", function () {
    const listItems = document.querySelectorAll("#testul li");
    let activeItem = null; // 현재 선택된 li 저장 변수

    listItems.forEach((li) => {
        li.addEventListener("click", function () {
            // 이전에 선택된 li가 있다면 원래 상태로 되돌림
            if (activeItem) {
                activeItem.style.fontWeight = "normal";
            }

            // 현재 클릭한 li를 굵게 표시하고 activeItem에 저장
            this.style.fontWeight = "bold";
            activeItem = this;
        });
    });
});

🔹 activeItem은 어디서 유효할까?

✅ activeItem은 DOMContentLoaded 이벤트 핸들러 내부에서만 유효한 지역 변수입니다.
❌ 즉, document 전체에서 계속 유지되는 전역 변수가 아닙니다.

🔹 왜 계속 유효한 것처럼 동작하는가?

• DOMContentLoaded 이벤트가 실행될 때 한 번만 실행되므로,
  activeItem 변수는 한 번 선언되고 함수가 종료될 때까지 유지됨
• 이후 click 이벤트가 발생할 때마다 activeItem을 업데이트하면서 사용 가능
• 하지만 DOMContentLoaded 핸들러 밖에서는 접근 불가능

---

📌 2. activeItem은 언제까지 살아있는가?

✔️ DOMContentLoaded 내부에서 유지됨

• activeItem은 DOMContentLoaded 핸들러가 실행된 후에도 계속 유지됨
• 이유는 클로저(Closure) 때문
• activeItem은 click 이벤트 핸들러 내부에서 참조되므로, GC(가비지 컬렉션)가 제거하지 않고 유지됨

✔️ DOMContentLoaded 종료 후에는 더 이상 변경되지 않음

• 브라우저가 페이지를 새로고침하면 다시 DOMContentLoaded가 실행되므로 activeItem도 다시 초기화됨
• 즉, activeItem이 유지되는 건 현재 문서가 살아있는 동안이며, 페이지가 바뀌면 초기화됨

---

📌 3. activeItem을 전역 변수로 만들고 싶다면?

만약 activeItem을 문서 전체에서 유지되는 전역 변수로 만들고 싶다면, window 객체를 활용할 수 있습니다.

🔹 전역 변수로 변경

let activeItem = null; // 전역 변수로 선언

document.addEventListener("DOMContentLoaded", function () {
    const listItems = document.querySelectorAll("#testul li");

    listItems.forEach((li) => {
        li.addEventListener("click", function () {
            if (activeItem) {
                activeItem.style.fontWeight = "normal";
            }
            this.style.fontWeight = "bold";
            activeItem = this;
        });
    });
});

✅ 이렇게 하면 activeItem은 문서 전체에서 유효한 전역 변수가 됩니다.
❌ 하지만, 전역 변수는 남발하면 유지보수가 어려워지므로 추천하지 않습니다.

---

📌 4. 결론

선언 위치	변수 스코프(범위)	설명
DOMContentLoaded 내부 (let activeItem)	✅ DOMContentLoaded 내부에서만 유효	click 핸들러에서 계속 유지됨 (클로저)
window.activeItem	✅ 전역 변수 (문서 전체에서 접근 가능)	모든 곳에서 접근 가능하지만, 유지보수 어려움
DOMContentLoaded 외부 (let activeItem)	✅ 전역 변수 (같은 스크립트 내 어디서든 접근 가능)	필요하면 이렇게 선언하는 것이 좋음

✔️ 추천 방법

• activeItem을 전역 변수로 만들 필요가 없다면, DOMContentLoaded 내부에서 선언하는 것이 좋음`
• 불필요한 전역 변수는 유지보수와 성능에 악영향을 줄 수 있음
• 전역적으로 유지하고 싶다면 window.activeItem을 사용할 수도 있지만 추천하지 않음 🚀