element.toggleAttribute(attributeName[, force])
<input type="text">
<button type="button">input box 숨기기/표시하기</button>
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // <input> 요소에 hidden 속성이 없으면 추가, 있으면 제거함
    elem.toggleAttribute("hidden");
});
실제 적용된 모습 "input box 숨기기/표시하기" 버튼을 클릭해 보세요!
<input type="text">
<button type="button">input box 숨기기/표시하기</button>
<p style="color: red;">
    hidden 속성이 추가되었는지 제거되었는지가 표시됩니다.
</p>
const inputElem = document.querySelector("input");
const button = document.querySelector("button");
const msgElem = document.querySelector("p");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    if (inputElem.toggleAttribute("hidden")) { // hidden 속성을 제거하면
        msgElem.textContent = "hidden 속성이 제거되었습니다.";
    } else { // hidden 속성을 추가하면
        msgElem.textContent = "hidden 속성이 추가되었습니다.";
    }
});
실제 적용된 모습 "input box 숨기기/표시하기" 버튼을 클릭해 보세요!
<input type="text">
<button type="button">input box 숨기기/표시하기</button>
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    if (elem.hasAttribute("hidden")) { // hidden 속성이 있는지 체크
        elem.toggleAttribute("hidden", false); // 강제로 hidden 속성을 제거
    } else {
        elem.toggleAttribute("hidden", true); // 강제로 hidden 속성을 추가
    }
});
실제 적용된 모습 "input box 숨기기/표시하기" 버튼을 클릭해 보세요!

caniuse.com에서 더 자세한 정보를 확인해 보세요.