Move if condition into callback. You want to always add keypress listener, just do not execute hideModal() if !overlay.classList.contains('hidden')

const btnopenModal = document.querySelectorAll('.show-modal');
const btnCloseModal = document.querySelector('.close');
const overlay = document.querySelector('.overlay');
const modal =document.querySelector('.modal');

const showModal = function() {
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
};

const hideModal = function() {
    modal.classList.add('hidden');
    overlay.classList.add('hidden');
}

for(let i = 0; i < btnopenModal.length; i++) 
    btnopenModal[i].addEventListener('click', showModal);

btnCloseModal.addEventListener('click', hideModal);
overlay.addEventListener('click', hideModal);

document.addEventListener('keypress', function(e) {
   console.log(e.key);
   if(e.key === 'Escape' && !overlay.classList.contains('hidden')) {
      hideModal();
   }
});

I would think that your if statement is evaluated when the webpage first runs, and my guess is that the if statement evaluates to false as it probably does contain the class "hidden" at first. I don't understand why you put it the key handler inside of an if statement, if it is for safety you should put it inside your function like so:

document.addEventListener('keypress', function(e) {
    if(!overlay.classList.contains('hidden')) {
      console.log(e.key);
      if(e.key === 'Escape') {
          hideModal();
      }
    };
})