No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Parámetros por defecto

7/22
Recursos

Los parámetros por defecto se usan para predefinir valores a los parámetros de una función en caso de no especificar un valor al invocarla.

Parámetros por defecto en TypeScript

En TypeScript, usamos el signo = para definir el valor por defecto que cierto parámetro tendrá. Veamos un ejemplo:

// Definición de función
const createProduct = (
	id: string | number,
	isNew: boolean = true, // 👀
	stock: number = 10, // 👀
) => {
	return { // Retornamos un objeto con los valores pasados como parámetros.
		id,
		stock,
		isNew
	}
}

// Impresión en consola
console.log(
	createProduct(1)
) // { id: 1, stock: 10, isNew: true } `stock` y `isNew` por defecto

console.log(
	createProduct(2, false)
) // { id: 1, stock: 10, isNew: false } `stock` por defecto

console.log(
	createProduct(3, false, 50)
) // { id: 1, stock: 50, isNew: false }

Podemos usar esto como alternativa al nullish-coalescing.

Contribución creada por: Martín Álvarez (Platzi Contributor).

Aportes 14

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Aunque en la clase se habla de los parámetros por defecto son de TS, de igual manera estan desde ES6 de JavaScript

Parametros por defecto en TS

Ya sabemos que los parametros por defecto pueden ser por defecto agregando un ?: justo como se hace abajo con age

function createUser(
  id: number,
  name: string,
  age?: number
) {
  return {
    id,
    name,
    age: age ?? 0,
  };
}

Sin embargo, tenemos la opcion de hacerlo de la siguiente manera

function createUser(
  id: number,
  name: string,
  age: number = 0
) {
  return {
    id,
    name,
    age
  };
}

En donde ya no usamos ?:, si no que ahora le asignamos un valor en caso de que ninguno sea asignado.
.
Las dos formas son validas y soportadas por TS

Mencionas al modo typescript pero en JS normal también se puede hacer esto de asignar un valor por default al parámetro de una función

Para enviar un parámetro opcional usamos el nullish coalescing, sin embargo para enviar parámetros por defectos solo basta con igualarlo a la variable que queremos que tenga, si el usuario no nos indica el parámetro.

const createUser = (
	id: number,
	name: string,
	lastName: string,
	gender:string = 'Unspecified'
	) => {
	return {
		id,
		name,
		lastName,
		gender
	}
}

Podemos ver que al especificar el genero, le estamos indicando que el tipo de dato es un string, pero también le estamos diciendo "Hey ese gender es un string pero es igual a ‘Unspecified’ si el usuario no lo especifica ok?

esto igual funciona en js

Objeto como parametro
Si queremos tener un objeto como parametro y este necesita parametros por defecto es diferente a como se puede intuir:

export const createProductV2 = (data: {
  id: string | number;
  stock?: number; // Aqui no se puede definir un valor por defecto
  isNew?: boolean;
}) => {
  const { id, stock = 0, isNew = true } = data;
  // Desestrcturamos data y aqui mismo asignamos los valores por defecto.
  // Existen muchas formas de asignar parametros por defecto en un parametro de tipo objeto.
  return {
    id,
    stock,
    isNew,
  };
};

console.log(createProductV2({ id: 1, isNew: false }));
// De esta forma podemos asignar los parametros a gusto, sin ir en un orden.

Más formas de hacerlo: https://bobbyhadz.com/blog/typescript-object-parameter-default-value

📝 Pro-tip: En este caso podemos abreviar la manera de retornar el objeto usando una sintaxis especial cuando vamos a retornar ese tipo en una sola línea:

export const createProduct = (
  id: string | number,
  isNew: boolean = true,
  stock: number = 10,
) => (
  {
    id,
    stock,
    isNew,
  }
)

Solamente devolviendo dentro de la función el objeto envuelto en paréntesis

Excelente clase

¿Qué piensan? ![](https://static.platzi.com/media/user_upload/image-d2c3e24f-6e3d-4a0f-80c7-b2268760447f.jpg)
Como siempre me gusta ir usando lo que hacemos en clases aquí hice un uso de **Type** para los productos y un **array** que guarde los **productos** <3 ![](https://static.platzi.com/media/user_upload/code-e71de658-6713-4551-8e61-628393f48d29.jpg)

Esto también es válido en JS

Parámetros por defecto

En resumen, default params en ts funciona de igual manera que default params en js

Les comparto mi apunte. 😄

Sintaxis Parámetros por defecto

function functionName (
	parameter: dataType = value
) {
	statements
}