element.classList.add()와 element.classList.toggle()의 차이점

특정 클래스의 여부에 따라 네비게이션 메뉴가 열렸다 닫히는 동작을 구현하던 중 이상한 점을 발견했다.

function addClass() {
  nav.classList.toggle('active');
}

나는 화살표를 클릭하면 active 클래스를 추가해주는 함수를 만들어서 네비게이션 메뉴가 열리는 동작을 구현했다. 그런 다음 다시 네비게이션 메뉴를 닫으려면 removeClass 함수를 구현하여 nav.classList.remove('active')를 구현해야 한다고 생각했는데, removeClass 함수를 구현하지 않아도 네비게이션이 닫히는 동작이 이루어지는 것에 이상함을 느꼈다.

혹시 몰라 nav.classList.add()로 함수의 코드를 변경했더니 네비게이션 메뉴가 열리는 것만 동작하게 되었다. add()와 toggle()의 차이점을 잘 모르고 사용하다 보니 이런 궁금증이 생겼던 것 같아 정리해두려 한다.

 

 

---

1. element.classList.add(className1, className2, ...)

• 주어진 클래스 이름들을 요소의 클래스 목록에 추가한다
• 이미 해당 클래스가 요소에 존재하면 무시되고 중복된 클래스를 추가하지 않는다.
• 여러 개의 클래스 이름을 동시에 추가할 수 있다.
• 예를 들어, nav.classList.add('active', 'highlight')는 nav 요소의 클래스 목록에 'active'와 'highlight' 클래스를 추가한다.

 

2. element.classList.toggle(className, force)

• 클래스의 존재 여부를 토글(toggle)한다.
• 클래스가 요소에 존재하지 않으면 해당 클래스를 추가하고, 이미 존재한다면 해당 클래스를 제거한다.
• force 매개변수를 선택적으로 전달할 수 있다. force 값을 true로 설정하면 클래스를 강제로 추가하고, false로 설정하면 클래스를 강제로 제거한다.
• 예를 들어, nav.classList.toggle('active')는 'active' 클래스가 요소에 없으면 추가하고, 이미 존재한다면 제거한다.

---

최종적으로 addClass 함수와 removeClass 함수를 각각 만들어 클래스를 추가하고 제거할 필요 없이 그래도 toggle()을 사용하는게 좋다고 판단하여 함수의 이름만 active 상태를 의미하도록 isActive로 변경하였다.

function isActive() {
  nav.classList.toggle('active');
}