O TypeError
de mensagem “Cannot read property … of undefined” é lançado quando se tenta acessar uma propriedade em algum valor do tipo undefined
ou null
.
As outras respostas desta pergunta indicam diversos artifícios para resolver problema erro em acessos encadeados.
A partir do ECMAScript 2020, pode-se utilizar a sintaxe do encadeamento opcional, que faz curto circuito avaliando a expressão para undefined
assim que o acesso de propriedade a null
ou undefined
é efetivado. Ao utilizar o ?.
ao invés de .
para acesso, o erro em questão não é lançado.
Exemplo:
const obj = {
super: {
nested: {
prop: 'Value'
}
}
};
if (obj?.super?.nested?.prop) {
console.log('`obj.super.nested.prop` existe.');
}
// Note o operador lógico NOT (verifica que não existe)
// ↓
if (!obj?.super?.nested?.undefinedProp) {
console.log('`obj.super.nested.undefinedProp` NÃO existe.');
}
Não irei me alongar muito na sintaxe, já que esse assunto já foi tratado nesta outra resposta. Também tem a documentação.