Boolean 변수 with 이벤트

Boolean을 변수로 사용하지 못한다면, 코드가 굉장히 비효율적으로 작성된다.(과거의 나👶)

아래와 같이 Boolean변수 사용으로 간단하게 이벤트를 줄 수 있다.

onclick 이벤트 역할 :
fontawesome의 bar아이콘을 누르면 사이드바가 펼쳐지고 한 번 더 누르면 닫힘.

<a href="#" class="navbar-toogleBtn" onclick="toggleNav()" ><i class="fas fa-bars"></i></a>

HTML

<script>
const navBar = getElementById("myNav")
let toggle = false
function toggleNav () {
  if(toggle === false){
    navBar.style.width = "35%";
    toggle = true
  }else {
    navBar.style.width = "0%";
    toggle = false
  }
}
</script>

JavaScript
변수 toggle이 false상태이면 navBar의 width가 35% 적용, 이후 toggle은 true로 설정(else일때 실행될 수 있도록).
변수 toggle이 true이면 navBar의 width가 0% 적용 후 다시 toggle을 false상태로 되돌려둔다(if일때 실행될 수 있도록).