JS: Funciones

Teoría: Desestructuración de parámetros

Cuando pasamos un argumento al llamar a una función, su valor se asigna al parámetro de la función. Esto es una asignación automática implícita, porque en el código de esta operación "no se ve".

const func = (x) => {
  // el parámetro x se le asignará
  // el valor del argumento al llamar a la función
  console.log(x);
};

func(1); // => 1
// Esto se puede representar como si
// dentro de la función se crea el parámetro x,
// al que se le asigna el valor del argumento:
// {
//   let x = 1;
//   console.log(x);
// };

func([1, 2]); // => [1, 2]
// Ejemplo con la pasada de un array:
// {
//   let x = [1, 2];
//   console.log(x);
// };

La pasada de argumento no difiere en nada de la asignación normal de un valor a una variable. Esto significa que tenemos acceso a la desestructuración directamente en la definición de la función.

Desestructuración de un array

Escribamos una función que tome un array de dos elementos como entrada y los imprima en la terminal. Consideremos diferentes formas de trabajar con los parámetros.

La forma menos expresiva es acceder directamente a los elementos del array por índices:

const func = (elements) => {
  console.log(elements[0]);
  console.log(elements[1]);
};

// let elements = [1, 2];
func([1, 2]);
// => 1
// => 2

Una forma más interesante es la desestructuración del array dentro del cuerpo de la función:

const func = (elements) => {
  const [first, second] = elements;
  console.log(first);
  console.log(second);
};

// let elements = [1, 2];
func([1, 2]);
// => 1
// => 2

Pero podemos ir más allá y agregar la desestructuración directamente en la definición:

const func = ([first, second]) => {
  console.log(first);
  console.log(second);
};

// let [first, second] = [1, 2];
func([1, 2]);
// => 1
// => 2

Se aplican todas las reglas estándar de la desestructuración de un array:

const elements = [1, 2];

// let [first, second] = elements;
func(elements);
// => 1
// => 2

// let [first, second] = [1];
func([1]);
// => 1
// => undefined

// let [first, second] = [];
func([]);
// => undefined
// => undefined

Si el array pasado tiene menos de dos elementos, los parámetros que "no tienen" valores correspondientes contendrán undefined. Para estos casos, podemos proporcionar un valor por defecto:

const func = ([first = 666, second = 777]) => {
  console.log(first);
  console.log(second);
};

// [first = 666, second = 777] = [1];
func([1]);
// => 1
// => 777

// [first = 666, second = 777] = [];
func([])
// => 666
// => 777

Desestructuración de un objeto

Escribamos una función que tome un objeto con información sobre el nombre y apellido del usuario y los imprima en la terminal. Implementemos de inmediato la opción con la desestructuración del objeto para los parámetros:

const func = ({ name, surname }) => {
  console.log(name);
  console.log(surname);
};

// let { name, surname } = { name: 'John', surname: 'Doe' };
func({ name: 'John', surname: 'Doe' });
// => John
// => Doe

Es una situación típica en la práctica cuando una función recibe un objeto con muchas propiedades, pero solo se necesitan los valores de algunas propiedades. Por ejemplo, esto ocurre al procesar una respuesta HTTP (response) del servidor o una configuración para un programa. En tales casos, solo tomamos los valores necesarios, ya que al desestructurar no es necesario especificar todas las propiedades del objeto:

const func = ({ surname }) => {
  // solo tomamos los valores de surname
  console.log(surname);
};

const obj = { name: 'John', surname: 'Doe' };

// let { surname } = { name: 'John', surname: 'Doe' };
func(obj); // => Doe
NavegaciónTeoría

Completado

0 / 16