Desestruturação e argumentos de função

A linguagem JavaScript se beneficiou de alguns novos recursos realmente incríveis nos últimos anos, incluindo funções de seta, o operador de propagação e valores de argumento de função padrão. Mesmo que seu navegador ainda não ofereça suporte às adições de sintaxe da API JavaScript propostas, o senhor pode usar uma ferramenta como o Babel em seu aplicativo Node.js para aproveitá-las hoje.

Um dos meus novos recursos favoritos do JavaScript é a desestruturação de objetos. Se o senhor não estiver familiarizado com a desestruturação do JavaScript, ela basicamente fornece uma sintaxe mais curta para extrair o valor de uma chave de objeto sem a confusão da notação de ponto:

// A sample object
const myObject = { x: 1, y: 2 };

// Destructuring
const { x, y } = myObject;
// x is 1, y is 2

A sintaxe básica da desestruturação é bastante simples, mas usar a desestruturação com argumentos de função pode ser um pouco mais difícil quando os valores desses argumentos devem ter valores padrão. A seguir, uma função com argumentos que têm valores padrão:

function myFunction(text = "", line = 0, truncate = 100) {

    // With default values, we can avoid a bunch of:
    text = text || "";
    line = line || 0;
    truncate = truncate || 100;
}

Independentemente da linguagem, se uma função receber mais de ~3 parâmetros, provavelmente é melhor passar um nome de objeto options ou config que contém possíveis chaves/valores; o equivalente seria o seguinte:

function myFunction(config) {

}

// Usage
myFunction({
    text: "Some value",
    line: 0,
    truncate: 100
})

Mas e se o senhor quiser usar a desestruturação nos argumentos da função JavaScript? A seguinte assinatura de função se tornaria:

function myFunction({ text, line, truncate }) {

}

Se quiser definir padrões na configuração da função, o senhor usaria o seguinte:

function myFunction({ 
  text = "", 
  line = 0, 
  truncate = 100 
} = {}) {

 // Even if the passed in object is missing a given key, the default is used!
}

Definir um padrão com = { } é importante; sem padrão, o exemplo a seguir daria erro:

TypeError: Cannot destructure property `key` of 'undefined' or 'null'

A desestruturação é um recurso incrível da linguagem, mas pode gerar confusão e até mesmo erros. Esperamos que as noções básicas fornecidas neste guia possam ajudá-lo a navegar usando a desestruturação do JavaScript com funções!