Entendendo o Encadeamento Opcional (?.)

Encadeamento Opcional

O encadeamento opcional ou muito popular no inglês chamado de optional chaining é uma técnica que permite acessar propriedades de um objeto sem se preocupar se elas existem ou não. É feito usando o operador “?.”. Por exemplo, se tivermos um objeto com a seguinte estrutura:

const obj = {
  a: {
    b: {
      c: 42
    }
  }
};

Podemos acessar o valor de “c” de duas maneiras:

const c = obj.a.b.c;
console.log(c); // 42

Ou usando encadeamento opcional:

const c = obj?.a?.b?.c;
console.log(c); // 42

Se alguma das propriedades em um caminho de encadeamento opcional for “null” ou “undefined”, o resultado será “undefined”. Isso é útil para evitar erros “Cannot read property ‘…’ of undefined”.

Vantagens e desvantagens desse operador

Vantagens:

1. Previne erros “Cannot read property ‘…’ of undefined”: este operador permite acessar propriedades de um objeto sem se preocupar se elas existem ou não, evitando erros comuns.
2. Código mais limpo e legível: pode também tornar o código mais fácil de ler, já que não precisamos nos preocupar com verificações explícitas de existência de propriedades.
3. Maior confiança: além disso, podemos ser mais confiantes de que o código não vai quebrar devido a uma propriedade indefinida.

Desvantagens:

1. Pode ser confuso para outros desenvolvedores: por ser um operador novo ou desconhecido para outros desenvolvedores, o que pode tornar o código menos intuitivo para eles.
2. Pode ser usado de forma incorreta: se for usado de forma incorreta, pode levar a bugs difíceis de detectar.
3. Suporte limitado: ele só está disponível a partir do ECMAScript 2020, o que significa que nem todos os navegadores suportam essa funcionalidade. Além disso, pode ser necessário fazer uma verificação de compatibilidade de navegador antes de usá-lo.

Encadeamento opcional com notação de Brackets

Você pode acessar as propriedades de um objeto usando tanto a notação de ponto (dot notation) quanto a notação de colchetes (bracket notation). A notação de ponto é mais concisa e legível, enquanto a notação de colchetes permite acessar propriedades cujos nomes são definidos dinamicamente. Aqui está um exemplo de como acessar uma propriedade usando a notação de ponto:

const obj = {
  a: {
    b: {
      c: 42
    }
  }
};

const c = obj.a.b.c;
console.log(c); // 42

E aqui está o mesmo exemplo usando a notação de colchetes:

const obj = {
  a: {
    b: {
      c: 42
    }
  }
};

const c = obj['a']['b']['c'];
console.log(c); // 42

O encadeamento opcional pode ser usado tanto com a notação de ponto quanto com a notação de colchetes:

const obj = {
  a: {
    b: {
      c: 42
    }
  }
};

const c = obj?.a?.b?.c;
console.log(c); // 42

const d = obj?.['a']?.['b']?.['c'];
console.log(d); // 42

Encadeamento com chamada de função

Você também pode usar o encadeamento opcional com a chamada de uma função. Por exemplo, se você tiver um objeto com uma função run:

const obj = {
  run: () => {
    console.log('Running!');
  }
};

obj.run(); // Running!
// >>>>
obj?.run(); // Running!

Se a propriedade run for null ou undefined, a chamada de função será ignorada sem causar um erro.