Parámetros y argumentos

Hoy día existe un método global llamado structuredClone que hace una copia profunda de los objetos. El spread operator tiene un límite de copia solo hasta el primer nivel

Argumentos VS Parámetros

• Argumentos: Se utilizan en las llamadas de la función para ejecutarla.
  • Se recomiendan max. 3 argumentos por función.
• Parámetros: Se utilizan en la función para trabajar con elementos externos.

// Parámetro: number
function getDouble (number) {
  return number * 2;

// Argumento: 10
getDouble(10); 

• Se pueden establecer parámetros default que ayudan a mantener la integridad del código. Aunque no hay que abusar de su uso!

// Parámetro por default:
function greet(person = 'extraño') {
  console.log("Hola " + person);
}
greet("Carina"); // "Hola Carina"
greet(); // "Hola extraño"

//Rest Operator: 
function add(x, y, ...args) {
  console.log(args);
}

• Rest Operator:
  • Si se usa como parámetro, permite tener en cuenta parámetros adicionales y poder utilizarlos (y debe ser el último parámetro!)
  • Si se usa como argumento, expande los elementos de un array/objeto.

const numbersA = [1, 2, 3];
const clonedNumbers = [...numbersA];
console.log(clonedNumbers) // [1, 2, 3]

const numbersB = [4, 6, 8]
const totalNumbers = [...numbersA, ...numbersB];
console.log(totalNumbers);

Saludos!!! Algo para agregar seria que podemos tomar alguno de los elementos que necesitemos del operador rest, quizá no necesitamos clonar todo solo tomar algunos elementos que ocupemos, por lo tanto crearíamos esas variables independientes de la siguiente manera:

(

Una característica muy importante del spread operator es que es inmutable, es decir, copia los valores y no la referencia y devuelve un nuevo array que asignamos a una nueva variable o constante.

// En este ejemplo podemos ver que los arrays: numbersA, numbersB y numbersC no cambiaron y sí pudimos generar una copia de sus valores.

const numbersA = [1,2,3];
const numbersB = [4,5,6];
const numbersC = [7,8,9];

const newNumbers = [...numbersA, ...numbersB, ...numbersC];

console.log('numbersA', numbersA);
console.log('numbersB', numbersB);
console.log('numbersC', numbersC);

console.log('newNumbers', newNumbers);

Tienes que tener en cuenta que si tenemos un objeto anidado dentro de otro objeto y utilizamos el operador spread para clonar el objeto completo, es posible que se genere una copia superficial del objeto anidado y, por lo tanto, cualquier cambio en el objeto clonado también afectará al original.

const usuario1 = {
  nombre: 'Juan',
  edad: 25,
  direccion: {
    calle: 'Calle Falsa',
    numero: 123,
    ciudad: 'Buenos Aires'
  }
};

const usuario2 = { ... usuario1 };

usuario2.direccion.calle = 'Otra Calle';

console.log (usuario1.direccion.calle);

Si te diste cuenta, aunque señalamos específicamente una modificación en la dirección del usuario2, terminamos modificando por igual la dirección del usuario1.

Existen otras soluciones como JSON.parse(JSON.stringify()), que podrían ayudarte a clonar un objeto de forma completa.

Por favor que el equipo de este curso haga un remake del curso profesional de JS… Son realmente buenos.

Solo para resaltar y terminar de entender, en el minuto 3:10 el profesor habla de llamar funciones con o sin parametro, el término correcto sería llamar funciones con o sin argumento???.

Las funciones se crean con parametros y se llaman con argumentos me pueden confirmar si estoy en lo correcto ???

function greet(person = 'strange'){ //--> Parametro de función es person por default es = 'strange'
  console.log('Hello ' + person)
}

greet('Felipe') //--> Se llama a la función pasando 'Felipe como argumento'

en React esta clase es altamente usada para trabajar con estados y eventos.

Hay que tener cuidado con los parámetros default ya que solo tienen en cuenta si el valor es undefinedse asigna el value default, ejemplo:

function greet (name = 'Andrey') {
  console.log(`Hello ${name}`)
}

greet() // "Hello Andrey"
greet('John') // "Hello John"
greet(undefined) // "Hello Andrey"
greet('') // "Hello "
greet(false) // "Hello false"
greet(null) // "Hello null"

Una posible solución a esto sería:

function greet (name = 'Andrey') {
  if (name) {
    console.log(`Hello ${name}`)
  }
}

greet() // "Hello Andrey"
greet('John') // "Hello John"
greet(undefined) // "Hello Andrey"

// como el valor es "false" no se ejecuta el console.log()
greet('')
greet(false)
greet(null)

otra opcion a la hora de concatenar Arrays

const numbersA = [1, 2, 3];
const numbersB = [5, 6, 7];

const numbersC = numbersA.concat(numbersB);

console.log(numbersC);

function sum(a, b, c) {
return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(…numbers);
console.log(result); // Output: 6

Para entender mejor el método reduce, les recomiendo esta clase:
https://platzi.com/clases/2461-arrays/40876-reduce/

Otra forma de sumar más parámetos se puede utilizar el siguiente código:

function sumar(…numeros) {
let resultado = 0;
for (let numero of numeros) {
resultado += numero;
}
return resultado;
}

Si se quieren pasar muchos argumentos creo que hay que pensar en dividir la función en varias