• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

전역변수를 피해보려고

20.08.06 05:23 작성 조회수 208

0

전역변수를 피해보려고 (function () {} )();  함수로 시도해보고있었는데요, 최대한 간단하게 해보려고 했는데 제가 임의로 지정한 function이 안되네요. 

(function(){
const menu = document.querySelector('.menu');

menu.addEventListener('click', function clickShow(e){

let elem = e.target;
while (!elem.classList.contains('menu-btn')) {
elem = elem.parentNode;

if(elem.nodeName = 'BODY') {
elem = null;
return;
}
}
})
clickShow();
})();

원래 이렇게 addeventListener에서 바로 function을 집어넣고 event는 안되나요? 그냥 따로 function으로 빼야만 될까요? 

( function () {
const menu = document.querySelector('.menu');

menu.addEventListener('click', clickShow = (e) => {
let elem = e.target;
while (!elem.classList.contains('menu-btn')) {
elem = elem.parentNode;

if(elem.nodeName = 'BODY') {
elem = null;
return;
}
};
}
clickShow();

})();

이렇게도 해봤는데 자꾸 missing ) after argument list라는 식으로만 뜨네요ㅠ

course-thumbnail

인터랙티브 웹 개발 제대로 시작하기

이벤트 위임 보강 영상

강의실 바로가기

답변 1

답변을 작성해보세요.

1

1분코딩님의 프로필

1분코딩

지식공유자

2020.08.06

첫번째 코드처럼 addEventListener 메소드의 매개변수 자리에 인수로 function clickShow() {}의 형태로 넣게 되면
외부에서 접근이 안됩니다. 함수의 매개변수는 해당 함수의 지역변수거든요~
그래서 바깥에서 따로 선언을 해주셔야 해요.

두번째 코드는 일단 에러가 나는 이유는 addEventListener의 괄호를 안닫아 주었기 때문이고요, 괄호를 닫아주어도 아래 clickShow();를 그냥 실행하고 있기 때문에 에러가 날거에요. 함수 내부에서 e.target을 처리하고 있는데, 그냥 실행할 경우 e에 아무 값이 안들어오기 때문에 에러가 나는 거죠~
따로 그 부분 처리를 해줄게 아니라면, 이 경우도 마찬가지로 그냥 따로 선언을 해주시는게 좋습니다.
그리고 한가지 더, 두번째 코드의 clickShow는 첫번째 코드와 다르게 외부에서 접근이 가능한데요,
변수 선언 키워드 없이 만들었기 때문에 clickShow가 아예 전역변수가 되어서 전역변수 사용을 피하기 위한 의도가 의미가 없어집니다. 제일 바깥에 괄호로 감싼 함수 바깥에서 console.log(clickShow); 를 출력해보시면 문제없이 함수 내용이 출력되는걸 확인하실 수 있을거에요.

결론은, 따로
function clickShow() {}
menu.addEventListener('click', clickShow);
이렇게 해주시는게 일반적으로 좋습니다^^

사용이 1회성이라면 아래처럼 직접 익명함수를 넣어주셔도 상관은 없고요.
menu.addEventListener('click', function () {});
재사용하지 않을거기 때문에 그냥 익명함수로 해주는거죠. 작성하신 코드처럼 이름을 붙여도 상관은 없지만, 어차피 외부에서 접근이 안되기 때문에 이름을 짓는 의미가 없는 것이고요~

이 글과 비슷한 Q&A