전역 변수 줄이기

전역 변수의 남용은 혼자서 진행하는 프로젝트에서는 눈치채기 힘들지만

협력하는 프로젝트에서는 내가 선언한 전역 변수가 남의 함수에 의해서 값이 바뀌는 등

문제점을 가지고 있다

그래서 프로그래머들은 전역 변수를 최소화하기 위해서 노력한다

<script>
    const boxA = document.querySelector('.a');

    const clickHandler = function(){
        boxA.classList.add('apply');
    }

    boxA.addEventListener('click', clickHandler);
</script>

이전 포스팅의 클래스a를 가진 박스를 클릭시 apply라는 코드를 적용하는 간단한 이벤트 코드다

이런 간단한 코드에서 벌써 전역 변수를 boxA와 clickHandler 2개나 사용하고 있는데

이를 줄이려면 어떻게 해야할까?

저 코드를 통째로 함수 안에 넣어버리면 된다

<script>
    const clickA = function() {
        const boxA = document.querySelector('.a');

        const clickHandler = function(){
            boxA.classList.add('apply');
        }

        boxA.addEventListener('click', clickHandler);
    }
    clickA();
</script>

이렇게 하면 이전에 있던 두개의 전역 변수는 clickA 함수 안의 지역 변수가 돼서 전역 변수를 줄이는 효과를 봤다

하지만 clickA도 결국 전역 변수인데

이 clickA 함수는 페이지가 로드되는 처음에만 부여되고 나면 재사용할 필요가 없는 일회용함수다

그 점을 이용해서 전역 변수를 더 줄일 수가 있다

<script>
    (function () {
        const boxA = document.querySelector('.a');

        const clickHandler = function(){
            boxA.classList.add('apply');
        }

        boxA.addEventListener('click', clickHandler);
    })();
</script>

함수가 한번만 사용되기 때문에 굳이 함수를 선언해서 사용하지 않고 즉시 실행 함수 안에 넣어 사용했는데

이렇게 되면 기존의 전역 변수들은 지역 함수가 되어서 처음과는 다르게 전역 변수를 사용하지 않는 코드로 바뀌었다