Diferença entre location.host e location.hostname em JavaScript

Neste artigo você vai aprender qual a diferença entre location.host e location.hostname em JavaScript, propriedades do objeto window

Fala programador(a), beleza? Bora aprender mais sobre o objeto location e JavaScript!

As propriedades host e hostname podem ter o mesmo valor em muitos casos

Isso acontece pois elas extraem basicamente a mesma informação

A grande diferença é que hostname tem um escopo menor, ele extrai a informação apenas do nome do domínio

Já o host pode pegar a porta também, se ela for exposta, por exemplo

Imagine a URL: https://www.site.com:5000

Agora veja o seguinte código:

console.log(window.location.host) // www.site.com:5000

console.log(window.location.hostname) // www.site.com

Veja que a diferença nas respostas é sutil, mas o host exibe mais informações

Em alguns casos a porta não nos interessa, por isso vemos mais a aplicação de hostname

Agora você sabe quando utilizar um ou outro nos seus projetos 🙂

Conclusão

Neste artigo você aprendeu sobre a diferença entre location.host e location.hostname em JS

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Com hostname temos um escopo mais fechado, apenas recebendo o domínio de um site

Já o host nos informa a porta também, uma informação mais rica

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

Por que host e hostname parecem iguais na maioria dos sites?

Se tu abrir o console em quase qualquer site que usa no dia a dia, as duas propriedades vão devolver exatamente a mesma string

Isso não é bug, é o esperado

O host só tem algo a mais pra mostrar quando a porta está exposta na URL

Sem porta na barra de endereço, não existe o que somar, e as duas saem idênticas

É por isso que muita gente só percebe a diferença quando roda o projeto na máquina local e vê aquele endereço com dois pontos e um número no final 🙂

Qual usar na hora de validar o domínio:

A regra prática é simples, e ela é sobre a pergunta que tu está fazendo no código

Se a pergunta é "eu estou no domínio X?", hostname resolve, porque a porta não muda quem é o site

Se a pergunta é "eu estou NESTE endereço, com esta porta?", aí é host, já que a porta faz parte da identidade daquele ambiente

Tome cuidado com o erro clássico: comparar host com uma string escrita na mão, sem porta

Em produção passa, na máquina local com porta a comparação quebra, e o bug some quando tu vai investigar 😛

O www faz parte do hostname?

Faz sim, e essa confusão pega bastante gente

O hostname devolve o nome do domínio como ele está na barra de endereço, então se o site é acessado com www, o www vem junto

Ele não "limpa" subdomínio pra você, beleza?

Se a tua checagem precisa ignorar o www, esse tratamento é teu, na string, depois de pegar o valor

Mesma lógica vale pra qualquer subdomínio: ele é parte do nome do domínio, não um extra que some sozinho

Bora ver na prática?

Faça o teste, leva menos de um minuto

Abra o console do navegador aqui mesmo, nesta página, e rode as duas linhas do exemplo lado a lado

Provável que venha a mesma coisa nas duas, e é exatamente isso que tu quer ver

Depois repita no teu projeto rodando local, naquele endereço com porta

Aí a diferença aparece na tela, e tu nunca mais confunde as duas 😀

Cuidado ao pedir esse trecho pronto pra IA:

Hoje quase ninguém escreve essas linhas do zero, tu pede pro assistente e cola

E aqui mora a pegadinha: host e hostname são parecidos demais, o código continua rodando com o errado e ninguém percebe até o comportamento estranho aparecer em outro ambiente

Não é erro que estoura vermelho no console, é erro silencioso

Saber a diferença de cor é o que te deixa REVISAR o que veio pronto, em vez de aceitar tudo no modo 100% vibe coder

É pequeno, mas é o tipo de detalhe que separa quem lê o código de quem só cola ele…

Por que host e hostname parecem iguais na maioria dos sites?

Se tu abrir o console em quase qualquer site que usa no dia a dia, as duas propriedades vão devolver exatamente a mesma string

Isso não é bug, é o esperado

O host só tem algo a mais pra mostrar quando a porta está exposta na URL

Sem porta na barra de endereço, não existe o que somar, e as duas saem idênticas

É por isso que muita gente só percebe a diferença quando roda o projeto na máquina local e vê aquele endereço com dois pontos e um número no final 🙂

Qual usar na hora de validar o domínio:

A regra prática é simples, e ela é sobre a pergunta que tu está fazendo no código

Se a pergunta é "eu estou no domínio X?", hostname resolve, porque a porta não muda quem é o site

Se a pergunta é "eu estou NESTE endereço, com esta porta?", aí é host, já que a porta faz parte da identidade daquele ambiente

Tome cuidado com o erro clássico: comparar host com uma string escrita na mão, sem porta

Em produção passa, na máquina local com porta a comparação quebra, e o bug some quando tu vai investigar 😛

O www faz parte do hostname?

Faz sim, e essa confusão pega bastante gente

O hostname devolve o nome do domínio como ele está na barra de endereço, então se o site é acessado com www, o www vem junto

Ele não "limpa" subdomínio pra você, beleza?

Se a tua checagem precisa ignorar o www, esse tratamento é teu, na string, depois de pegar o valor

Mesma lógica vale pra qualquer subdomínio: ele é parte do nome do domínio, não um extra que some sozinho

Bora ver na prática?

Faça o teste, leva menos de um minuto

Abra o console do navegador aqui mesmo, nesta página, e rode as duas linhas do exemplo lado a lado

Provável que venha a mesma coisa nas duas, e é exatamente isso que tu quer ver

Depois repita no teu projeto rodando local, naquele endereço com porta

Aí a diferença aparece na tela, e tu nunca mais confunde as duas 😀

Cuidado ao pedir esse trecho pronto pra IA:

Hoje quase ninguém escreve essas linhas do zero, tu pede pro assistente e cola

E aqui mora a pegadinha: host e hostname são parecidos demais, o código continua rodando com o errado e ninguém percebe até o comportamento estranho aparecer em outro ambiente

Não é erro que estoura vermelho no console, é erro silencioso

Saber a diferença de cor é o que te deixa REVISAR o que veio pronto, em vez de aceitar tudo no modo 100% vibe coder

É pequeno, mas é o tipo de detalhe que separa quem lê o código de quem só cola ele…