No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Par谩metros rest

9/22
Recursos

En JavaScript, los par谩metros rest nos permiten enviar la cantidad de par谩metros que queramos a una funci贸n. Se denotan con ... seguido del nombre con el cual identificaremos a estos par谩metros:

// JavaScript
function sum(...args){ // `...args` -> Par谩metros rest
  const suma = args.reduce((acumulador, num) => acumulador + num, 0)
  return suma
}

console.log(sum(1,2)) // 5
console.log(sum(1,2,3,4,5)) // 15
console.log(sum(1,2,3,4,5,6,7,8,9,10)) // 55

Par谩metros rest en TypeScript

En TypeScript, lo 煤nico que cambia es el tipado de los par谩metros.

// TypeScript
function sum(...args: number[]){ // `...args` -> Par谩metros rest
  const suma = args.reduce((acumulador, num) => acumulador + num, 0)
  return suma
}

console.log(sum(1,2)) // 5
console.log(sum(1,2,3,4,5)) // 15
console.log(sum(1,2,3,4,5,6,7,8,9,10)) // 55

El nombre de los par谩metros rest pueden ser el que queramos: ...args, ...params, ...props, etc.

Contribuci贸n creada por: Mart铆n 脕lvarez (Platzi Contributor) con el aporte de Irving Ju谩rez.

Aportes 22

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Par谩metros rest

Los par谩metros rest nos permiten enviar la cantidad que queramos de par谩metros a una funci贸n, casi sin limite.
.
Funciona de la siguiente manera

// en JS
function sum(...args){
  const addition = args.reduce((static, arg) => static + arg, 0)
  return addition
}

La funci贸n de arriba esta hecha en JS y esta, toma todos los par谩metros que hayamos pasado a la funci贸n y los convierte en un array. En TS se ver铆a de una manera muy similar

// en TS
function sum(...args: number[]){
  const addition = args.reduce((static, arg) => static + arg, 0)
  return addition
}

Lo 煤nico que cambia es el tipado en los argumentos.
.
Ya por ultimo, el nombre que le damos a los 鈥渞est params鈥 es costumizable, puede ser args, params, props, etc.
Y siempre es recomendable dar estos par谩metros al final. 脫sea, despu茅s de par谩metros obligatorios.

function sum(num1, num2, ...args){
  @code
}

El spread operator siempre se me hizo una soluci贸n algo m谩gica, ahora la comprendo mucho mejor.

Les comparto mis apuntes. 馃槃

驴Qu茅 es par谩metros rest?

Se apoya en la flexibilidad que tenemos en JavaScript de enviar par谩metros sin ning煤n problema, que no tienen un fin.

Rest parameters nos permite mandar un conjunto de argumentos a nuestra funci贸n y ella los recibe como un arreglo.

Spread operator

A dem谩s de usarlo en poder copiar objetos, tambi茅n podemos usarlo para poder recibir N par谩metros en una funci贸n, adem谩s vamos a recibir esos par谩metros como un array de argumentos.

Sintaxis en JavaScript

function functionName (...parameters) {
	statements
}

Sintaxis en TypeScript

function functionName (...parameters: dataType[]) {
	statements
}

Para enviarle el usuario como 1er argumento

export const checkRoleV4 =(
	user: TUser,...param: string[]
)=>{

	if (param.includes(user.role)){
		return true
	}else{
		return false
	}
}
const rta2 = checkRoleV4(
	anyUser,
	ROLES.ADMIN,
	ROLES.CONSTUMER,
	ROLES.SELLER
)

La sintaxis de los par谩metros rest permite representar un n煤mero indefinido de argumentos como un array

Ej. de documentaci贸n de mozilla

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

Con typescript pude comprender el operdor spread (鈥) y como funciona, al momento de tipearlo y ver que se reciben parametros en forma de un arreglo, es de gran ayuda porque al verlo en javascript parece magia.

Como observaci贸n a las clases de muchos cursos:
Es importante llegar al punto lo antes posible, ser铆a producente evitar dar la 鈥渃hapa鈥 antes de llegar al punto que se quiere mostrar.
En este ejemplo, pudieramos empezar directamente con lo que se va a hacer, indicando c贸mo se usan los par谩metros Rest con TypeScript, y si acaso despu茅s dar ejemplos de c贸mo era antes de TypeScript.
Es aporte para los que crean los cursos

aunque es algo b谩sico, hay varias personas que siempre se confunden me incluyo, hasta note que el instructor se equivoco creo que es bueno saber,

A m铆 s铆 me obliga mandarlos como array 馃槄

He visto que el c贸digo necesita un poco de refactorizaci贸n. As铆 lo he hecho.

export const checkRoleV3 = (...roles: string[]) => {
  return roles.includes(currentUser.role); 
}

const rta4 = checkRoleV3(ROLES.ADMIN, ROLES.SELLER, ROLES.CUSTOMER);
console.log('checkRoleV2', rta4);

Adem谩s de utilizar par谩metros opcionales o sobrecarga para hacer que las funciones acepten una variedad de argumentos, tambi茅n es posible definir funciones que tomen un n煤mero indeterminado de argumentos utilizando聽rest parameters.

Un par谩metro rest aparece al final de la lista de par谩metros con un prefijo de tres puntos seguido del nombre del par谩metro聽...nombre.

function multiplicar(n: number, ...m: number[]): number {
  return m.reduce((p, c) => {
    return p * c;
  }, n);
}

console.log(multiplicar(2, 2));
console.log(multiplicar(2, 2, 3));
console.log(multiplicar(2, 2, 3, 4));

Salida鈥

4
12
48 

La funci贸n聽multiplicar聽recibe un segundo par谩metro llama聽m, este almacena todos los n煤meros adicionales como parte de un arreglo tipo聽number聽y despu茅s los multiplica uno a uno.

En el ejercicio de los customers se hace el ejemplo con un **array de strings** y eso esta bien. Pero que pasa si pasamos un string que no este en el rango de valores permitidos por el **enum de ROLES**? En ese caso ya tendr铆amos que entrar a hacer un manejos de errores. Una forma f谩cil de evitar eso es en lugar de permitir un **array de strings** permitir un **array de ROLES**. De esa forma el user solo va a poder enviar roles que est茅n definidos en nuestro enum de ROLES. ```ts export const checkRoleV3 = (...roles: ROLES[]) => { if (roles.includes(currentUser.role)) return true; return false; }; const isValidRoleV3 = checkRoleV3(ROLES.ADMIN, ROLES.CUSTOMER, ROLES.SELLER); console.log(isValidRoleV3); ```![]()![](https://static.platzi.com/media/user_upload/Screenshot%202024-02-27%20at%204.47.50%E2%80%AFPM-e43c816c-d4f8-406f-a7e8-736a84b4acc4.jpg)

Interesante recordar el uso del m茅todo includes

//si tengo un array con elementos de cualquier tipo
const roles = ['admin', 'vendor', 'seller', 12, true];
//puedo usar el m茅tdodo includes para saber si un valor se encuentra dentro del array, si se encuentra dara true y si no false
roles.includes('vendor');//true
roles.includes('nada');//false
roles.includes(true);//true
roles.includes(12);//true

De hecho, y como una forma de robustecer el c贸digo, le asign茅 al arreglo de los par谩metros de la funci贸n checkRole un tipado ROLES. De esta manera, el Analizador de C贸digo Est谩tico lanza una advertencia en caso de que se le env铆e un valor tipo string aleatorio y un ROLE:

export const checkRole = (...roles:ROLES[]) => {
    if(roles.includes(currentUser.role)){
      return true;
    }
  return false;
}
let sum = (...nums: number[]) => {
    let incremental:number = 0
    nums.forEach(number => incremental+= number)

    return incremental
}

console.log(sum(1,2))
console.log(sum(1,2,3,4,5,6,7,8,9,10))

La suma de varios argumentos utilizando el spread operator

En TypeScript, los par谩metros rest son una caracter铆stica que permite pasar un n煤mero variable de argumentos a una funci贸n. Esto significa que no tienes que especificar todos los argumentos individualmente en la firma de la funci贸n, sino que puedes agruparlos en un solo par谩metro utilizando el operador de tres puntos (鈥). El par谩metro rest se representa como un arreglo que contiene todos los argumentos adicionales pasados a la funci贸n.
.
Aqu铆 tienes un ejemplo pr谩ctico para ilustrar su uso:

function sumar(...numeros: number[]): number {
  let resultado = 0;
  for (let i = 0; i < numeros.length; i++) {
    resultado += numeros[i];
  }
  return resultado;
}

const sumaTotal = sumar(1, 2, 3, 4, 5);
console.log(sumaTotal); // Resultado: 15

En el ejemplo anterior, hemos definido una funci贸n llamada sumar que acepta un n煤mero variable de argumentos de tipo number. Utilizamos el par谩metro rest ...numeros para indicar que queremos agrupar todos los argumentos en un arreglo llamado numeros.
.
Dentro de la funci贸n, iteramos sobre el arreglo numeros y sumamos cada elemento para obtener el resultado final. En este caso, pasamos los n煤meros 1, 2, 3, 4 y 5 como argumentos al llamar a la funci贸n sumar. La funci贸n devuelve la suma total, que en este caso es 15.
.
El uso de par谩metros rest es 煤til cuando necesitas trabajar con una cantidad variable de argumentos en una funci贸n sin conocer de antemano cu谩ntos ser谩n. Puedes realizar operaciones como sumas, concatenaciones o cualquier otro tipo de procesamiento que requiera trabajar con m煤ltiples valores de entrada.
.
Espero que este ejemplo pr谩ctico te ayude a comprender mejor el concepto de los par谩metros rest en TypeScript. Si tienes alguna otra pregunta, no dudes en hacerla.

Comparto una funci贸n que recibe un usuario que tiene un rol y varios roles para la verificaci贸n

// En JS
enum ROLE {
  ADMIN = "admin",
  USER = "user",
  OWNER = "owner",
}

type User = {
  name: string;
  role: ROLE;
};
const verifyRole = (user?: User, ...roles: ROLE[]): void => {
  if (user !== undefined) {
    console.log(
      `El rol ${roles.includes(user.role) ? "se encontr贸" : "no se encontr贸"}`
    );
  } else {
    console.log(`No se envi贸 user`);
  }
};

verifyRole();
verifyRole({ name: "victor", role: ROLE.USER });
verifyRole({ name: "victor", role: ROLE.USER }, ROLE.ADMIN, ROLE.OWNER);
verifyRole(
  { name: "victor", role: ROLE.USER },
  ROLE.ADMIN,
  ROLE.OWNER,
  ROLE.USER
);

Una forma m谩s simplificada del codigo min 5

export const checkAdminRole = () => {
	return currentUser.role === ROLES.ADMIN
}

Si me encantar铆a ver el proyecto que hicimos de Auth full con TypeScript!

Por si algui茅n tambi茅n se estaba preguntando cual es la diferencia entre los Rest Params y el objeto Arguments

Diferencia entre los par谩metros rest y el objeto arguments
Hay tres principales diferencias entre los par谩metros rest y el objeto arguments:

los par谩metros rest son s贸lo aquellos a los que no se les ha asignado un nombre, mientras que el objeto arguments contiene todos los argumentos que se le han pasado a la funci贸n;
el objeto arguments no es un array real, mientras que los par谩metros rest son instancias de Array , lo que significa que lo los m茅todos como sort, map, forEach o pop pueden aplicarse directamente;
el objeto arguments tiene una funcionalidad adicional espec铆fica para s铆 mismo (como la propiedad callee).

| Fuente: MozillaGod

args in js/ts

import { User, ROLES } from "../001-enums/enums";

const currentUser: User = {
  usename: 'emeneses',
  role: ROLES.CUSTOMER
};

export const isAdmin = (user: User) => user.role === ROLES.ADMIN

export const checkRole = (user: User, role1: ROLES, role2: ROLES) => (user.role === role1 || user.role === role2);

export const checkRoleV2 = (user: User, roles: ROLES[]) => roles.includes(user.role);

export const checkRoleV3 = (user: User, ...roles: ROLES[]) => roles.includes(user.role);

console.log(isAdmin(currentUser));
console.log(checkRole(currentUser, ROLES.ADMIN, ROLES.SELLER));
console.log(checkRoleV2(currentUser, [ROLES.ADMIN, ROLES.SELLER]));
console.log(checkRoleV3(currentUser, ROLES.ADMIN, ROLES.SELLER, ROLES.CUSTOMER));