toggle

const title = document.querySelector("#title"); //title id를 title이라고 변수 설정

const CLICKED_CLASS = "clicked"; //'clicked'라는  class명 변수 설정

function handleClick() {   
const hasClass = title.classList.contains(CLICKED_CLASS); 

//title에 class 리스트로 CLICKED_CLASS(=clicked 라는 class명 가지고 있을 때)일 때를 
//변수 hasClass라고 한다
//다시 말해 hasClass는 clicked라는 클래스가 있을 때

if (hasClass === false) {                         //hasClass는 clicked라는 클래스가 없을 때

title.classList.add(CLICKED_CLASS);              // clicked라는 클래스 추가
} 

else {                                           //hasClass는 clicked라는 클래스가 있을 때

title.classList.remove(CLICKED_CLASS);          //hasClass는 clicked라는 클래스 제거

}
}

function init() {                                 //초기화
title.addEventListener("click", handleClick); click 하면 함수 handleClick가 title에 실행
};

init();

toggle 함수

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

function handleClick(){
 title.classList.toggle(CLICKED_CLASS);
}

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

//toggle 함수로 위와 똑같이 실행할 수 있다