¿Qué hacen las llaves dentro de las listas de parámetros de función en es6?

122

Sigo viendo funciones que se ven así en una base de código en la que estoy trabajando:

const func = ({ param1, param2 }) => {
  //do stuff
}

¿Qué está haciendo exactamente esto? Me está costando encontrarlo en Google, porque ni siquiera estoy seguro de cómo se llama, o cómo describirlo en una búsqueda de Google.

javascript ecmascript-6 Nathan
fuente
posible duplicado de la sintaxis de parámetros
Bergi

Respuestas:

117

Es desestructurante , pero está contenido dentro de los parámetros. El equivalente sin la desestructuración sería:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}
James Thorpe
fuente
12
Solo para asegurarme de que lo entiendo correctamente, básicamente esto significa que un objeto que contiene esas propiedades se pasaría a la función, y luego, dentro de la función, se puede acceder automáticamente a las propiedades simplemente usando su nombre.
Nathan
7
@Nathan Sí, consulte específicamente la sección sobre Desestructuración de objetos . Sin embargo, tenga en cuenta que las actualizaciones de las variables no actualizarán las propiedades del objeto original; no es como si estuviera creando una referencia al valor original.
James Thorpe
@JamesThorpe sería mejor enlazar a developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lsborg
11

Esto es pasar un objeto como propiedad.

Es básicamente una abreviatura de

let param1 = someObject.param1
let param2 = someObject.param2

Otra forma de utilizar esta técnica sin parámetros es la siguiente, consideremos entonces por un segundo que someObject sí contiene esas propiedades.

let {param1, param2} = someObject;
Oz Lodriguez
fuente
3

Es una asignación de desestructuración de objetos. Como yo, puede que le haya resultado sorprendente porque la sintaxis de desestructuración de objetos de ES6 se parece, pero NO se comporta como una construcción literal de objetos.

Admite la forma muy concisa con la que se encontró, además de cambiar el nombre de los campos y los argumentos predeterminados:

Esencialmente, es {oldkeyname: newkeyname = defaultvalue, ...}. ':' NO es el separador clave / valor; '=' es.

Algunas consecuencias de esta decisión de diseño del lenguaje es que es posible que deba hacer cosas como

; ({a, b} = algún_objeto);

Los paréntesis adicionales evitan que las llaves izquierdas se analicen como un bloque, y el punto y coma al principio evita que los paréntesis se analicen como una llamada de función a una función en la línea anterior.

Para obtener más información, consulte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Tenga cuidado, los errores clave durante la asignación de desestructuración de objetos NO se lanzan; simplemente termina con valores "indefinidos", ya sea un error clave o algún otro error que se propagó silenciosamente como "indefinido".

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>
Andrew Wagner
fuente