Destructuring, una gran tecnica de desarrollo con ventajas y desventajas (ESP-ENG)

in STEMGeekslast year

Si eres desarrollador con algo de experiencia en el ámbito u comenzaste hace poco es bueno que conozcas un poco más sobre la desestructuración, es una técnica muy utilizada por muchos desarrolladores, pero en especial lo he visto en los juniors que suelen aplicarlo muy seguido por una idea de que es una buena práctica u cosas similares.
El punto de este artículo no es criticar si su uso es correcto u incorrecto, sino ampliar el panorama y explicar mejor su uso.
En lo personal prefiero que el código sea comprensible que hacer muchas técnicas de desarrollo que acortan líneas de código, obvio que si la desestructuración es mucho más rápida u comprensible que ingresar a buscar entre todos los valores no hay que dudar en usarla.

If you are a developer with some experience in the field or you started recently, it is good that you know a little more about destructuring, it is a technique widely used by many developers, but I have especially seen it in juniors who tend to apply it very often for a idea that it is a good practice or similar things. The point of this article is not to criticize whether its use is correct or incorrect, but rather to broaden the panorama and better explain its use. Personally, I prefer that the code is understandable than doing many development techniques that shorten lines of code, obviously if destructuring is much faster or more understandable than entering to search among all the values, you should not hesitate to use it.
La desestructuración ofrece ventajas ante el acceso a ciertos valores dentro de un objeto, podemos obtenerlo sin necesidad de ingresar clave valor, aquí dejo un ejemplo.
Destructuring offers advantages when accessing certain values ​​within an object, we can obtain it without having to enter a value key, here is an example.

des1.jpg
Al principio parece muy pero muy raro lo que hace, uno diría que hizo porque abrió llaves y luego lo igualo al objeto. Lo único que hizo de manera resumida es almacenar dentro una variable el valor de llave con el mismo valor de llave, igualando al objeto para indicar que ese valor será tomado del objeto.
Tranquilo que si apenas estas aprendiendo esta técnica vas a ver que las llaves de las cuales obtenemos los datos se pueden renombrar como quisiéramos.

At first it seems very, very strange what it does, one would say that it did because it opened keys and then I matched it to the object. All it did in a nutshell is store the key value with the same key value inside a variable, setting it equal to the object to indicate that that value will be taken from the object. Don't worry, if you are just learning this technique you will see that the keys from which we obtain the data can be renamed as we wish.

des2.jpg
Hasta aquí es relativamente sencillo de entender cómo aplicar su uso, pero que pasaría si necesitamos una variable extra que no se encuentra dentro del objeto, lo que uno haría sería crear una variable extra donde la necesite.
La desestructuración nos permite adicionar esa variable deseada sin necesidad de crearla en otro lugar.

So far it is relatively easy to understand how to apply its use, but what would happen if we need an extra variable that is not inside the object, what one would do is create an extra variable where it is needed.
Destructuring allows us to add that desired variable without having to create it elsewhere.

des3.jpg
Espero que hasta aquí hayas comprendido con ejemplos sencillos como utilizar esta técnica, pero aún falta mostrar como se aplica en “Arrays”, aunque es similar solo presenta un cambio que hay que tener en cuenta.
En los arrays no existe “key-Value” sino índice y su valor interno, por lo tanto, la posición de la desestructuración indicara el índice del elemento dentro del array.

I hope that up to now you have understood with simple examples how to use this technique, but it still remains to show how it is applied in "Arrays", although it is similar, it only presents a change that must be taken into account.
In arrays there is no “key-Value” but rather an index and its internal value, therefore, the position of the destructuring will indicate the index of the element within the array.

des4.jpg
Es increíble cómo funciona ahora pero también tiene sus excepciones, no se puede reasignar el valor ni agregar una variable dentro con un valor diferente sin esa posición ya existe un valor dentro del “array”, aquí dejo un ejemplo ideal.

It's amazing how it works now but it also has its exceptions, you can't reassign the value or add a variable inside with a different value without that position there is already a value inside the "array", here is an ideal example.

des5.jpg