Dúvida na aula de sintaxe de espalhamento

Os objetos são:

const clientes = [
    {
        nome: "Robot",
        idade: 25,
        cpf: "1230934576",
        email: "robot@robot.com",
        fones: ["5567980986655", "5531987653423"],
        dependentes: [
            {
                nome: "MiniRobot", 
                idade: 8},
            {   
                nome: "AutoRobert",
                idade: 4},
        ],
        saldo: 100,
        depositar:function(valor){
            this.saldo += valor
        }
    },
    {
        nome: "RobotSister",
        idade: 28,
        cpf: "1230934576",
        email: "robot@robot.com",
        fones: ["5567980986655", "5531987653423"],
        dependentes: [
            {
                nome: "MiniRobotJr", 
                idade: 3},
            {   
                nome: "AutoRobertJr",
                idade: 2}
            ]
    },
    {
        nome: "RobotBrother",
        idade: 30,
        cpf: "1230934576",
        email: "robot@robot.com",
        fones: ["5567980986655", "5531987653423"],
        dependentes: [
            {
                nome: "RobotJr", 
                idade: 12},
            {   
                nome: "RobertJr",
                idade: 1}
            ]
    },
]

Eu retirei o let dentro do loop

let listaDependentes;
function mostraDependentes(cliente){
    for(let i = 0; i < cliente.length; i++){
        listaDependentes = [...cliente[i].dependentes]

    }

}
mostraDependentes(clientes)
console.log(listaDependentes)

Agora retorna somente 1 array de 3

Continuei as aulas seguintes e parece que a sintaxe de espalhamento sobrescreve as chaves que possui o mesmo nome. Então o console.log dentro do loop imprime todos porque a cada loop é guardado a chave na variável, ai a medida que o loop continua ele sobrescreve e imprime cada um e console.log fora da função imprime somente o ultimo resultado guardado na variável listaDependentes??

Olá Nilton,

O motivo do console.log fora da função retornar undefined é porque dentro da função você colocou let na frente do nome da variável listaDependentes.

Quando você faz isso o javascript vai criar uma variável chamada listaDependentes que só vai existir dentro do escopo da função, ou seja, quando você declara dentro da função let listaDependentes = [...cliente[i].dependentes] o javascript salva as informações dentro dessa variável que só existe dentro da função. A variável listaDependentes que você declarou fora da função não vai ser alterada.

Como a variável que você criou fora da função não está sendo alterada, o console.logo externo vai retornar undefined porque você não atribui nenhum valor a essa variável.

se você apagar o let da variável dentro da função, deixando seu código assim:

let listaDependentes;
function mostraDependentes(cliente){
    for(let i = 0; i < cliente.length; i++){
         listaDependentes = [...cliente[i].dependentes]
        console.log(listaDependentes)

    }

}
mostraDependentes(clientes)
console.log(listaDependentes)

Você vai ver que o console.log externo vai retornar os dados do ultimo dependente. Isso acontece porque quando você tira esse let o que javascript vai fazer é sobrescrever o valor da variável que você criou fora da função.

Para você entender o que está acontecendo sugiro ler sobre a diferença de var, let e const. https://www.alura.com.br/artigos/entenda-diferenca-entre-var-let-e-const-no-javascript?gclid=CjwKCAiA4KaRBhBdEiwAZi1zzpxrmMU9nWM7sMhv6PUCAwHKg1YAx4BuVPYiP-kuFv4rHAQEYqEVhBoCUOMQAvD_BwE

No curso 'Fundamentos de JavaScript: Tipo, variáveis e funções" os instrutores falam sobre como funciona o var, let e const no que diz respeito ao contexto onde a variável foi declarada.

Espero ter ajudado, abraços