Digamos que eu tenha um projeto em three.js e precise de algumas geometrias, codificarei uma matriz de objetos que conterá seus valores x, y e z, bem como seus valores de largura, altura e profundidade, mas essa matriz pode vir do servidor ou de APIs de terceiros =>

const geometriesRaw = [
    {
      color: 0x44aa88,
      x: 0,
      y: 1,
      z: 0,
      width: 1,
      height: 1,
      depth: 1
    },
    {
      color: 0x8844aa,
      x: -2,
      y: 1,
      z: 0,
      width: 1.5,
      height: 1.5,
      depth: 1.5
    }

  ];

Então irei renderizá-los usando o Array. função de mapa =>

  const cubes = geometriesRaw.map((cube)=>{
    
         
         
      
  }) 

Com apenas um relance podemos perceber a verbosidade deste código, repetindo o argumento cubo todas as vezes.
Outro sinal de alerta é a falta de clareza sobre quais propriedades estamos usando do array, por exemplo, z é 0 em ambos os casos e provavelmente será zero na grande maioria dos casos.
Para nosso caso de uso regular, não devemos expor essa propriedade à nossa função, isso também pode acontecer frequentemente com a propriedade profundidade.

Por esse motivo, a melhor opção será desestruturar as propriedades provenientes do array de objetos da seguinte forma =>

 const cubes = geometriesRaw.map(({x,y, width, color})=>{
    
         
         
      
  }) 

Agora estamos usando apenas x,y, largura, cor. Dessa forma, estamos sugerindo que z, altura e profundidade são propriedades padrão dentro de nossa função e não precisamos delas nos dados provenientes de nosso servidor ou de terceiros

Desta forma, estamos ocultando propriedades para futuros desenvolvedores que irão interagir com a constante de nossos cubos, apenas mostrando a eles aquelas que precisamos de uma fonte externa e aquelas que estamos definindo como padrão para melhores práticas, podemos até escrever
constante z = 0
...
dentro da nossa função para deixar ainda mais claro