Olá! Tudo bem? O uso do underline serve somente para indicar que o atributo não deve ser acessado ou alterado diretamente. O objetivo dessa marcação é facilitar o entendimento de como determinada classe deve ser utilizada, mostrando para outros desenvolvedores que possam estar trabalhando com você ou até relembrando você mesmo no futuro de que alguns atributos não devem ser modificados diretamente. O underline não vai impor nenhuma restrição no código em si e nem vai causar algum erro se um atributo com underline for modificado diretamente, ele serve somente como um lembrete para facilitar o desenvolvimento do código. Já a questão da ofuscação e também minificação do código tem propósitos diferentes do underline, já que enquanto o underline serve somente como boa prática para facilitar o desenvolvimento, a ofuscação e minificação são práticas usadas quando fazemos o build de um projeto e colocamos ele em produção, porque assim dificultamos o entendimento do código para caso algum usuário mal intencionado tente analisar o código JavaScript para encontrar possíveis falhas de segurança. Um exemplo de site que faz esse trabalho é o https://obfuscator.io/:
// Código normal JavaScript
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(".cabecalho__logo").addEventListener("click", () => {
document.location.href = '/';
});
document.querySelector("#jogar-ia").addEventListener("click", () => {
document.location.href = '/jogo.html?oponente=ia';
});
document.querySelector("#jogar-amigo").addEventListener("click", () => {
document.location.href = '/jogo.html?oponente=amigo';
});
});
Esse mesmo código, ficaria assim sendo ofuscado:
function _0x1387(){var _0x3b3d31=['.cabecalho__logo','querySelector','#jogar-amigo','location','6VVJLNu','5WPvbNH','466026vQBNoD','5094508abwKPQ','/jogo.html?oponente=amigo','href','click','9538620YXmPzz','9431616qWnHHA','/jogo.html?oponente=ia','#jogar-ia','332737hhPGyd','addEventListener','2598477kxgTQa','11jqSvbd','84792eYPcNq','9trGHyL'];_0x1387=function(){return _0x3b3d31;};return _0x1387();}var _0x462121=_0x2f99;function _0x2f99(_0x4dcc2f,_0x94081){var _0x138741=_0x1387();return _0x2f99=function(_0x2f99c9,_0x2c060d){_0x2f99c9=_0x2f99c9-0x17b;var _0x362167=_0x138741[_0x2f99c9];return _0x362167;},_0x2f99(_0x4dcc2f,_0x94081);}(function(_0x129669,_0x449524){var _0x5094f7=_0x2f99,_0x3a49b6=_0x129669();while(!![]){try{var _0x2adf25=-parseInt(_0x5094f7(0x17c))/0x1+parseInt(_0x5094f7(0x180))/0x2+-parseInt(_0x5094f7(0x188))/0x3+parseInt(_0x5094f7(0x189))/0x4*(-parseInt(_0x5094f7(0x187))/0x5)+-parseInt(_0x5094f7(0x186))/0x6*(-parseInt(_0x5094f7(0x17e))/0x7)+parseInt(_0x5094f7(0x18e))/0x8*(parseInt(_0x5094f7(0x181))/0x9)+parseInt(_0x5094f7(0x18d))/0xa*(parseInt(_0x5094f7(0x17f))/0xb);if(_0x2adf25===_0x449524)break;else _0x3a49b6['push'](_0x3a49b6['shift']());}catch(_0x27dd20){_0x3a49b6['push'](_0x3a49b6['shift']());}}}(_0x1387,0xbf94b),document[_0x462121(0x17d)]('DOMContentLoaded',()=>{var _0x304da6=_0x462121;document[_0x304da6(0x183)](_0x304da6(0x182))['addEventListener'](_0x304da6(0x18c),()=>{var _0x3987e9=_0x304da6;document[_0x3987e9(0x185)][_0x3987e9(0x18b)]='/';}),document[_0x304da6(0x183)](_0x304da6(0x17b))[_0x304da6(0x17d)](_0x304da6(0x18c),()=>{var _0x1dfcd2=_0x304da6;document[_0x1dfcd2(0x185)]['href']=_0x1dfcd2(0x18f);}),document['querySelector'](_0x304da6(0x184))[_0x304da6(0x17d)](_0x304da6(0x18c),()=>{var _0x38c745=_0x304da6;document['location'][_0x38c745(0x18b)]=_0x38c745(0x18a);});}));
Normalmente, as bibliotecas e frameworks como React e Vue.js fazem esse processo automaticamente durante o build da aplicação, com o auxílio de compiladores como o Babel. Esse tipo de preocupação com o código é importante no front end, já que estamos em contato direto com o usuário, já no back end não precisamos nos preocupar com isso, já que os usuários não terão acesso ao código. Espero ter ajudado!
