Parámetros y argumentos

Clase 14 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

Cayo Legal

student•

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

Ariel Ezequiel Biazzo Genua

student•

O... tambien podemos hacer un algoritmo de deepFreeze :)

Brandon Lee Aguero Fernandez

student•

O... también podemos utilizar una fábrica de objetos

Carina Payleman

student•

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

José Antonio Medina Sánchez

student•

Buen resumen compañera, saludos!!!

José Antonio Medina Sánchez

student•

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:

(

Santiago Andres Alvarez Cuadros

student•

Lo que mencionas se conoce como sintaxis de desestructuración pero no está relacionado con el operador REST. Tu ejemplo se puede hacer también así:

const course = {
  title: 'Título de ejemplo',
  content: 'Contenido de ejemplo',
  tags: ['uno', 'dos', 'tres']
}

const { title, tags } = course

console.log(title, tags) // Título de ejemplo ['uno', 'dos', 'tres']

No es necesario utilizar spread operator en course porque éste de por sí ya es un objeto. . La sintaxis de desestructuración se utiliza para extraer valores de objetos o arreglos de una forma rápida y fácil de entender, creando variables con el mismo nombre que los valores del objeto a desestructurar. Lo de arriba sería lo mismo que hacer esto:

const course = {
  title: 'Título de ejemplo',
  content: 'Contenido de ejemplo',
  tags: ['uno', 'dos', 'tres']
}

const title = course.title
const tags = course.tags

console.log(title, tags) // Título de ejemplo ['uno', 'dos', 'tres']

Incluso, puedes usar nombres distintos para las variables en caso de ser necesario:

const course = {
  title: 'Título de ejemplo',
  content: 'Contenido de ejemplo',
  tags: ['uno', 'dos', 'tres']
}

const { title: courseTitle, tags: courseTags } = course

console.log(courseTitle, courseTags) // Título de ejemplo ['uno', 'dos', 'tres']

Acá puedes leer más al respecto

Markin Piero Pulache Guarniz

student•

buen aporte

Elcira Ibarra

student•

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

Arturo Malgor

student•

La verdad, da gusto leer tus aportes, muy bien explicado todo. Sigue Así!!!

Luis Palomo

student•

Super importante esto! gracias!

Francisco Ponce

student•

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.

anderson buitron

student•

Muy buen aporte Francisco!, si usamos el "spread operator" para clonar un objeto con objetos anidados, estariamos creando un "clon siames" (clones unidos por alguna estructura interna), y no un "clon independiente" del objeto original. Yo tambien uso normalmente "let obj_clon=JSON.parse(JSON.stringify(obj_original));" para crear clones independientes.

N40 M10

student•

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

Markin Piero Pulache Guarniz

student•

Felipe Toro C

student•

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'

Mauricio J Carrillo

student•

Si, estás en lo correcto. Las funciones se declaran o expresan con parámetros y se llaman con argumentos.

Sebastián Bonilla

student•

manejas algun tema para vscode?

Ana Rotela Cabrera

student•

Spread operator o Parámetro Rest

Ana Rotela Cabrera

student•

Resumen de la clase

Luis Eduardo Payano Villar

student•

// spread operator arrays

const numbers = [1,2,3,4,5];
const doubledNumbers = [...numbers, ...numbers.map(number => number * 2)];
const spreadCloneNumbers = [...numbers];
const cloneNumbers = numbers.slice();
console.log(doubledNumbers);
console.log(cloneNumbers);
console.log(spreadCloneNumbers);
```*// spread operator arrays*
*const numbers = \[1,2,3,4,5]*;*const doubledNumbers = \[...*numbers*, ...numbers.map(*number *=>* number *\* 2)]*;*const spreadCloneNumbers = \[...*numbers*]*;*const cloneNumbers = numbers.slice()*;*console*.*log*(doubledNumbers);*console*.*log*(cloneNumbers);*console*.*log*(spreadCloneNumbers);

Luis Eduardo Payano Villar

student•

function sum(...numbers){
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1,2,3,4,5));
```*function* *sum*(*...*numbers){    *return* *numbers*.*reduce*((acc, curr) *=>* acc *+* curr, 0);}
*console*.*log*(*sum*(1,2,3,4,5));

Melisa Barrera

student•

Parámetros: Son variables definidas en la declaración de una función. Actúan como marcadores de posición para los valores que se pasan a la función cuando es llamada.
Argumentos: Son los valores reales que se pasan a la función cuando es invocada. Estos valores se asignan a los parámetros correspondientes definidos en la función.

BinaryTreeCode

student•

José manuel Sanchez Juarez

student•

Está muy bueno el curso, pero creo que metieron demasiado contenido en los videos, algunos si son muy extenso, en mi caso en particular siento que solo ven algunos temas superficialmente.

Ulqernesh Karvenae

student•

Hello undefined

Xavier Flores

student•

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

John Andrey Serrano

student•

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)

Alejandro Brand

student•

El spread operator y el rest operator no son lo mismo. El primero se usa para descomponer un iterable, también se puede usar para expandir sus elementos en otro iterable o en los argumentos de una funcion

El rest operator se utiliza en una lista de parámetros de una funcion para capturar un número variable de argumentos en forma de arreglo

Camilo Taborda

student•

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

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

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

const course = {
  title: 'Título de ejemplo',
  content: 'Contenido de ejemplo',
  tags: ['uno', 'dos', 'tres']
}

const { title, tags } = course

console.log(title, tags) // Título de ejemplo ['uno', 'dos', 'tres']

const course = {
  title: 'Título de ejemplo',
  content: 'Contenido de ejemplo',
  tags: ['uno', 'dos', 'tres']
}

const title = course.title
const tags = course.tags

console.log(title, tags) // Título de ejemplo ['uno', 'dos', 'tres']

const course = {
  title: 'Título de ejemplo',
  content: 'Contenido de ejemplo',
  tags: ['uno', 'dos', 'tres']
}

const { title: courseTitle, tags: courseTags } = course

console.log(courseTitle, courseTags) // Título de ejemplo ['uno', 'dos', 'tres']

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

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

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'

// spread operator arrays

const numbers = [1,2,3,4,5];
const doubledNumbers = [...numbers, ...numbers.map(number => number * 2)];
const spreadCloneNumbers = [...numbers];
const cloneNumbers = numbers.slice();
console.log(doubledNumbers);
console.log(cloneNumbers);
console.log(spreadCloneNumbers);
```*// spread operator arrays*
*const numbers = \[1,2,3,4,5]*;*const doubledNumbers = \[...*numbers*, ...numbers.map(*number *=>* number *\* 2)]*;*const spreadCloneNumbers = \[...*numbers*]*;*const cloneNumbers = numbers.slice()*;*console*.*log*(doubledNumbers);*console*.*log*(cloneNumbers);*console*.*log*(spreadCloneNumbers);

function sum(...numbers){
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1,2,3,4,5));
```*function* *sum*(*...*numbers){    *return* *numbers*.*reduce*((acc, curr) *=>* acc *+* curr, 0);}
*console*.*log*(*sum*(1,2,3,4,5));

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"

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)

Parámetros y argumentos

Introducción al Clean Code

Deuda técnica y refactorización de código

Reglas del diseño simple

Qué es Clean Code

Nombre y uso de las variables

Uso correcto de var, let y const

Reglas para la nomenclatura

Cómo nombrar según el tipo de dato

Nombres de Variables y Funciones Correctos en JavaScript

Ámbito de las variables

Ámbito global

Ámbito local o de función

Ámbito de bloque

Ámbito estático

Hoisting

Funciones

Declaración y expresión de funciones

Parámetros y argumentos

Funciones de flecha y el this

Clases

POO con ES6 (constructores, métodos y herencia)

Herencia en JavaScript

Tamaño reducido (responsabilidad única)

Organización

Optimizaciones

Cuándo usar comentarios

Formato coherente (codear en equipos)

Principio DRY

Tipos de Algoritmos y Complejidad Big O en JavaScript

Cierre

Sigue aprendiendo JavaScript