Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] Dúvida: eu poderia chamar a função sem evidenciar o destructuring?

um aprendizado que tive ainda sobre o destructuring

const pessoa = {
    nome: 'Nathália',
    idade: 17, 
    profissao: 'Estudante'
}

// console.log(pessoa.nome)
// console.log(pessoa.idade)

const{nome, idade} = pessoa

console.log(nome)
console.log(idade)

function saudacao({nome, idade}){
    console.log('Olá,', nome)
    if(idade>=18) {
        console.log('Maior de idade')
    }
}

saudacao(nome)

resultou nisso no terminal:

Nathália
17
Olá, undefined


corrigindo:

const pessoa = {
    nome: 'Nathália',
    idade: 17, 
    profissao: 'Estudante'
}

// console.log(pessoa.nome)
// console.log(pessoa.idade)

const{nome, idade} = pessoa

console.log(nome)
console.log(idade)

function saudacao({nome, idade}){
    console.log('Olá,', nome)
    if(idade>=18) {
        console.log('Maior de idade')
    }
}

saudacao({nome}) // eureka, agora foi

terminal após corrigir a questão do destructuring
Nathália
17
Olá, Nathália


eu poderia definir a função como abaixo e chamar por saudacao(nome)?

const pessoa = {
    nome: 'Nathália',
    idade: 17, 
    profissao: 'Estudante'
}

// console.log(pessoa.nome)
// console.log(pessoa.idade)

const{nome, idade} = pessoa

console.log(nome)
console.log(idade)

// function saudacao({nome, idade}){
//     console.log('Olá,', nome)
//     if(idade>=18) {
//         console.log('Maior de idade')
//     }
// }

// saudacao({nome})

function saudacao(nome){
    console.log('Olá,', nome)
    
}

saudacao({nome}) 

Este foi o resultado no meu terminal:

Nathália
17
Olá, { nome: 'Nathália' }

corrigi o final com saudacao(nome) ao invés de
saudacao({nome}), e funcionou perfeitamente.


Nathália
17
Olá, Nathália

1 resposta

Olá, Esperidião, como vai?

Você chegou exatamente na conclusão certa, e o raciocínio que você fez comparando os dois jeitos de escrever a função é o tipo de coisa que ajuda muito a fixar o conceito. A ideia é a seguinte: o destructuring não é uma propriedade mágica da função, é só uma forma de desempacotar valores no momento em que o parâmetro chega. Quando você escreve function saudacao({nome, idade}), você está dizendo pro JavaScript "o argumento que eu vou receber aqui é um objeto, e eu quero extrair as propriedades nome e idade dele automaticamente". Por isso, pra essa função funcionar, ela precisa receber um objeto de verdade, tipo saudacao({nome}) ou saudacao(pessoa).

Já quando você reescreveu a função como function saudacao(nome), sem as chaves, o parâmetro nome deixou de ser um destructuring e passou a ser só um nome de variável comum, esperando receber diretamente o valor que for passado. Foi por isso que, na sua primeira tentativa com essa versão, ao chamar saudacao({nome}), o parâmetro nome recebeu o objeto inteiro { nome: 'Nathália' } (por isso o console.log mostrou aquilo), e quando você ajustou pra saudacao(nome), passando a variável nome diretamente (que já continha a string 'Nathália' por causa do destructuring lá em cima), tudo funcionou. Resumindo: a forma como você declara os parâmetros da função precisa combinar com a forma como você chama ela.

Qualquer coisa, é só postar de novo por aqui que o fórum está à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!