toggle

const h1 = document.querySelector("div.hello:first-child h1");
 
function handleTitleClick() {
  h1.classList.toggle("clicked");
}
 
h1.addEventListener("click", handleTitleClick);

h1.classList.toggle("clicked"); 은 “clicked”가 classList에서 존재하는지 확인 후 없으면 toggle이 “clicked”을 classList에 추가를 해준다.

그러므로 위 toggle 코드는 아래의 긴 코드를 한 줄로 끝내준다.

const h1 = document.querySelector("div.hello:first-child h1");
 
function handleTitleClick() {
  const clickedClass = "clicked";
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }
}
 
h1.addEventListener("click", handleTitleClick);