5

Viendo un tutorial encontre una expresion asi:

 function ( { algo, algoMas, todaviaMas } ) {

    }  

investigando un poco encontré que es Destructuring en ES6: El desestructurado de datos, o

destructuring named parameter:

"desestructurar los parámetros nombrados"; pero no puedo comprender como funciona y como aplicarlo.

De antemano les agradezco la ayuda.

4
  • quiero corroborar dentro de los parentesis, en el tutorial que vez existe el uso de las llaves? solo tengo duda a esas llaves dentro de los parentesis
    – user75901
    Commented el 22 ago. 2018 a las 21:59
  • 1
    Bienvenido a Stack Overflow en español. Sería más fácil si compartes el código donde has visto eso para que podamos entender el contexto. También te invito a hacer el recorrido de bienvenida y lee esta página Cómo preguntar Commented el 22 ago. 2018 a las 22:01
  • Si las llaves dentro del paréntesis es lo que no entiendo bien.
    – julio
    Commented el 22 ago. 2018 a las 22:03
  • Aquí hay ejemplos en español developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…
    – JCAguilera
    Commented el 23 ago. 2018 a las 3:26

2 respuestas 2

2

Supongamos que tenemos esta función:

function f({algo, algoMas, todaviaMas}) {
    //...
}

Esto sería equivalente a escribir algo así:

function f(o) {
    var algo = o.algo;
    var algoMas = o.algoMas;
    var todaviaMas = o.todaviaMas;
    //...
}

Como verás es una forma de utilizar una sintaxis mas compacta para la asignación de variables que forman parte de un objeto que se recibe como parámetro en este caso.

Ejemplo, los siguientes dos snippets hacen lo mismo:

Sin destructuring

function f(o) {
    var algo = o.algo;
    var algoMas = o.algoMas;
    var todaviaMas = o.todaviaMas;
    
    console.log(`algo: ${algo}`);
    console.log(`algoMas: ${algoMas}`);
    console.log(`todaviaMas: ${todaviaMas}`);
}

var o = {
  algo: 1,
  todaviaMas: 2,
  algoMas: 3
};

f(o);

Con destructuring

function f({algo, algoMas, todaviaMas}) {
    console.log(`algo: ${algo}`);
    console.log(`algoMas: ${algoMas}`);
    console.log(`todaviaMas: ${todaviaMas}`);
}

var o = {
  algo: 1,
  todaviaMas: 2,
  algoMas: 3
};

f(o);

0

El tema realmente no es dificil, pero, para entender el Destructuring assignment hay que estudiarlo desde lo mas simple y explicarlo hasta lo mas funcional y útil que trae esta nueva sintaxis de javascript.


Esto tomaría realmente muchas líneas de código ya que, para aprenderlo hay que ver como funciona con ejemplos. así que mejor te dejo un link en donde encuentras toda la explicación desde lo mas simple y con muchos ejemplos. (está en inglés).

Destructuring Assignment

1
  • 1
    pero podrías colocar un ejemplo mínimo para que quede dentro de la comunidad, una referencia; por que si el enlace que pones deja de funcionar; la respuesta no le servirá a futuros usuarios
    – user75901
    Commented el 23 ago. 2018 a las 4:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.