Destructuración de objetos, parámetros de descanso y sintaxis extendida | Explicado en JavaScript

La destrucción de objetos, los parámetros de descanso y la sintaxis de propagación se consideran temas avanzados de JavaScript. Los vamos a dividir en simples pasos comprensibles y explicarlos con ejemplos. Las tres características se introdujeron en JavaScript con el lanzamiento de ECMAV6 JavaScript (ES6 JS)

Destructación de objetos

Es el proceso de tomar los "valores" de los pares de valor clave de un objeto y colocarlos en variables individuales con una sola línea de código. Esta única línea de código no solo asigna valores a las variables, sino que incluso crea esas variables también. Podemos decir que estamos declarando e inicializando múltiples variables en una sola línea de código con destrucción de objetos.

Sintaxis de destructación de objetos:
Después de la declaración variable (const, vamos, var) coloque los identificadores de las variables dentro de los soportes rizados y coloque toda esta ecuación igual al objeto que queremos destructuar. Recuerde, el nombre de las variables debe ser el mismo que la "clave" de los pares de valor clave del objeto.

const identificador1, identificador2, identificador3 = objectName;

NOTA: No hay "operador" destructor, sin embargo, la declaración anterior se conoce como el "Operador de tarea de destrucción"

Ejemplo:

Para demostrar la destrucción del objeto, primero creamos un objeto en JavaScript utilizando las siguientes líneas de código:

teléfono =
Nombre: 'iPhone',
Modelo: '13 Pro ',
Compañía: 'Apple',
Popularidad: 10

Ahora que tenemos nuestro objeto, podemos destruirlo en varias variables, con la siguiente línea de código:

const nombre, modelo = teléfono;

Nota: Solo estamos destruyendo el objeto y almacenamos dos valores con la clave "Nombre" y "Modelo", por eso necesitamos dar el nombre del identificador lo mismo que las teclas de los pares de valor clave.

Incluso puede acceder a los valores usando variables como:

consola.log ("El nombre del móvil es:" + nombre);
consola.log ("El modelo del móvil es:"+ modelo);

El fragmento de código completo de este ejemplo es como

teléfono =
Nombre: "iPhone",
Modelo: "13 Pro",
Compañía: "Apple",
Popularidad: 10,
;
const nombre, modelo = teléfono;
consola.log ("El nombre del móvil es:"+nombre);
consola.log ("El modelo del móvil es:"+ modelo);

Obtendrá la siguiente salida cuando ejecute este código:

Eso es todo para la destrucción de objetos en JavaScript ES6

Parámetros de descanso

Los parámetros de descanso se usan cuando no estamos seguros de cuántos parámetros debe tomar una función. Involucramos al compilador utilizando el operador de triple punto antes del nombre del parámetro para dejar en claro que este es un parámetro de descanso y no un parámetro normal.

Los valores dentro del parámetro REST se almacenan como una matriz bajo el mismo identificador que el parámetro en sí.

Sintaxis
Como se mencionó anteriormente, utilizamos un operador de triple punto antes del identificador en los parámetros de una función para convertirlo en un parámetro REST

función xyz (... paramidentifier) ​​
// cuerpo de la función

Restricción para definir los parámetros de descanso:

• Solo un parámetro de descanso en una función.
• Debe ser el último parámetro de la función

Ejemplo de parámetros de descanso

Para demostrar el uso de parámetros REST con JavaScript, vamos a crear una función simple que resume los números que se les dan como argumentos con las siguientes líneas de código:

función suma (a, b)
devolver a+b;

Como puede ver, esta función solo puede sumar 2 números, pero queremos una función que pueda tomar una cantidad indefinida de números y resumirlos, por lo que cambiamos la función para que se vea así:

función suma (... números)
resultado = 0;
para (valor de números)
resultado = resultado + valor;

resultado de retorno;

Como puede ver, solo estamos tomando 1 parámetro, que es el parámetro REST que permitirá que esta función tome una cantidad indefinida de números y luego estamos utilizando el bucle for-deo para atravesar los valores colocados dentro de la matriz y agregarlos en el uno al otro. Todo lo que queda por hacer es llamar a esta función e imprimir el valor de retorno con las siguientes líneas de código:

consola.log (suma (6, 3, 83, 55, 13, 45));
consola.log (suma (1, 2, 3));

Verá la siguiente salida en la pantalla cuando ejecute este código:

Eso es todo para usar parámetros de descanso en JavaScript, ahora podemos pasar a nuestro próximo tema.

Sintaxis extendida

Se usa para transmitir los elementos de un objeto iterable (ya sea una matriz o una cadena) a los argumentos o la lista de argumentos como con una sola línea de código sin tener la necesidad de iterar manualmente a través de ese objeto iterable.

Sintaxis
La sintaxis de la sintaxis de propagación es bastante básica, simplemente usamos el operador de triple punto antes del nombre de la variable al pasarlo como un argumento.

(... Argumento Variable);

Ejemplo

Para demostrar el uso de la sintaxis de propagación en JavaScript, necesitaremos una función que podamos crear con las siguientes líneas de código:

función addnumbers (a, b, c, d, e)
devolver a+b+c+d+e;

Ahora que tenemos nuestra función, necesitamos una matriz que contenga nuestros números para agregar,

números = [5, 3, 1, 6, 2];

Lo último que queda por hacer es transmitir esta matriz usando la sintaxis de propagación en la función con la siguiente línea de código:

consola.log (addnumbers (... números));

Debería ver el siguiente resultado en su consola:

Como puede ver, los elementos de la matriz se pasaron con éxito a la función como argumentos con el uso de sintaxis de propagación.

Parámetro de descanso vs sintaxis de propagación

A menudo, los usuarios se confunden entre el Parámetros de descanso y el sintaxis extendida para pasar argumentos. Esta confusión se crea debido al hecho de que el operador para ambas características es la misma (operador de puntos). Para abordar esta confusión, podemos decir que:

• Si el operador DOT se usa en la definición de función para definir un parámetro, entonces se llamará el Operador de parámetros de descanso.
• Por otro lado, si este operador se usa mientras pasa argumentos a una función, se llamará el operador de propagación.

Conclusión

JavaScript tiene varias características, especialmente la versión ECMA V6 de JavaScript bombardeó a la comunidad de programación con muchas características útiles. Algunas de estas características son: destructación de objetos, los parámetros del resto y la sintaxis de propagación. En esta publicación, hemos pasado por la explicación y el uso de estas tres características junto con sus ejemplos.