No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
21H
3M
2S

Par谩metros rest

9/22
Recursos

Aportes 15

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

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.

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

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
}

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.

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.

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));