O que é encadeamento opcional?

Encadeamento opcional, representado por ?. em JavaScript, é um novo recurso introduzido no ES2020.

O encadeamento opcional altera a maneira como as propriedades são acessadas de objetos profundamente aninhados. Ele corrige o problema de ter que fazer várias verificações de nulos ao acessar uma longa cadeia de propriedades de objeto em JavaScript.

Status atual: ECMAScript proposal at stage 4 of the process. : https://github.com/tc39/proposal-optional-chaining

Casos de uso

  1. Acessando potencialmente null ou undefined propriedades de um objeto.
  2. Obtendo resultados de uma variável que pode não estar disponível ainda.
  3. Obtendo valores padrão.
  4. Acessando longas cadeias de propriedades.

Imagine que você esteja esperando que uma API retorne um objeto desse tipo:

obj = {  prop1: {    prop2: {      someProp: "value"    }  }};

Mas você pode não saber se cada um desses campos está disponível com antecedência. Alguns deles podem não ter sido enviados de volta pela API ou podem ter retornado com valores nulos.

Aqui está um exemplo:

//expectedobj = {  id: 9216,  children: [    { id: 123, children: null },    { id: 124, children: [{ id: 1233, children: null }] }  ]};//actualobj = {  id: 9216,  children: null};

Isso acontece com muita frequência com funções que chamam APIs. Você pode ter visto um código no React que tenta se proteger contra esses problemas como este:

render = () => {  const obj = {    prop1: {      prop2: {        someProp: "value",      },    },  };  return (    <div>      {obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.someProp && (        <div>{obj.prop1.prop2.someProp}</div>      )}    </div>  );};

Para nos prepararmos melhor para esse problema, muitas vezes no passado usamos underscore.js, especificamente o _.get método:

_.get(obj, prop1.prop2.someProp);

Isso produz undefined se alguma dessas propriedades for undefined. O encadeamento opcional é exatamente isso! Agora, em vez de usar uma biblioteca externa, essa funcionalidade está embutida.

Como funciona o encadeamento opcional?

?. pode ser usado para encadear propriedades que podem ser null ou undefined.

const propNeeded = obj?.prop1?.prop2?.someProp;

Se alguma dessas propriedades encadeadas for null ou undefined, JavaScript irá retornar undefined.

E se quisermos devolver algo significativo? Experimente isto:

let familyTree = {    us: {        children: {}    }}// with _.getconst grandChildren = _.get(familyTree, 'us.children.theirChildren', 'got no kids' );//with optional chaining and null coalescing const nullCoalescing = familyTree?.us?.children?.theirChildren ?? 'got no kids'console.log(nullCoalescing) //got no kids

Também funciona para objetos que podem ser null ou undefined:

let user;console.log(user?.id) // undefined

Como obter este novo recurso

  1. Experimente no console do seu navegador: esta é uma adição recente e navegadores antigos podem precisar de polyfills. Você pode tentar no Chrome ou Firefox no console do navegador. Se não funcionar, tente ativar os recursos experimentais do JavaScript visitando chrome://flags/ e habilitar “JavaScript experimental”.

  2. Experimente em seu aplicativo Node usando Babel:

{  "plugins": ["@babel/plugin-proposal-optional-chaining"]}

Recursos

  1. https://dmitripavlutin.com/javascript-optional-chaining/
  2. Doc de Babel: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

TL; DR

Use encadeamento opcional ?. para objetos ou propriedades de cadeia longa que podem ser null ou undefined. A sintaxe é a seguinte:

let user = {};console.log(user?.id?.name) 

Interessado em mais tutoriais e JSBytes meus? Inscreva-se no meu boletim informativo. ou Siga me no twitter





Fonte