por que não gera conflito em duas variáveis de nomes iguais em arquivos diferentes? | JavaScript: programando na linguagem da web

Tenho dois arquivos, e em ambos possuem uma variável chamada ''paciente''não havendo conflito entre si.

No primeiro, à ela é atribuída posições de um arranjo dentro de um for:

var pacientes = document.querySelectorAll(".paciente");

for(var i = 0; i< pacientes.length ; i++){

  var paciente = pacientes[i]
}

No segundo, para ela é atribuída um objeto:

botaoAdicionar.addEventListener("click", function (event){
  event.preventDefault();

  var form = document.querySelector("#form-adiciona");

  var paciente = obtemPacienteDoFormulario(form);    
}

Por que não gera conflito durante a manipulação delas? E quando eu precisar lidar com ela no console do navegador, com qual delas eu estaria lidando?

Olá Pedro,

É por conta do escopo de ambas. Apesar de terem o mesmo identificador, o escopo delas são diferentes.

A primeira está definida dentro do laço "for", e a segunda está definida dentro da function atrelada ao listener do botão.

Ou seja, fora desses escopos elas não são conhecidas e, portanto, não gerando conflito entre si.

Agora, experimente deixá-las globais para você ver o que pode acontecer. Por exemplo, crie dois arquivos com extensão .js, chamados "script1" e "script2" e escreva o seguinte:

//Dentro de script1.js
var paciente = "Paciente 1";

//Dentro de script2.js
var paciente = "Paciente 2";

E referencie ambos arquivos em seu HTML. Lá, experimente imprimir o valor da variável.

Você vai ver que um valor vai sobrescrever o outro, e o valor final da variável pode mudar dependendo da ordem que os arquivos forem carregados pelo browser.

EDIT:

Se você declarar apenas uma delas como global, você vai criar o que se chama "shadowing" (não sei como é esse termo em Português), ou seja, uma variável de escopo menor tendo o mesmo identificador do que um variável de escopo maior. Veja só o exemplo abaixo:

var paciente = "José";

function exibirPaciente() {
  var paciente = "Pedro";
  document.write(paciente); //Vai imprimir "Pedro"
}

exibirPaciente();
document.write(paciente); //Vai imprimir "José"

Embora a variável paciente dentro da function tenha o mesmo identificador da variável paciente fora da function, são duas variáveis diferentes, com escopos diferentes. Por isso que a atribuição dentro da function não interfere na variável de fora.

É bom evitar o uso de variáveis globais e casos de "shadowing", pois podem gerar comportamentos inesperados em seus scripts dependendo de como o código estiver escrito. E geralmente esse tipo de problema é difícil de ser identificado.

Mergulhe em programação