[JavaScript] add와 remove를 한번에! toggle 메서드

자바스크립트 dom에 대해 공부하다가 아주 유용한 메서드를 발견하였다.

그건 바로 toggle 메서드이다. add()와 remove()가 합쳐진(?) 개념의 메서드이다.

사용법

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
//   const hasClass = title.classList.contains(CLICKED_CLASS);
//   if (!hasClass) {
//       title.classList.add(CLICKED_CLASS);
//   } else {
//       title.classList.remove(CLICKED_CLASS);
//   }
  title.classList.toggle(CLICKED_CLASS);
}

function init() {
    title.addEventListener("click", handleClick);
}
init();

일단 위 코드는 title이라는 id를 가진 태그가 클릭 되었을 시 clicked이라는 클래스를 해당 태그에

추가해 주는 코드이다. 주석 처리된 코드는 add(), remove() 메서드를 사용했을 때의 코드 길이이고

놀랍게도 아래에 있는 한 줄이 toggle() 메서드로 처리했을 때 코드의 길이이다. 놀랍지 않는가!

사용법은 보는 것처럼 정말 간단하다 메서드 이름인 토글처럼 on/off 하고 싶은 것을 괄호 안에 넣으면 끝이다!