É sabido que desestruturação nada mais é que açúcar sintático para operações comuns que envolvem acesso em objetos (o que inclui o indexamento de arrays).
Portanto, o código:
function logName({ name = 'Anonymous' }) {
console.log(name);
}
É equivalente a algo como:
1 | function logName(_ref) {
2 | const _ref$name = _ref.name;
3 | const name = _ref$name === undefined ? 'Anonymous' : _ref$name;
4 |
5 | console.log(name);
6 | }
Adaptado do Babel Playground.
Se prestar atenção na linha 2, verá que ocorre um acesso de propriedade ao objeto passado como argumento. No caso, ocorre _ref.name
.
A partir daí, podemos chegar em duas conclusões:
- O valor padrão na desestruturação refere-se à propriedade, e não ao argumento (possivelmente opcional) da função.
- Se o argumento não for fornecido,
_ref
(o primeiro parâmetro) será undefined
. E, de praxe do JavaScript, undefined.name
(ou qualquer outro acesso de propriedade em undefined
ou null
) lança um TypeError
.
Desse modo, se houver a possibilidade do argumento ser opcional, é preciso fornecer um valor padrão para o parâmetro também. Algo como:
// ↓↓↓↓
function logName({ name = 'Anonymous' } = {}) {
console.log(name);
}
No exemplo acima, definimos um novo objeto literal "vazio" como valor padrão para o primeiro parâmetro da função logName
. É importante entender a diferença:
- A string
'Anonymous'
é um valor padrão para uma propriedade do objeto.
- O literal "vazio"
{}
é um valor padrão para o primeiro argumento da função.
São bem diferentes, porque nada adianta definir valor padrão para uma propriedade de um objeto que nem sequer existe. Apenas como último questionamento para sistematizar: como o JavaScript poderia avaliar se a propriedade existe ou não (para depois atribuir um possível valor de propriedade padrão) se o parâmetro é undefined
?
Apenas como curiosidade, quando valor padrão para a propriedade é fornecido na desestruturação, a mensagem de erro é algo como:
Cannot read property 'name' of undefined
Mas quando não se fornece valor de propriedade padrão, a mensagem é um pouco mais compreensível:
Cannot destructure property 'name' of 'undefined' as it is undefined.
Veja:
try {
// Sem valor padrão:
// Cannot destructure property 'name' of 'undefined' as it is undefined.
const { name } = undefined;
} catch ({ message }) {
console.log(message);
}
try {
// Com valor padrão:
// Cannot read property 'name' of undefined
const { name = 'Default' } = undefined;
} catch ({ message }) {
console.log(message);
}