클로저(closure)와 this 컨텍스트를 강제로 설정하는 방법

클로저(closure)를 활용한 예시입니다. 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(lexical environment)과의 조합으로, 이를 통해 함수가 자신이 선언될 때의 스코프에 있는 변수를 기억하고 접근할 수 있게 됩니다. 이러한 특성 때문에 클로저는 이벤트 핸들러나 콜백 함수에서 특정 데이터를 참조하고 싶을 때 유용하게 사용될 수 있습니다.

        // 클릭 이벤트 리스너에 클로저 사용
        tr.addEventListener('click', ((data) => () => {
            // 클릭 시 수행할 작업
            console.log('Selected:', data);
            // 예: 클릭한 주소의 상세 정보 표시
        })(storage)); // 클로저를 활용하여 각 행의 특정 데이터에 접근

함수의 this 컨텍스트를 강제로 설정하는 방법

// 클릭 이벤트 리스너 추가, clickHistory의 this 컨텍스트를 storage.point로 바인딩
        tr.addEventListener('click', clickHistory.bind({data: storage.point}));