Attribution Doubt via Destructuring - Javascript

Asked

Viewed 92 times

1

I couldn’t understand the following code: 

//Esse array vai modificar o DOM com o seu conteúdo
const elementos = [             
    { tag: 'p', texto: 'Frase 1' }, // indice 0
    { tag: 'div', texto: 'Frase 2' }, // indice 1
    { tag: 'section', texto: 'Frase 3' }, // indice 2
    { tag: 'footer', texto: 'Frase 4' } // indice 3
];

const container = document.querySelector('.container');
const div = document.createElement('div');

for (let i = 0; i < elementos.length; i++) {
    const { tag, texto } = elementos[i]; 
    const elemento = document.createElement(tag);
    const noTexto = document.createTextNode(texto);
    elemento.appendChild(noTexto);
    div.appendChild(elemento);
    console.log(elementos[i]);
}
container.appendChild(div);

The code is working normally, in case my question is: Why when assigning, is it not necessary to put the brackets? Ex: [{tag, texto}] = elementos[i];

javascript logic

  • Why would I need it? This is a syntax designed specifically for de-structuring, it could be anything. But think about it, the clasp is already de-referencing on the other side ;)

  • Because when I saw assignment via unstructuring, to pick up an Object inside the array, I saw that I needed to use the brackets. Ex: const exem = [ 'bla', 'bla', {name: 'tal'}]; const [, {name}] = exem;

  • In the question code you are not structuring the object from within the array, you already "removed" the array when accessing element[i]

  • I get it. Thanks, man, you removed a flea from behind my ear! I haven’t moved on in my studies, because I didn’t understand that, now I’ll continue!

2 answers

1


If you did what you would like, it would try to look for a 1 position in the vector doing the destructure, but since it is in a for and already selected the position, the only way to get it right would be in a case like this:

const elementos = [             
    { tag: 'p', texto: 'Frase 1' },
    { tag: 'div', texto: 'Frase 2' },
    { tag: 'section', texto: 'Frase 3' },
    { tag: 'footer', texto: 'Frase 4' }
]
const [{ tag, texto }] = elementos

Then it would only work out the way you wanted in this case:

const elementos = [
    [{ tag: 'p', texto: 'Frase 1' }],
    [{ tag: 'div', texto: 'Frase 2' }],
    [{ tag: 'section', texto: 'Frase 3' }],
    [{ tag: 'footer', texto: 'Frase 4' }]
]
const [{ tag, texto }] = elementos[0]

That is, it would need to place another vector inside the vector, thus becoming a matrix. A note if you were using Typescript would have given an error that to resolve you could use // @ts-ignore in the previous line or use the following syntax:

const elementos = [             
    { tag: 'p', texto: 'Frase 1' },
    { tag: 'div', texto: 'Frase 2' },
    { tag: 'section', texto: 'Frase 3' },
    { tag: 'footer', texto: 'Frase 4' }
]
// forma longa
const [indice1] = elementos
const { tag, texto } = indice1
// forma curta (foi a forma como foi feita na pergunta)
const { tag, texto } = elementos[0]

  • In short, I don’t need to use the brackets because of the for, it’s not?

  • 1

    Good yes and because you are not in an array to access that way in the for.

  • Thanks, man. I got it. Now I can keep studying

0

Basically, what you are doing is removing the internal properties of the array, de-structuring the values present within the object array.

For being inside a for, you need to reference the entry of the item so that the values are correctly assigned.

  • I understood what structuring is and what it does, I just didn’t understand why when I went to get the values {tag, text} = elements[i], I didn’t need to put them inside brackets like this [{tag, text}] = elements[i]. But the friend above has already explained to me that it’s because of the

  • Perfect! Another way to do this, much more elegant and functional, is through the use of foreach, which navigates the indices of the Intrinsic form array without the explicit need to map the index of the array. You can learn more about this mode via this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

  • the foreach I will still study!

Browser other questions tagged javascript logic

You are not signed in. Login or sign up in order to post.