No tienes acceso a esta clase

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

Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

Arrow Functions, Promesas y Parámetros en objetos

4/14
Recursos

Las siguientes características de ES6 que aprenderás son: parámetros en objetos, funciones flecha y promesas.

Qué son los parámetros en objetos

Los parámetros en objetos son una función que consiste en crear objetos a partir de variables sin repetir su nombre como propiedad.

Antes de ES6, para crear un objeto a partir de variables consistía de la siguiente manera:

const nombre = "Andres"
const edad = 23

const objeto = {
    nombre: nombre, 
    edad: edad
 }

objeto // { nombre: 'Andres', edad: 23 }

Con los parámetros en objetos puedes obviar la repetición de nombres, JavaScript creará la propiedad a partir del nombre de la variable con su respectivo valor.

const nombre = "Andres"
const edad = 23

const objeto = {nombre, edad}

objeto // { nombre: 'Andres', edad: 23 }

El resultado es el mismo, pero sin la necesidad de repetir palabras.

Funciones flecha

Las funciones flecha (arrow functions) consiste en una función anónima con la siguiente estructura:

//Función tradicional
function nombre (parámetros) {
    return (valorRetornado)
}

//Función flecha
const nombre = (parámetros) => {
    return (valorRetornado)
}

Se denominan función flecha por el elemento => en su sintaxis.

Si existe un solo parámetro, puedes omitir los paréntesis.

const porDos = num => num*2

Retorno implícito

Las funciones flecha tienen un retorno implícito, es decir, se puede omitir la palabra reservada return, y que el código sea escrito en una sola línea.

//Función tradicional
function suma (num1, num2) {
    return num1 + num2
}

//Función flecha
const suma = (num1, num2) => num1 + num2

Si el retorno requiere de más líneas y aún deseas utilizarlo de manera implícita, deberás envolver la instrucción entre paréntesis.

const suma = (num1, num2) => (
    num1 + num2
)

Promesas

Una promesa es una forma de manejar el asincronismo en JavaScript. Si aún no sabes en qué consiste el asincronismo, no te preocupes, existe un curso completo de este tema.

Solamente ten presente que la clase Promise y sus métodos then y catch fueron añadidos en ES6, por un problema del manejo del asincronismo con funciones desencadenantes, llamado Callback Hell{target="_blank"}.

const promesa = () => {
    return new Promise( (resolve, reject) => {
        if( something ) {
            resolve( "Se ha resuelto la promesa" )
        else {
            reject( "Se ha rechazado la promesa" )
        }
    }
}

promesa
    .then( respuesta => console.log(respuesta) ) //En caso que se ejecute resolve
    .catch( error => console.log(error) ) //En caso que se ejecute reject

Contribución creada por Andrés Guano.

Aportes 302

Preguntas 66

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Expectativa:
venir a la clase y entender conceptos
Realidad
me voy con los conceptos y con 10 plugins nuevos para VSCode.

I want it all…

![Mis apuntes](

Quizá se mencione en otros cursos de JavaScript pero para los que aún no lo sepan, algo que caracteriza a las arrow functions es que no tienen un this vinculado, es decir, que el this pasa a ser el del contexto que contiene a la arrow function. Lo mismo para el objeto arguments, que no es tan común como el this, sería un objeto con los argumentos del contexto superior. Esto aclara algunos problemas que hayan podido tener al hacer uso del this y arrow functions, el cuál fue mi caso en una oportunidad. También suelen preguntarlo en entrevistas.

También puedes usar la desestructuración sobre los parámetros de la función:

const persona = {
	nombre: 'Jesus',
	apellido: 'Quinto',
	edad: 23
}

function saludar({ nombre, apellido, edad }) {
	const saludo = `Hola!, mi nombre es ${nombre} ${apellido} y tengo ${edad} años, saludos desde Venezuela`;

	console.log(saludo);
}
saludar(persona);

Hola. Dejo mis aportes (largos, lo sé 😦 )

  • composicion - newPromise()
    • resolve() - comportamiento al cumplir la promesa
    • reject() - comportamiento al fallar la promesa
    • .then (⇒) - obtener el valor del resolve
    • .error(⇒) - obtener el valor del reject()

me parece oportuno dejar este aporte para complementar la clase.
anonymous function !== lambda expression

anonymous function
Es una funcion que no tiene nombre

lambda expression
son funciones utilizadas como data, se envian como parametros a otra funcion o se retornan como producto de una funcion.

lo mas importante, las lambda expression no necesariamente son funciones anonimas y viceversa

Esta vez fueron muchos apuntes 😅

Como punto agregado a la clase, las funciones flechas heredan el this del scope del bloque en el que son declaradas. A diferencia de las funciones regulares donde el this tiene el scope de la función. Ejemplo.

{
    this.a = 'Hola';
    
    const fun1 = () => {
        console.log(this.a) // this.a es "Hola"
    }
    const fun2 = function() {
        console.log(this.a); // this.a es undefined
    }

    fun1(); // Output: Hola
    fun2(); // Output: undefined
}

Mas información aquí: https://www.tutorialspoint.com/difference-between-regular-functions-and-arrow-functions-in-javascript

/**
 * Parameters in Objects
 */
let name = 'Oscar';
let age = 32;

const obj = {
  name: name,
  age: age
};
console.log('Before ES6 -> ', obj);

// es6
const objES6 = { name, age };
console.log(`After ES6 -> `, objES6);

/**
 * Arrow Functions
 */
const names = [
  { name, age },
  { name: 'Yesica', age: 27 }
];

let listOfNames = names.map(function(item) {
  console.log('Before ES6 -> ', item.name);
});

// es6
let listOfNamesES6 = names.map(item => console.log(`After ES6 -> ${item.name}`));

/**
 * Promises
 */
const helloPromise = foo => {
  return new Promise((resolve, reject) => {
    if (foo) {
      resolve('Hey!');
    } else {
      reject('Upss!');
    }
  });
};

const foo = false;
helloPromise(foo)
  .then(response => console.log('response -> ', response))
  .then(() => console.log('message -> Hello World!'))
  .catch(error => console.log('error -> ', error));

Las únicas de las promesas en las que creo, son las de JS:

const helloPromise = () => {
    return new Promise((resolve, reject) => {
        if (false) {
            resolve('hey')
        } else {
            reject('Ups')
        }
    })
}

helloPromise()
    .then( response => console.log(response))
    .catch(error => console.log(error))```

Es muy importante los que estás explicando de arrow function, pero siento que vas muy rápido bro.
Las promesas las entendí a medias.
Espero que alguien me pueda apoyar en explicármelas.

Por fin entendí lo de las promesas 😄

Para ser sincero, estoy entendiendo JavaScript gracias a este curso

Si alguien se lo pregunta este es el tema que el utiliza SynthWave ’84

También algo a tener en cuenta se puede aplicar los operadores ternarios de manera a simplificar, saludos !!!
![](

RESUMEN:

En esta clase se enseña sobre las propiedades de objetos mejoradas, promises y Arrow Functions. En el siguiente código se comenta el antes y después de ES6.

//Propiedad de objetos mejorada.

let name =" Alejandro";
let nick =" Alejandro-sin";

ObjES6={name, nick}; //Nos permite ahorrar código para objetos muy grandes.
console.log(ObjES6);

//ArrowFunction

const names= [
    {name:"Alejandro",nick:"Alejandro-sin"},
    {name:"etrx",nick:"xrte"}
]

//Antes se iteraba mediante map y se usaban funciones anónimas.

let lista = names.map(function(item){
    console.log(item.names);
})

//Ahora esta función anónima se reemplaza por => un arrow, flecha que apunta a.

let listaES6 = names.map(item =>console.log(item.names));{ 
}

const listaES6_const = (name, nick) =>{
    ...
}

const listaES6_const_único_elemento = name =>{
    ...
}

const square = num => num *num; // Se evita el uso de return.

// Promesas, sirven para trabajar el asincronismo y hacer peticiones a una API. 
//Cómo su nombre indica dice que algo va a suceder.

const helloPromise =() =>{
    return new Promise ((resolve,reject)=>{
        if(true){
            resolve('Resuelto');
        } else {
            reject('Rechazado');
        }
    })
}

helloPromise()
    .then(Response => console.log(Response))
    .catch(error=> console.log(error));
   



Vá muy rápido Oscar

para correr el codigo recomiendo usar nodemon porque se actualiza automaticamente cuando guardas un cambio y no tienes que estarlo corriendo manualmente

Mis apuntes sobre las promesas, para hacer una peticion a una API, ya que el profesor lo menciona, la forma que yo creo que es mas facil es con fetch, porque es muy facil de usar y ademas su valor de retorno es una promesa. Justo para practicar!!

const helloPromise = () => {
  // Metodos obligatorios, resolve y reject
  return new Promise((resolve, reject) => {
    if(true){
      resolve('Hey!');
    } else {
      reject('Ups!');
    }
  })
}

// Cuando se usan las promesas, se disponen de los metodos .then() y .catch()
helloPromise()
// then, si la promesa se resuelve exitosamente
.then(response => console.log(response))
.then(() => console.log('Hola!'))
// catch, si la promesa arroja un error
.catch(error => console.log(error));```

Hola! buenas clases! quisiera hacer la observación de que el encadenar varios .then() esta condicionado a que cada uno tenga un return correspondiente.
O por lo menos eso tenía entendido =)

El nuevo feature de los subtítulos en los videos está muy bueno, pero no seria posible que esto fuera opcional? que no estuviese activado como primera instancia sino que se active si se tiene la necesidad. Desde que los videos están con subtítulos no puedo ver los videos de corrido en pantalla completa… 😕

El arrow function me costó entenderlo en un principio pero ya creo que le agarré el hilo xD. Para resumir:

  1. En las arrow functions la palabra reservada function se retira

  2. Si la función tiene un solo argumento los paréntesis son opcionales

  3. Si el bloque de código es de una sola línea el return es implícito

A modo de ejemplo:

let mostrarNombre = ( nombre ) => {
return nombre;
}

//Misma función pero resumida

let mostrarNombre = nombre => nombre;

.
Mi aporte el día de hoy:

  • Para inicializar un objeto, podemos hacerlo de forma resumida, ingresando solo las variables, tomará el nombre de la variable y su valor del mismo.
const nombre = "Alejandro";
const edad = 20;
obj = { nombre, edad};
console.log(obj); // {nombre: "Alejandro", edad:20}

.
Promesas

  • Según la MDN, representa el éxito o fracaso de una operación ASÍNCRONA.
  • Entre sus beneficios, nos permite ejecutar una acción seguida de la otra, en el orden respectivo. Siempre y cuando la operación anterior tenga éxito.
  • En el pasado, hacer varias operaciones asíncronas en fila conduciría a la clásica pirámide de funciones callback.
  • El catch nos sirve para realizar una acción luego de haber sucedido previamente, un error. Incluso, podemos colocar un then después de un catch y funcionará sin problemas.
new Promise((resolver, rechazar) => {
    console.log('Inicial');

    resolver();
}).then(() => {
      throw new Error('Algo falló');
      console.log('Haz esto');
}).catch(() => {
      console.log('Haz aquello');
}).then(() => {
      console.log('Haz esto sin que importe lo que sucedió antes');
});

Veremos en consola:

// Inicial
// Haz aquello
// Haz esto sin que importe lo que sucedió antes

Array.map retorna un nuevo arreglo que deriva del original, yo en su lugar recomendaría usar el Array.forEach para el ejemplo. Saludos

Terminando esta clase de Arrow Functions, Promesas y Parámetros en objetos(después de más de 2 horas de pausarla, leer documentación extra, volver a verla, etc) me doy cuenta que este es un curso para estar meramente enterado de las novedades de ECMAScript mas no de entender a profundidades cada una de las características que se menciona. Sería bueno dejar claro desde el primer video que todos estos conceptos se entenderán a mayor profundidad en los próximos cursos cuando se hable de closure, asincronismo y scope en Javascript para no generar falsa expectativa.

Promesas y arrow functions algo que hay que practicar bastante para llegar a comprender bien! Al menos en mi caso 😛

habla muy rápido pero vamos por todas!

Una Promise (promesa en castellano) es un objeto que representa la terminación o el fracaso eventual de una operación asíncrona.

Las Arrow Functions son interesantes pero personalmente me gusta más ver la palabra function cuando se declara una función.
Por ejemplo listOfName3

no tiene pinta de poder ser llamada de la siguiente manera listOfNames3('Juan', 35, 'Colombia')
.
Quizas será falta de costumbre?

las funciones de flechas se llaman con log. normalmente

const miPromesa = new Promise((resolve,reject) => {
  if(false){
    resolve('Bien hecho campeon');
  }else{
    reject('La cagaste pendejo');
  }
});

miPromesa
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

Hola a todos!! Las fuentes resaltadas del profesor son muy gratas de ver…
Alguien sabe qué plugin instaló el profe para tener esas iluminaciones en el código?

Sería genial que hicieran un apartado en platzi para recomendar plugins de desarrollo ❤️

Es recomendable pasar los objetos destructurados o destructurarlos cuando se pasando como argumentos, es decir:

const persona = {
     nombre : "Antonio",
     edad: 22
}

1.- Si crear la funcion que reciba la destructuracion

function saludar({ nombre, edad }) {
	const saludo = `Hola!, mi nombre es ${nombre} y tengo ${edad} años`;
	console.log(saludo);
}
saludar(persona);

2.- O destructurarlos antes de pasar los argumentos

function saludar(nombre, edad ) {
	const saludo = `Hola!, mi nombre es ${nombre} y tengo ${edad} años`;
	console.log(saludo);
}

let {nombre, edad} = persona
saludar(nombre, edad)

Así se puede escribir el código de la promesa del profe de forma abreviada

  • Si usamos un codicional if o else, podemos obviar las llasves si el código que le sigue a la condición ocupa únicamente una linea
  • También, cuando se use el then o en general cualquier función que reciba un callback, se puede escribir simplificado si el callback contiene un único argumento (respones o error, en este caso) y es ejecutado por una función (console.log)

Espero les guste 😄

Este curso debería haber estado antes el de Fundamentos de JS, ya que recuerdo que ahí se usaba mucho las Arrow Functions y Promesas.

Para quien le sirva, la extensión Arrow Function Snippets es muy útil para trabajar con las arrow functions en Visual Studio Code

//es6
//arrow function

const names = [
    {name: 'Francisco', age: 52},
    {name: 'Juanda', age: 19}
]

//si yo quiero iterar por cada uno de estos elementos para mostrarlos en la consola 
//usamos el metodo map.

//antes
let listOfName = names.map(function (item) {
    console.log(item.name);
});

//ahora es6 con funciones anonimas

let listOfName2 = names.map(item => console.log(item.name))

const listOfName3 = (name, age) => {
    //... codigo
}

const listOfName4 = name => {
    //bloque de codigo
}

const square = num => num * num;

//promesas
//algo va a pasar

const helloPromise = () => {
    return new Promise((resolve, reject) => {
        if (false) {
            resolve('Todo ok');
        } else {
            reject('Ups algo salio mal');
        }
    });
}

//se pueden anidar muchos then
helloPromise()
    .then(response => console.log(response))
    .then( () => console.log('hola mundo'))
    .catch(error => console.log(error));

Prometo que terminare el curso

Wow, esta clase estuvo bastante llena de cosas nuevas para mí :0

para sus apuntes o glosario:
Función Callback
Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

function saludar(nombre) {
  alert('Hola ' + nombre);
}

function procesarEntradaUsuario(callback) {
  var nombre = prompt('Por favor ingresa tu nombre.');
  callback(nombre);
}

procesarEntradaUsuario(saludar);

Las funciones de tipo flecha tienen una sintaxis más reducida y nos permite una escritura más amigable.

Al declarar una función antes de ECMAScript6, debíamos utilizar una sintaxis más larga en el bloque dentro de la función, y teníamos la necesidad, en ciertos casos de utilizar la palabra reservada return. Con las funciones flecha nos ahorramos todas estas particularidades y mejoramos muchísimo la sintaxis.

// ARROW FUNCTIONS - FUNCIONES FLECHA

// Antes de ES6
const people = [
  { name: "John", university: "UCAB" },
  { name: "David", university: "UCV" },
  { name: "Sergio", university: "UNIMET" },
];

let namesOfPeople = people.map(function (person) {
  console.log(person.name);
});

// Después de ES6

//1. Cuando usamos un método del array y declaramos función anónima
let listOfNames = people.map(person => console.log(person.name));

//2. Una función con más de 2 parámetros
const listOfNames2 = (a, b, c) => {
  const suma = a + b + c;
  console.log(suma);
};

listOfNames2(2, 4, 6);
//12

//3. Función de un solo parámetro
const multiplicacionPor10 = value => {
  const mult = value * 10;
  console.log(mult);
};

multiplicacionPor10(5);
//50

//4. Otra forma de hacerlo incluso más sencillo
const square = num => console.log(num * 4);
square(2);
// 8
  • Ejemplos de arrows functions
    1. En el primer ejemplo le pasamos una función anónima y nos damos cuenta de cosas importantes. No usamos la palabra reservada function y el parámetro de nuestra función lo pasamos sin paréntesis, tampoco usamos las llaves ya que JavaScript entiende que al usar => lo que está dentro es el valor que estamos retornando (no el bloque de código) que en este caso es un console.log
    2. Aquí estamos diciendo que la variable listoOfNames2 es una función donde los parámetros son varios y los encerramos dentro de paréntesis (cuando es un solo parámetro no usamos paréntesis) usamos el => y abrimos nuestras llaves donde irá el bloque de código de nuestra función
    3. Aquí guardamos nuestra función flecha en una variable, donde vemos que no usamos paréntesis para el parámetro y dentro de las llaves irá nuestro bloque de código
    4. Cuando queremos hacer solo una cosa dentro de nuestra función, como ejecutar un console.log simplemente colocamos los signos de => y escribimos la acción, sin necesidad de abrir un nuevo bloque de código, que solo se hace cuando hacemos varias cosas en una función.

Las arrow functions tienen una particularidad, y es que estas tienen un this dependiendo del contexto donde se declaran. Es decir, si declaramos una arrow function dentro de una función en el scope global, el scope del this de la arrow function es el global y no el scope local de la función. Veamos un ejemplo, en el que utilizaremos el método de un objeto.

En el siguiente código, estamos utilizando una función (no arrow function) dentro de otra función, por lo tanto, cuando en la función siguemeEnTwitter llamamos a this.twitter la función busca la propiedad twitter dentro del scope local de la función saludar, pero, en ese alcance no está esa propiedad sino antes, en el objeto persona.

const persona = {
  nombre: "Sebastian",
  twitter: "@arochaking",
  saludar: function () {
    function siguemeEnTwitter() {
      console.log(`Sígueme en Twitter ${this.twitter}`);
    }
    console.log(`Hola, mi nombre es ${this.nombre}`);
    siguemeEnTwitter();
  },
};

persona.saludar();

// Hola, mi nombre es Sebastian
// Sígueme en Twitter undefined

Ya vemos, el this.twitter genera un undefined ya que JavaScript no encuentra esa propiedad declarada dentro de la función saludar, para solucionar esto usamos una Arrow Function. Esta, no toma en cuenta a la función saludar como el contexto sino que trabaja con el scope del objeto persona, y no el scope local de la función saludar, por ello, encuentra el valor de la propiedad twitter y devuelve correctamente lo que queremos.

const persona = {
  nombre: "Sebastian",
  twitter: "@arochaking",
  saludar: function () {
    const siguemeEnTwitter = () =>
      console.log(`Sígueme en Twitter ${this.twitter}`);
    console.log(`Hola, mi nombre es ${this.nombre}`);
    siguemeEnTwitter();
  },
};

persona.saludar();

// Hola, mi nombre es Sebastian
// Sígueme en Twitter @arochaking

PROMESAS
Las promesas son un concepto para resolver el problema de asincronía de una forma mucho más elegante y práctica que, por ejemplo, utilizando funciones callbacks directamente.
|
Como su propio nombre indica, una promesa es algo que, en principio pensamos que se cumplirá, pero en el futuro pueden ocurrir varias cosas:
|
La promesa se cumple (promesa resuelta)
La promesa no se cumple (promesa se rechaza)
La promesa se queda en un estado incierto indefinidamente (promesa pendiente)
|
Las promesas en Javascript se representan a través de un , y cada promesa estará en un estado concreto: pendiente, aceptada o rechazada. Además, cada promesa tiene los siguientes métodos, que podremos utilizar para utilizarla:

Un dato para complementar. Una promesa puede ser de estas clases:

fulfilled (cumplida): la acción relacionada con la promesa se completa con éxito
rejected (rechazada): la acción relacionada con la promesa no se completa con éxito
pending (pendiente): aún no se completa ni se rechaza
settled (finalizada): se completa o se rechaza


Fuente: Promise - Javascript

Hola Comunidad.
.
El Profesor Oscar comenta el tema del Asincronismo en JavaScript. Si desean entender un poco mejor este concepto y cómo JavaScript hace uso de él, entonces pasen por este video de Platzi:
.
👉 https://www.youtube.com/watch?v=bWvnWhVCHAc
.
No tiene pierde, muy claro, a mi me sirvió mucho.
.
¡Saludos!

esta es otra forma de recibir objetos y solo filtrar la key que necesitamos

let listOfNames3 = names.map(({name}) => console.log(name))```
function newFunction(name, age, country) {
  var name = name || 'oscar';
  var age = age || 32;
  var country = country || 'MX';
  console.log(name, age, country);
}

// es6
function newFunction2(name = 'oscar', age = 32, country = "MX") {
  console.log(name, age, country);
};

newFunction2();
newFunction2('Ricardo', '23', 'CO');

let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

let lorem = "Qui consequatur. Commodi. Ipsum vel duis yet minima \n"
  + "otra frase epica que necesitamos."

// es6
let lorem2 = `otra frase epica que necesitamos
ahora es otra frase epica
`;

console.log(lorem);
console.log(lorem2);

let person = {
  'name': 'oscar',
  'age': 32,
  'country': 'MX'
}

console.log(person.name, person.age);

let { name } = person;
console.log(name);

let team1 = ['Oscar', 'Julian', 'Ricardo'];
let team2 = ['Valeria', 'Yesica', 'Camila'];

let education = ['David', ...team1, ...team2];

console.log(education);

{
  var globalVar = "Global Var";
}

{
  let globalLet = 'Global Let';
  console.log(globalLet);
}

console.log(globalVar);

const a = 'b';
a = 'a';
console.log(a);

let name = 'oscar';
let age = 32;

//es5
obj = { name: name, age: age };
//es6
obj2 = { name, age };
console.log(obj2);

const names = [
  { name: 'Oscar', age: 32 },
  { name: 'Yesica', age: 27 }
]

let listOfNames = names.map(function (item) {
  console.log(item.name);
})

let listOfNames2 = names.map(item => console.log(item.name));

const listOfNames3 = (name, age, country) => {
  ... 
}

const listOfNames4 = name => {
  ...
}

const square = num => num * num;

const helloPromise = () => {
  return new Promise((resolve, reject) => {
    if (false) {
      resolve('Hey!');
    } else {
      reject('Ups!!');
    }
  });
}

helloPromise()
  .then(response => console.log(response))
  .catch(error => console.log(error));

class calculator {
  constructor() {
    this.valueA = 0;
    this.valueB = 0;
  }
  sum(valueA, valueB) {
    this.valueA = valueA;
    this.valueB = valueB;
    return this.valueA + this.valueB;
  }
}

const calc = new calculator();
console.log(calc.sum(2, 2));

import { hello } from './module';

hello();

function* helloWorld() {
  if (true) {
    yield 'Hello, ';
  }
  if (true) {
    yield 'World';
  }
};

const generatorHello = helloWorld();
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
<code>

Una expresión de función de flecha es una alternativa compacta a una expresión de función tradicional , pero es limitada y no se puede utilizar en todas las situaciones.

Diferencias y limitaciones:

No tiene sus propios enlaces a thiso super, y no debe usarse como methods.
No tiene argumentsni new.target palabras clave.
No es adecuado para call, applyy bindmétodos, que generalmente se basan en el establecimiento de una scope.
No se puede utilizar como constructors.
No se puede usar yield, dentro de su cuerpo.

Acá dejo algo esperando que les ayude con el tema de promesas.

/** PROMESAS **/
// Tarea que va a realizar la promesa.
function funcionPromesa(todoOk, todoNoOK) {
    if (true) {
        todoNoOK("Hurra!! Todo esta genial 😍");
    } else {
        todoNoOK("Algo fallo 😩");
    }
}

// Tarea que va a realizar la promesa si todo salió bien.
function cumpliPromesa(mensaje) {
    console.log(mensaje);
} 

// Tarea que va a realizar la promesa si todo salió mal.
function noCumpliPromesa(mensaje) {
    console.error(mensaje);
}

// La promesa.
let promesa = new Promise(funcionPromesa);
promesa.then(cumpliPromesa)
.catch(noCumpliPromesa);


// Ejemplo 2.
let promesa2 = new Promise((todoOk, todoNoOK) => {
    if(false) {
        todoNoOK("Hurra!! Todo esta genial 😍");
    } else {
        todoNoOK("Algo fallo 😩");
    }
});

promesa2.then(hurra => console.log(hurra))
.catch(error => console.log(error));


// Ejemplo 3
const promesa3 = () => {
    return new Promise((todoOk, noOk) => {
        if(false) {
            todoOk("Hurra!! Todo esta genial 😍");
        } else {
            noOk("Algo fallo 😩");
        }
    }); 
};

promesa3()
.then(mensajeOk => console.log(mensajeOk))
.catch(mensajeError => console.error(mensajeError));

Para aquellos que talvez no les quedo claro la sintaxis de las arrow functions o que la están viendo por primera vez.
Básicamente esa es la sintaxis, donde primero va el parámetro de la función y “=>” reemplaza la palabra function como tal

BRO im in love with this course!!!

Le dió flojera hacer un ejemplo de listOfNames3 y listOfNames4, no es muy buen “Curso” 🙄

es el momento de parar el curso e ir corriendo al curso de asincronismo

😦 Con mas preguntas que respuestas. Siento que la ruta de desarrollo web no esta del todo bien definida o hace falta explicar muchas de estas cosas en clases anteriores. Se asume que ya todos hemos trabajado o hemos visto este tipo de conceptos pero no es asi. Las promesas no se han mencionado, y las arrow functions fueron muy confusas en las clases de scope.

Aclarando un poco mas el objeto this en las arrow functions:

  • El objeto this hace referencia al contexto actual (explicado muy rapidamente)
  • cuando creamos una funcion de forma tradicional, esta crea consigo misma un objeto this que solo existe dentro de su ambito
  • el arrow function no crea un objeto this, sino que hereda el de contexto padre
function tradicional() {
    return this;
}

const arrow = () => this;

console.log(this === tradicional()); // False
console.log(this === arrow()); // True

En ambos casos comparamos el objeto this, y solo el del arrow funcion es el mismo que el del ambito de ejecucion

otro ejemplo, si agregamos una propiedad al this, vemos como no podemos acceder desde una funcion

this.saludar = "hola";

function saludame(){
    console.log(this); // undefined
    this.saludar = "chao";
    console.log(this.saludar); // chao
}

const saludameBien = () => {console.log(this.saludar)}; // hola

saludame();
saludameBien();

Pausa y me voy al curso de asincronismo con Javascript porque no entendí las promesas 😃

Cada que hago un curso me manda a otro u otros a que los haga, eso parece nunca acabar.

me gustaria que cada vez que los profesores saquen de la manga una nuevo truco de magia(nueva funcion de js), se den el tiempo de explicar de que se trata la nueva funcin

Como que lo investigue a parte, para eso estoy aqui, para que me enseñes tú.
(ya lo investigue, y veo que si falta explicar detalles importantes)

  • Arrow Functions
    • Son funciones anonimas
    • Nos permite crear una expresion de función mas cortas
    • Deben definirce antes de ser utilizadas
    • Cuando la funcion tiene una linea de codigo no es necesario escribir el keyword function, return ni llaves.
    • Para hacer funciones arrow se utiliza =>.
const suma1 = function (a, b) {
    return `${a} + ${b} = ${a + b}`;
}
const suma2 = (a, b) => {
    return `${a} + ${b} = ${a + b}`;
}
// Si tiene mas de 2 parametros no se puede quitar los parentesis
const suma3 = (a, b) => `${a} + ${b} = ${a + b}`;


const showprint1 = function (text) {
    console.log(text);
}
const majorAge2 = (text) => {
    console.log(text);
}
// Si tiene un solo parametro podemos quitar las parametesis, las llaves y el return
const showPrint3 = cadena => console.log(cadena);

let result = suma3(4, 5);
showPrint3(result);

Propiedad de Objetos Mejorada

A partir de ES6 La propiedad de objetos se puede asignar valores de una manera mas sencilla, primero veamos como lo haciamos en ES5

let name = 'oscar';
let age = 32;

obj = {name: name, age: age};

Como vemos en el ejemplo anterior definíamos de forma manual, indicando su nombre y valor, ahora con ES6 lo podemos realizar de la siguiente manera:

obj2 = {name, age};

Como vemos es mucho mas simple e intuitiva la asignación de valores al momento de crear un objeto, tanto los ejemplos de ES5 y ES6 generan el siguiente Resultado

{ name: 'oscar', age: 32 }

Arrow Functions

las Arrow Functions o Funciones de tipo flecha, estas vienen a solventar con dos elementos, una sintaxis mas reducida y un this no vinculable, por ejemplo

const names = [
    {name: 'Oscar', age:32 },
    {name: 'Kevin', age:27 }
];
let listOfNames = names.map( function (item) {
        console.log(item.name);
    }
);

En el ejemplo anterior estamos viendo una Función Anónima, es decir, las Arrow function son funciones anónimas, por ejemplo

let listOfNames2 = names.map( (item) => console.log(item.name));

Otra forma de ver las arrow function es con una constante, ejemplo:

const listOfNames3 =  (name, age, country ) => {
     console.log(name);
}
const listOfNames4 = name => {
    console.log(name);
}
const square = num => num * num;

Estas son multiples formas de declarar arrow function, estas nos permiten simplificar nuestro código, haciendolo mas amigable.

Promesas

con las promesas trabajamos el asincronismo, JavaScript no es un Lenguaje Sincrónico, es decir, no ejecuta muchos elementos al mismo tiempo, sino que va ejecutan elementos por elementos.

Las promesas vienen a resolver los Callback Hell

Una promesa nos indica que Algo va a pasar

Veamos un ejemplo de promesas:

const helloPromise = () => {
    return new Promise((resolve, reject) => {
       if(false){
           resolve('Todo Ok');
       } else{
           reject('Algo salio mal');
       }
    });
}

Aclaremos un poco, las promesas tienen 3 estas: Pending, resolve, reject

  • Pending

    Esta nos indica que esta pendiente por ejecucion, no se ha procesado

  • Resolve

    Nos quiere decir que la procesa se cumplió

  • Reject

    nos indica que no se pudo cumplir la promesa


helloPromise()
    .then(response => console.log(response))
    .catch(error => console.log(error));

Para ejecutar las promesa tenemos que llamar la función en este caso helloPromise() adicionalmente, poseemos los elementos then() que nos permite obtener la respuesta de la promesa en caso de resolverla y catch() que permite obtener el error en caso de no cumplir la promesa

Acá un ejemplo de promesa, pueden complementar haciendo el ejemplo de getSalario. Espero les sirva

const empleados = [
    {id: 1, nombre: 'Pedro'},
    {id: 2, nombre: 'Juan'},
    {id: 3, nombre: 'María'},
];

const salarios = [
    { id: 1, salrio: 2000 },
    { id: 2, salrio: 1500 }    
];


const getEmpleado = ( id ) => {
    return new Promise( ( resolve, reject ) => {
            const empleado = empleados.find( elementoArregloEmpleados => elementoArregloEmpleados.id === id )?.nombre;

            ( empleado ) ? resolve( empleado ) : reject ( `No existe empleado con id: ${ id }` );
          
        }
    );
    
}

const id = 1;

getEmpleado( id )
    .then( empleado => console.log( empleado ))
    .catch( err => console.log(err) );
    

“llamados a un API”,
todavía ni siquiera sé que es un API.
😖

Este curso me ha enseñado mas JS que muchos que he visto

Envolver promesas en funciones no es difícil, pero ¿por qué debería hacerlo?
Las promesas son impacientes/ansiosas. Esto significa que cuando se construye una nueva Promesa, inmediatamente comienza a ejecutarse, intentando resolver el valor asincrónico. Cuando se crea una nueva Promesa, no hay ningún mecanismo de control para determinar cuándo se ejecuta la función que se pasa al constructor.
Para evitar esto, puede envolver su promesa dentro de una declaración de función y llamar a esa función solo cuando sea necesario. Esto funciona porque el intérprete de JavaScript no pasa por una declaración de función a menos que se llame a esa función.

Una Promesa es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa. Permite asociar manejadores que actuarán asincrónicamente sobre un eventual valor en caso de éxito, o la razón de falla en caso de una falla. Esto permite que métodos asíncronos devuelvan valores como si fueran síncronos: en vez de inmediatamente retornar el valor final, el método asíncrono devuelve una promesa de suministrar el valor en algún momento en el futuro.

Hazte la promesa de nunca parar de aprender.

// ARROW FUNCTIONS, se busca una sintaxis más reducida y un this no vinculable
const names = [
    {name: 'Daniel', age: 26},
    {name: 'Carlos', age: 28}
]

let listOfNames = names.map(function (item) {
    console.log(item.name);
})

//ES6
let listOfNames2 = names.map(items => console.log(item.name));

const listOfNames3 = (name, age, country) => {
    ...
}

const listOfNames4 = name => {
    ...
}

const square = num => num*num; //Ya no tendría que realizar un return ni bloques de llaves. 

//PROMESAS para trabajar el asincronismo
const helloPromise = () => { //Se asigna una arrow function
    return new Promise((resolve, reject) => { //Se asigna una nueva promesa
        if (true) {
            resolve('Hey!');
        } else {
            reject('Ups!!');
        }
    });
}

helloPromise()
    .then(response => console.log(response))
    .catch(error => console.log(error));

=> = Arrow Functions

Si quieren tener el VS Code igual a como lo tiene el profe, les dejo el vídeo en el que habla de sus extensiones una por una y qué hacen 😉

Oscar gracias tienes el don de la enseñanza, te entiendo todo muy bien, este curso debería tomarse antes que el de fundamentos de JS.

Hay que hacer el curso de asincronismo para tener todos los conceptos mas claros y aplicarlos sin dificultad.

Algo que quise verificar

  • helloPromise puede tener el nombre que quieras
  • new Promise debe ser ese mismo nombre porque lo que hace es llamar al objeto promesa y usarlo
const helloPromise = () => {
  return new Promise((resolve, reject) => {```

// clase arrow funtions promesas y parametros en objetos

let name = 'john';
let age = 32;
//es5
obj = { name: name, age: age };
//es6
obj2 = { name, age };
console.log(obj2)

const names = [
    { name: 'john', age: 32 },
    { name: 'yesica', age: 27 }
]
let listOfNames = names.map(function (item) {
    console.log(item.name);
})
//es6
let listOfNames2 = names.map(item => console.log(item.name))
const listOfNames3 = (name, age, country) => {...}
const listOfNames4 = name => {...}
const square = num => num * num;

const helloPromise= ()=> {
    return new Promise((resolve, reject) => {
        if (true ){                                 // si es falso ejecuta la reject
            resolve('se resolvio');
        }else{
            reject('no se resolvio')
        }
    })
}

helloPromise()
.then(response => console.log(response))
.then(() => console.log('hola'))
.then(error =>(console.log));```
/* 'asynchronism' javaScrip can't run more of one action,
 but you can solve with promises better than callback */

 const helloPromise = () => {
     return new Promise((resolve, reject) => {
        if(false) {
            resolve('Hey good!')
        } else {
            reject('Bad news')
        }
     })
 }

 helloPromise() 
     .then(response => console.log(response))
     .catch(error => console.log(error))
 

aqui esta mi promesa, todo ok

const hellPromise = () =>{
return new Promise((resolve, reject) => {
if (true){
resolve(‘Hey! todo OK!’);
} else{
reject(‘Ups!, Algo salio Mal!’);
}
});
}

hellPromise()
.then(response => console.log(response))
.catch(error => console.log(error));

Que son las promesas fuente: Platzi

Temas relevantes:

Declaración de objetos con sus propiedades:


let name = 'oscar'
let age = '37'

obj = {name , age'```

Arrow Functions
//ES5
let myFunción = names.map( fuction(item) {
console.log(item.name);
})
//ES6 V1
let myFunción = names.map( (item) => {
console.log(item.name);
})
//ES6 V2 Cuando sólo se pasa un parámetro
let myFunción = names.map( item => console.log(item.name));
})

Promesas
const functionConPromesa = () => {
return new Promise ((resolve, reject) => {
if (true) {
resolve('Hey)
else {
reject(‘Ups’)
}
}
functionConPromesa()
.then(response => console.log(response))
.cathc(error => console.log(error));```

Lo hice de esta manera un ejemplo con arrow function

const presentation = [{
colegio: ‘Martim Cerere’,
profesora: ‘Joshy’
}];

let licen=presentation.map(item => (console.log(Hola, mi colegio es ${item.colegio} y mis alumnos me dice ${item.profesora})));

Apuntes:

https://nasal-zoo-be9.notion.site/Arrow-Functions-Promesas-y-Par-metros-en-objetos-879f553bea254b6ab222fadd8ed4b68b

Mi código ejemplo:

//Parameters in objects

{
   let name = 'Miguel';
   let age = 15;
   let person = {
      name, age
   };
   console.log(person);
}

//arrow functions

{
   let sum = (a,b) => a + b;
   console.log(sum(2,2));
}

//Promises

{
   const myPromise = (reason) => {
      return new Promise((resolve, reject) => {
         if(reason){
            resolve('Hey!');
         }else{
            reject('Ups!');
         }
      });
   }

myPromise(false)
   .then(result => `${result} Howdy`)
   .then(result => console.log(result))
   .catch(err => console.log(err));
}

Sintaxis de una promesa

const helloPromise = () => {
return new Promise((resolve,reject) =>{
 if(true){
resolve('Hey');
}

else{
reject('Ups!!!');
}
});
}

Ejecutarla

helloPromise()
  .then(response => console.log(response))
  .then(() =>console.log('hola'))
  .catch(error =>console.log(error));

arrow funcions son funciones anonimas.

No me quedo muy claro cuando se una promesa. Pero tocara averiguar 😛

const helloPromise = () => {
    return new Promise((resolve, reject) => {

        if (true){
            resolve('Hey todo bien!!')
        } else{
            reject('Algo salio mal!!!!');
        }
    });
}

// EJECUTAMOS
helloPromise()
    .then(response => console.log(response))
    .catch(error => console.log(error));

Para los que vienen de python
Las promesas son un:

try:
	pass
except:
	pass

✨✨✨

Si se quedarón con dudas de las Promesas, les comparto esta excelente explicación: https://www.youtube.com/watch?v=pHBmmbDQl0o

FUNCION MAP

Tema que toca aprender a como usar bien las arrow functions y promesas

interesante

let person = {
    'name': 'oscar',
    'age': 32,
    'country': 'MX'
}

console.log(person.name, person.age);

//es6
let { name, age } = person;
console.log(name,age);```

Curso de cómo instalar ese efecto neon en visual studio code, pls


//Arrow Functions, Promesas y Parámetros en objetos

let name = "nelly";
let age = 28;

// es5

obj = { name: name, age: age };
console.log(obj);

// es6

obj2 = { name, age };
console.log(obj2);

// Arrow functions (son funciones anonimas)

const names = [
  {
    name: "Nelly",
    age: 28,
  },
  {
    name: "Oscar",
    age: 32,
  },
];

let listOfNames = names.map(function (item) {
  console.log(item.name);
});

// es6
let listOfNames2 = names.map((item) => console.log(item.name));

const listOfNames3 = (name, age, country) => {
    ...
}

const listOfNames4 = name => {
    ...
}

const square = num => num * num;


// PROMESAS (Algo va a pasar)

const helloPromise = () => {
    return new Promise((resolve, reject) => {
        if (true){
            resolve('Hey!')
        }else{
            reject('Ups!')
        }
    })
}

helloPromise()
.then(response => console.log(response))
.catch( error => console.log(error))

Creo que hay algo que se debe de corregir, y es acerca del uso de .map a partir del minuto 4:15. La función .map va a retornar un nuevo elemento siempre, si intentásemos hacerle solo console.log(name) en el cuerpo de la función/callback, va a retornar undefined porque explícitamente no se está retornando nada, solo imprimiendo. Para ese ejemplo práctico, considero que era mejor usar .forEach para evitar confusiones posteriormente con los alumnos.

Dado eso, dejo acá la diferencia:

  • .map: retorna un elemento siempre al nuevo array
  • .forEach: solo recorre y no retorna nada

Ya la utilidad de ambos se definen en base a lo que se desee realizar en un algoritmo. Saludos!

Ese primer ejemplo creo que hubiese quedado más claro si le ponia distintos nombres… en vez de “name: name”




Con este video entendí mejor el asincronismo. Siento que Oscar lo explicó un poco a la volada.