Resumo : neste tutorial, você aprenderá sobre o operador de encadeamento opcional ( ?.) que simplifica a maneira de acessar valores por meio de objetos conectados.
Introdução ao operador de encadeamento opcional JavaScript
O operador de encadeamento opcional ( ?.) é como um atalho para acessar propriedades aninhadas em uma série de objetos. Em vez de verificar se cada etapa da cadeia está vazia ( nullou undefined), você pode usar o operador ?.para acessar diretamente a propriedade desejada.
Se alguma parte da cadeia estiver vazia, o operador de encadeamento opcional ( ?.) irá parar ali mesmo e fornecer undefinedo resultado. Isso evita que você preencha cheques extras para cada etapa da cadeia.
Suponha que você tenha uma função que retorne um userobjeto:
function getUser(id) {
if(id <= 0) {
return null;
}
// get the user from database
// and return null if id does not exist
// ...
// if user was found, return the user
return {
id: id,
username: 'admin',
profile: {
avatar: '/avatar.png',
language: 'English'
}
}
}Linguagem de código: JavaScript ( javascript )O seguinte usa a getUser()função para acessar o perfil do usuário:
let user = getUser(1);
let profile = user.profile;Linguagem de código: JavaScript ( javascript )Porém, se você passar que idé menor ou igual a zero ou que idnão existe no banco de dados, a getUser()função retornará null.
Portanto, antes de acessar a avatarpropriedade, é necessário verificar se usernão está nullutilizando o operador lógico AND:
let user = getUser(2);
let profile = user && user.profile;Linguagem de código: JavaScript ( javascript )Neste exemplo, confirmamos que usernão é nullou undefinedantes de acessar o valor do user.profileimóvel. Isso evita o erro que ocorreria se você simplesmente acessasse user.profilediretamente sem verificar primeiro o usuário.
ES2020 introduziu o operador de encadeamento opcional indicado pelo ponto de interrogação seguido de um ponto:
?.Linguagem de código: JavaScript ( javascript )Para acessar uma propriedade de um objeto usando o operador de encadeamento opcional, use um dos seguintes:
objectName ?. propertyName
objectName ?. [expression]Linguagem de código: JavaScript ( javascript )O operador de encadeamento opcional verifica implicitamente se usernão é nullou undefinedantes de tentar acessar user.profile:
let user = getUser(2);
let profile = user ?. profile;Linguagem de código: JavaScript ( javascript )Neste exemplo, se userfor nullou undefined, o operador de encadeamento opcional ( ?.) retornará imediatamente undefined.
Tecnicamente, é equivalente ao seguinte:
let user = getUser(2);
let profile = (user !== null || user !== undefined)
? user.profile
: undefined;
Linguagem de código: JavaScript ( javascript )Empilhando o operador de encadeamento opcional
Caso o userobjeto retornado pelo getUser()não possua a profilepropriedade. Tentar acessar avatarsem verificar o user.profileprimeiro resultará em erro.
Para evitar o erro, você pode usar o operador de encadeamento opcional várias vezes assim:
let user = getUser(-1);
let avatar = user ?. profile ?. avatar;Linguagem de código: JavaScript ( javascript )Neste caso, avataré undefined.
Combinando com o operador coalescente nulo
Se quiser atribuir um perfil padrão ao user, você pode combinar o operador de encadeamento opcional ( ?.) com o operador de coalescência nulo ( ??) da seguinte forma:
let defaultProfile = { default: '/default.png', language: 'English'};
let user = getUser(2);
let profile = user ?. profile ?? defaultProfile;Linguagem de código: JavaScript ( javascript )Neste exemplo, se user.profilefor nullou undefined, o perfil assumirá o defaultProfiledevido ao operador de coalescência nulo:
Usando operador de encadeamento opcional com chamadas de função
Suponha que você tenha uma API de arquivo como segue:
let file = {
read() {
return 'file content';
},
write(content) {
console.log(`Writing ${content} to file...`);
return true;
}
};Linguagem de código: JavaScript ( javascript )Este exemplo chama o read()método do fileobjeto:
let data = file.read();
console.log(data);Linguagem de código: JavaScript ( javascript )Se você chamar um método que não existe no fileobjeto, você obterá TypeError:
let compressedData = file.compress();Linguagem de código: JavaScript ( javascript )Erro:
Uncaught TypeError: file.compress is not a functionLinguagem de código: JavaScript ( javascript )No entanto, se você usar o operador de encadeamento opcional com a chamada do método, a expressão retornará undefinedem vez de gerar um erro:
let compressedData = file.compress?.();Linguagem de código: JavaScript ( javascript )O compressedDataé agora undefined.
Isto é útil quando você usa uma API na qual um método pode não estar disponível por algum motivo, por exemplo, um navegador ou dispositivo específico.
O seguinte ilustra a sintaxe para usar o operador de encadeamento opcional com uma chamada de função ou método:
functionName ?. (args)Linguagem de código: JavaScript ( javascript )O operador de encadeamento opcional ( ?.) também é útil se você tiver uma função com um retorno de chamada opcional :
function getUser(id, callback) {
// get user
// ...
let user = {
id: id,
username: 'admin'
};
// test if the callback exists
if ( callback ) {
callback(user);
}
return user;
}Linguagem de código: JavaScript ( javascript )Usando o operador de encadeamento opcional, você pode pular o teste se o retorno de chamada existir:
function getUser(id, callback) {
// get user
// ...
let user = {
id: id,
username: 'admin'
};
// test if the callback exists
callback ?. (user);
return user;
}Linguagem de código: JavaScript ( javascript )Resumo
- O operador de encadeamento opcional (
?.) retornaundefinedem vez de gerar um erro se você tentar acessar uma propriedade de um objetonullou : .undefinedobj ?. property - Combine o operador de encadeamento opcional (
?.) com o operador de coalescência nulo (??) para atribuir um valor padrão. - Use
functionName ?. (args)para evitar verificar explicitamente sefunctionNamenão existeundefinedounullantes de invocá-lo.
