[Dúvida] Operadores na condição "if"

No primeiro caso, o operador utilizado é um OR binário (ou OR Bitwise), ou seja, seu funcionamento é aplicar um uma operação OR bit a bit nos valores utilizados.

No seu caso o que está acontecendo é o seguinte, as duas expressões estão gerando um valor booleano (true ou false). Estes valores estão sendo convertidos para números e, por fim, estão sofrendo a ação do operador |. Abaixo está uma versão equivalente do código:

const evento = { code: 'Space' };

const espacoPressionado = evento.code === 'Space'; // true
const enterPressionado = evento.code === 'Enter'; // false

const espacoPressionadoNumero = Number(espacoPressionado); // 1
const enterPressionadoNumero = Number(enterPressionado); // 0

const ativar = espacoPressionadoNumero | enterPressionadoNumero; // 1 | 0 = 1

if (ativar) { // condição satisfeita
        tecla.classList.add('ativa');
}

No segundo caso, foi utilizado o operador OR lógico, que ao invés de converter os operandos para números (como o |*), ele irá converter os operandos para *booleanos para poder gerar o resultado. Este resultado é avaliado conforme a tabela verdade do operador "v" da lógica proposicional. Abaixo está uma versão equivalente do código:

const evento = { code: 'Space' };

const espacoPressionado = evento.code === 'Space'; // true
const enterPressionado = evento.code === 'Enter'; // false

const espacoPressionadoBooleano = Boolean(espacoPressionado); // true
const enterPressionadoBooleano = Boolean(enterPressionado); // false

const ativar = espacoPressionadoNumero | enterPressionadoNumero; // 1 || 0 = 1

if (ativar) { // condição satisfeita
        tecla.classList.add('ativa');
}

No terceiro caso, o código dentro do if está calculando duas expressões distintas e retornando apenas o último valor avaliado. Abaixo está uma versão equivalente do código:

const evento = { code: 'Space' };

let ativar = evento.code === 'Space', evento.code === 'Enter'; // false

if (ativar) { // condição NÃO satisfeita
        tecla.classList.add('ativa');
}

ativar = evento.code === 'Enter', evento.code === 'Space'; // true

if (ativar) { // condição satisfeita
        tecla.classList.add('ativa');
}

Uma boa prática é sempre passar um valor booleano como condição para o if. Portanto, recomenda-se sempre utilizar a segunda versão do seu código, com o operador ||.

Espero ter conseguido ajudar!