선생님 js 변수 질문있습니다.

// var isOpen = false; 

  menuBtn.addEventListener('click', function (e) {
    var isOpen = false;

    if (!isOpen) {
      head.appendChild(menu);
      isOpen = true;
      console.log(isOpen);
    } else if (isOpen) {
      head.removeChild(menu);
      isOpen = false;

      console.log(isOpen);
    }
  });
}

위와같이 코드를짜고 콘솔로그로 isOpen 값을 출력했는데 계속 true만 떳습니다.
그래서 var isOpen=false; 코드를 클릭이벤트 바깥에 선언해줬더니 잘 작동하더라구요
어떤 현상때문에 그런건지 알고싶습니다.
제 스스로 찾아보려고 공부를해봤는데.. 도무지 모르겠어요
제가 여태 공부한것들 지식으로는 당연히되야하거든요? 왜냐면.. 클릭이벤트의 콜백함수지만 에로우펑션이 아니라 function 즉 함수선언문으로 작성했기때문에,
호이스팅에 적합하다고 드는데.. 아..