[JavaScript] toggle 사용법

 

 

toggle

 

toggle(토글) 의미

 

토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.
토글 스위치는 두 가지 상태만을 가지고 있는 스위치이다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치가 토글 스위치이다. 컴퓨터 키보드에서, Caps Lock 키도 일종의 토글 스위치인데, 왜냐하면 그 스위치를 누르는 것은 현재의 설정 값이 무엇이냐에 따라 두 가지 의미로 동작할 수 있기 때문이다. 만약 Caps Lock이 이미 설정된 상태라면, 그 키를 눌렀을 때 Caps Lock이 해제된다. 그러나, 반대로 Caps Lock이 해제된 상태에서 그 키를 눌렀다면, Caps Lock이 설정된다.
토글 스위치는 소프트웨어에도 존재하는데, 예를 들어 대화상자 내에 있는 체크박스도 일종의 토글 스위치라고 할 수 있다.

http://www.terms.co.kr/toggle.htm

 

 

const head = document.querySelector(".head h1");

function onclick() {
    const clickedClass = "active";

    if (head.classList.contains(clickedClass)) {
        head.classList.remove(clickedClass);
    } else {
        head.classList.add(clickedClass);
    }
}

head.addEventListener("click", onclick);

위 예시 코드에서 if 구문을 보자.

classList에 특정 클래스가 있다면 해당 클래스를 제거하고, 그게 아니라면 해당 클래스를 추가하는 로직이다.

toggle 메서드는 위 if문을 대체할 수 있다.

 

위 용어 사전에서 볼 수 있듯이 add/remove 두 상태만이 존재하는 상황에서 값이 있다면 remove를 하고 없다면 add를 해주는 녀석이다.

 

예시 코드에서 처럼 classList에 적절히 사용할 수 있다.

 

 

if문을 toggle로 대체한 아래 코드를 보자.

const head = document.querySelector(".head h1");

function onclick() {
    const clickedClass = "active";
    head.classList.toggle(clickedClass);
}

head.addEventListener("click", onclick);

if문을 없애면서 깔끔해지고 가독성도 좋아졌다.