React나 Vue 같은 라이브러리가 아닌 html에 바로 Script 태그를 사용할 때 주의해야 할 것이 전역변수이다.
const나 let으로 변수를 만들 때 잘못하면 전역에서 만들어지기 때문이다.
<html>
// ...
<body>
// ...
<script>
const vari = document.querySelector(".var");
const clickHandler = () => {
vari.classList.toggle("special");
}
vari.addEventListener("click", clickHandler);
</script>
</body>
</html>
위와 같이 JavaScript 코드를 작성했다고 생각해보자.
여기서 전역변수는 vari 와 clickHandler이다. 단순 이렇게 사용하는 것이 문제가 되는 것은 아니다.
하지만 추후 다른 개발자가 동일하게 vari와 clickHandler로 변수를 만들 수 있는 여지가 있다면 어떻게 될까?
코드가 합쳐지면서 동일한 명칭을 가진 변수가 생기면서 오류가 발생할 것이다.
이것을 해결하는 방법은 2가지가 있다.
즉시 실행 함수 표현식
정의되자마자 즉시 실행되는 JavaScript 함수이다. 변수의 스코프를 제한하여 전역 네임스페이스 오염을 방지할 수 있다.
<html>
// ...
<body>
// ...
<script>
(function() {
const vari = document.querySelector(".var");
const clickHandler = () => {
vari.classList.toggle("special");
}
vari.addEventListener("click", clickHandler);
})();
</script>
</body>
</html>
(function() { })() 방법으로 전역에서 선언되는 것은 아니고 실행되면 바로 함수가 실행되면서 내부적으로 원하는 작업을
수행할 수 있다.
블록 스코프로 만들기
이번 방법은 조건이 존재하는데 내부에 사용하는 변수가 const나 let 형식이어야 한다.
코드를 블록 스코프로 감싸는 방법이기 때문에 var의 경우 함수 내부에 생성한 변수 외엔 전부 전역변수가 되기 때문에
var 를 사용하는 경우는 사용할 수 없는 방법이다.
<html>
// ...
<body>
// ...
<script>
{
const vari = document.querySelector(".var");
const clickHandler = () => {
vari.classList.toggle("special");
}
vari.addEventListener("click", clickHandler);
}
</script>
</body>
</html>
방법은 간단한데 { } 로 감싸주면 끝이다.
이렇게 사용하면 블록 스코프를 만들 수 있으며 변수가 블록 스코프 내에서만 유효하니깐 문제가 없다.
반응형
'JavaScript' 카테고리의 다른 글
| 함수 스코프, 블록 스코프 (1) | 2024.08.14 |
|---|---|
| JavaScript defer & async (2) | 2024.06.27 |
| History 그거 완전 퇴물 아니냐? (1) | 2024.06.12 |
| DOM Script (2) | 2024.05.15 |
| [JavaScript] && 과 ? 차이 (1) | 2023.11.26 |