자바스크립트에서 Ternary 연산자를 활용한 키보드 단축키 설정

08 Nov 2023

javascript

프론트엔드 개발을 하다보면 키보드 단축키를 설정해야 할 경우가 많이 있습니다. 이를 효율적으로 처리하기 위해 자바스크립트의 Ternary 연산자를 사용할 수 있습니다. Ternary 연산자는 조건에 따라 값을 반환해주는 역할을 합니다.

단축키를 설정하는 코드를 작성해보겠습니다. 예를 들어, “Ctrl + S”를 입력했을 때 저장 기능을 수행하는 코드를 작성한다고 가정해봅시다.

document.addEventListener('keydown', function(event) {
  const isCtrlKey = event.ctrlKey;
  const isSKey = event.keyCode === 83;

  // Ternary 연산자를 사용하여 단축키 조건을 처리합니다.
  isCtrlKey && isSKey ? save() : null;
});

function save() {
  // 저장 기능을 수행하는 코드 작성
}

위 코드에서 isCtrlKey 변수는 event.ctrlKey를 이용해 “Ctrl” 키가 눌렸는지 확인하고, isSKey 변수는 event.keyCode를 이용해 “S” 키가 눌렸는지 확인합니다. Ternary 연산자를 사용하여 isCtrlKey와 isSKey 모두가 true인 경우에만 save() 함수를 호출합니다.

이와 같이 Ternary 연산자를 사용하면 짧고 간결한 코드로 키보드 단축키를 설정할 수 있습니다.

참고 자료