Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 7D : 1H : 11M : 59S

No tienes acceso a esta clase

Para ver esta clase necesitas una suscripción a Platzi

Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

Arrow Functions, Promesas y Parámetros en objetos

4/11

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](promesas y arrow.PNG

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é 😦 ) clase4.png

  • 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

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

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

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

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

Esta vez fueron muchos apuntes 😅

screencapture-notion-so-Arrow-Functions-Promesas-y-Par-metros-en-objetos-7888048977474e55bb31b693523aaef9-2020-07-19-04_31_17.png

Por fin entendí lo de las promesas 😄

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



Para ser sincero, estoy entendiendo JavaScript gracias a este curso

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… 😕

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.

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

También algo a tener en cuenta se puede aplicar los operadores ternarios de manera a simplificar, saludos !!!
![](2021-03-07 10_34_56-Window.png

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

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

Vá muy rápido Oscar

las funciones de flechas se llaman con log. normalmente

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

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

image 1.jpg
  • 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.

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.

Las Arrow Functions son interesantes pero personalmente me gusta más ver la palabra function cuando se declara una función.
Por ejemplo listOfName3
tempPlatzi.JPG
no tiene pinta de poder ser llamada de la siguiente manera listOfNames3('Juan', 35, 'Colombia')
.
Quizas será falta de costumbre?

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

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

Prometo que terminare el curso

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!

habla muy rápido pero vamos por todas!

=> = 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 😉

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

Por fin entiendo las promesas

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

/* '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));```

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

Clases de promesas
Fuente: Promise - Javascript

Screen Shot 2020-08-03 at 21.01.39.png

Después de ver la clase me di cuenta que tenía una confusión con los términos de síncrono y asíncrono 🙃

Les comparto mis apuntes de la clase, espero les sea de ayuda.

Objetos en base a variables

Funciones de tipo flecha (arrow functions)

Promesas

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;

Las arrow functions

  • No tiene sus propios enlaces a this o super y no se debe usar como métodos
  • No tiene argumentos o palabras clave new.target.
  • No apta para los métodos callapply y bind,
  • No se puede utilizar yield dentro de su cuerpo.

Comparto mi resumen.

-Arrow functions
Las funciones anónimas cambian por los arrow functions.
Es decir, las arrow functions son funciones anónimas.
Cuando es con un solo parámetro se pueden omitir los paréntesis; con más de un parámetro los paréntesis son obligatorios.
Si solo retorna un valor, se puede omitir la palabra reservada return, por lo que, el bloque de llaves {} también se puede obviar.
Si dentro de la función hacemos más operaciones, las llaves no se pueden omitir.
-Promesas
Repara un problema con los callbacks - El callbackHell
Promesas: Algo va a pasar.

const helloPromises = () => {
  return new Promise((resolve, reject) => {
    if (true) {
      resolve('HEY')
    } else {
      reject ('UPS!!')
    }
  )}
}

Ejecución de la promesa:

helloPromise()
   .then(response => console.log(response))
   .then(() => console.log('Hola') //Es posible anidar varias promesas
   .catch(error => console.log(error))

Gracias por ayudarme a entender el tema de las promesas…

Arrow Functions, Promises, Obj Parameters

// ARROW FUNCTION: sintaxis mas reducidas y un this no vinculado

const names = [
    {name : 'Oscar', age: 23},
    {name: 'Yesica', age: 24}
]

// antes se hacia con esta funcion anonima
let listOfNames = names.map(function(item){
    console.log(item.name);
})

// arroy function: mas amigable mas entendible mas corta
let listOfNames2 = names.map (item => console.log(item.name));

//otra forma de encontrar a las arrow function es con las constantes
const listOfNames3 = (name, age, country) => {
    ... //bloque de codigo
}

// otra forma si solo tuviera un solo argumentos
const listOfNames4 = name => {
    ...// bloque de codigo
},

//multiplica es numero por si mismo y lo retorna. Ya no hay que generar return o poner en bloques de llaves
const square = num => num*num; 

// PROMESAS PARA TRABAJAR CON ASYNC 

const helloPromise = () => {
    // retornar una promesa con dos elementos que necesita: resolve y reject
    return new Promise ((resolve, reject) => {
        // nos va a permitir establecer una validacion 
        if (true) {
            resolve('HEEEEY!!');
        } else {
            reject('OOOpps'); 
        }
    });

}

//ejecutar una promesa
 helloPromise() 
    .then(response => console.log(response))
    .catch(error => console.log(error)); 

C4.png

Hola chicos les recomiendo que si sus if no son tan largo usen los operadores ternarios ayudan mucho a la legibilidad y reducción en líneas del código.
Sintaxis

condición ? expr1 : expr2 

condición
Una expresión que se evalúa como true o false.
expr1, expr2
expr1 : Lo que se evalua como true
expr2 : Lo que se evalua como false

Quedaría algo así el ejemplo del profe

false ? resolve('Hey!') : reject('Ups!');
//es6
//Crear objetos de manera facil
//Nos sirve para ahorra codigo
let nombre = "Victor";
let edad = 17;
obj = {nombre, edad};

console.log(obj);

//Arrow function
let datos = [
    {nombre : "Victor", edad : 17},
    {nombre : "Axel", edad : 18}
]
const resultadoValores = datos.map( recorrer => recorrer.nombre);
console.log(resultadoValores);

const suma = num => num * num;


//Promesas
const helloPromise = () => {
    return new Promise((resolve, reject) => {
        if (true){
            resolve("Bien");
        }else{
            reject("Upssss")
        }
    })
}
helloPromise()
    .then(reponse => console.log(reponse))
    .then(() => console.log("Holaaa"))
    .catch(error => console.log(error));

Mi código:

const Promesas = (evaluar) => {
    return new Promise((resolve, reject) => {
        if (evaluar){
            resolve('Felicidades')
        }else{
            reject('Lo siento!')
        }
    });
}

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

4. Arrow Functions, Promesas y Parámetros en objetos

Esta clase en el tema de Promesas no me quedó muy clara, leerá documentación y llevaré el curso de Asincronismo para reforzar ese punto.

Les comparto el código de la clase:

//Lesson 3: Arrow Functions, Promesas y Parámetros en objetos
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}
];

//arrow functions
//es5
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 squeare = num => num * num;

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

helloPromise()
    .then(response => console.log(response))
    .then(() => console.log('hola'))
    .catch(error => console.log(error))
  1. Arrow Functions, Promesas y Parámetros en objetos
    *- Propiedad de objeto mejorada
    Han mejorado las propiedades para manipular los objetos en javascript. Actualmente se puede conformar objetos a partir de variables ya inicializadas con valores con una sentencia más reducida.
    4-1-porpiedad-de-objeto-mejorada.png
    4-1-porpiedad-de-objeto-mejorada-resultado.png

Function expression
*- function expression o Anonymous function (es5)
También se puede definir una función de JavaScript mediante una expresión. Una expresión de función se puede almacenar en una variable. La función anterior es en realidad una función anónima (una función sin nombre). Las funciones almacenadas en variables no necesitan nombres de función. Siempre se invocan (se llaman) utilizando el nombre de la variable.
Referencia
https://www.w3schools.com/js/js_function_definition.asp
4-2-anonymous-function.png
*- Function Arrow
Las arrow function, vienen a solucionar dos problemas: 1) sintaxis reducida y 2) Usan this no vinculable, hay que aclarar que las arrow function son funciones anónimas también.
Minuto de clase 2:27
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions
4-2-arrow-function.png
4-2-arrow-function-respuestas.png
*- Promesas
El objeto Promise (Promesa) es usado para computaciones asíncronas. Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca. las promesas viene a solucionar dos cosas en javascript uno es los call-back hell y agregar el asincronismo en javascript
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise
4-3-promesas.png

4-3-promesas-respuesta.png

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

Otra forma de las Arrow Functions es desglosar los atributos del objeto, así la sintaxis es mas amigable.
ejemplo.

var Alex = {
    nombre: 'Alex',
    apellido: 'Nieto',
    edad: 21,
    profesion: 'software engineer'
}
const MAYORIA_DE_EDAD = 18

// const esMayorDeEdad = function (persona) {
//     return persona.edad >= MAYORIA_DE_EDAD
// }

const esMayorDeEdad = ({ edad }) => MAYORIA_DE_EDAD

Este tema se trata a mayor profundidad en el curso de fundamento de js

la fin entiendo las promesas, muy buena la clase!

Genial

Si decean profunizar mas sobre las promesas en JS , les recomiendo

Mas lento please

MIS APUNTES DE LA CLASE

let name = 'andres';
let age = 32;

//es5

obj = {name: name, age: age}

//es6 

// En ves de hacer la asignacion completa solo indicamos la variable al objeto
// Y javascript hara la asignacion como si la estuvieramos haciendo
// Nos sirve cuando queremos establecer un objeto con varios elementos y
// no tendriamos que hacer la asignacion de cada cosa

obj2 = {name, age}

console.log(obj, obj2);

// Arrow Fuctions

const names = [

    {name: 'Oscar', age: 32},
    {name: 'Yesica', age:27}
]

// Funcion Normal 

let listOfNames= names.map(function(persona){

    console.log(persona.name)

})

// Arrow Function
let listOfNames2 =  names.map((item)=>{ console.log(item.name)})

// Otra forma en la que encontraremos Arrow Function
 
const listOfNames3 = (name, age, country) =>{


}

// Arrow function con un solo parametro no es necesario ()

const listOfNames4 = name => {}

// Otra forma de arrow function sin () ni {} y nos retorna su valor directamente

const square = num => num * num;


// Promesas para trabajar con asincronismo

// es5 callback

// es6 promesas pra reparar el problema con los callback hell

const helloPromise = () =>{

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

        if(true){

            resolve('Hey!!')

        }else{

            reject('Ups')
        }


    })

}

// Para ejecutar nuestra promesa

//invocamos la funcion que la retorna
helloPromise()
    //Concatenamos .then y esta funcion nos permite obtener el valor de la promesa
    //Obtenemos el valor atraves de una funcion que le pasamos por parametro
    .then(response => console.log(response))
    //Podremos encadenar varios .then para seguir obteniendo respuestas
    .then(response => console.log(response))
    //En el catch  saldra un error si las promesas no se resuelven
    .catch(error => console.log(error));

Excelente! no me había quedado muy claro el tema de promesas, explicación eficiente!

Para pasarle valores como parámetro al segundo .then() de la llamada a la promesa, puedes usar un return en el primer .then(), así:

APIcall()
	.then(response => {
		/* your code */
		return 'Hey!';				
	})
	.then(returnedFromThen1 => 	{
		console.log(returnedFromThen1);		/* Hey! */
	}) 
	.catch(error => {
		console.error(`Error, could not connect to the API; ${error}`);
	});

.
Por si algún día tienen problemas con el escope 😉

Este video explica muy bien las promesas e incluso va más a detalle en algunas de sus propiedades, solo que está en inglés. https://www.youtube.com/watch?v=DHvZLI7Db8E&t=456s

Grupo de whatsapp sobre la Escuela de Javascript y JS en general https://chat.whatsapp.com/LsR1Zt77zIV2bUw30fMQ3M

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.

Solo tengo una pregunta resolve y reject hacen prácticamente lo mismo? mas allá de que uno es para cuando la promesa funciona correctamente y el otro cuando no, en que se diferencian?

Siempre usen promesas para manejar su asincronismo, en serio, a mi me costó trabajo aceptarlos porque amaba los callbacks, pero las promesas son mejores en muchos sentidos jaja

quede muy perdida en esta clase 😕

var array = [1,2,3,4];
arrSquare = array.map( item => {
console.log(item);
return item+6
})
map debe devolver una lista y para eso en la arrow function debe haber un return, detalle a no olvidar.

Hola profe, tengo una duda que me parece ser muy tonta, pero ahi voy. Tengo un proyecto el día de hoy en .net y js. ¿como puede integrar estas nuevas funciones?, ¿Debo instalar algún plugin?

Hola tengo una pregunta, por qué al ejecutar el siguiente codigo me muestra primero el ‘OK’ y luego el ‘Si resolvio’ ? En qúe orden se ejecutan los .then() ?

const helloPromise = () => { return new Promise( (resolve, reject) => { if(true) resolve('Si se resolvio...'); else reject('No se resolvio'); } ) } helloPromise() .then(response => console.log(response)) .then(console.log('OK')) .catch(error => console.log(error)) ;

mia prote codigo comentado pero nose s se entienda

//asignar a objetos
let name = 'fernando';
let age  = '17';
//es5
obj = {name: name, age: age};
// es6
obj2 = {name, age};
console.log(obj2);

//arrows function
const names = [
    {nombre: 'fernando', edad: 17},
    {nombre: 'daniela', edad: 16}
] //arreglo con objetos dentro
//es5
let listOfNames = names.map(function (item) {
    console.log(item.nombre)
});
// es6
let listOfNames2 = names.map(item => console.log(item.nombre));
// tambien se puede
const listOfNames3 = (name, age, country) => {
    //codigo a ejecutar
}
// y cuando solo hay unparametro
const listOfNames4 = name => {
    //codigo a ejecutar
}
//otra
const square = num => num * num; //al parametro num se le multiplica por si mismo para dar el cuadrado

//********************* */ asincronismo con promesas*******************************************
//se le agregan lso parametror resolve si funciona y reject si rechaza
const helloPromise = () => {
    return new Promise((resolve, reject) => {   
        if (true){
            resolve('hey funcino');//si funciona
        }else{
            reject('ups :(');//recahazado
        }

    });
}
helloPromise()
.then(Response => console.log(Response))//si funciono
.then (() =>  console.log("hola"))//muestra esto si funciono
.catch (Error => console.log(Error));//muestra el error si rechazo```

muy interesante lo de las promesas, creo que es mas util que estar manejando tanto callback function

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

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


Alguien sabe por qué no me está corriendo el código?

osea que los callbacks ya no se usarían más?

Las promesas son super básico pues siempre estaremos haciendo llamados que podrían hacer que el código se rompa (si es que hay un error).
Las promesas nos ayudarán a evitarlo.

muy buen profesor! Arrow functions es tan importante para entender código actual en JS

muy interesante esto…

de gran utilidad, las habia utilizado antes pero aun no comprendia adecuadamente el concepto

Todo muy bien explicado. Se nota el buen manejo del tema, gracias

muy bueno para evocar 😉

Inlcuso esto puede ser mas simplificado con arrow functions para que las practiquen.

const hellowPromise = () => new Promise((resolve, reject) => {
    const validation = true;
	if(validation)
		resolve("Good!");
	else
		reject("Bad!")
});
hellowPromise()
.then(response => console.log(response))
.catch(error => console.log(error));

parametros de objetos en ES6
obj = {name, age}


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

La parte de las API me tiene emocionado!!

Propiedad de objeto mejorada

const name = 'Walter'
const age = 41
//es5
obj = { name: name, age: age }
//es6
obj2 = { name, age }

console.log(obj2)

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](promesas y arrow.PNG

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é 😦 ) clase4.png

  • 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

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

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

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

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

Esta vez fueron muchos apuntes 😅

screencapture-notion-so-Arrow-Functions-Promesas-y-Par-metros-en-objetos-7888048977474e55bb31b693523aaef9-2020-07-19-04_31_17.png

Por fin entendí lo de las promesas 😄

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



Para ser sincero, estoy entendiendo JavaScript gracias a este curso

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… 😕

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.

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

También algo a tener en cuenta se puede aplicar los operadores ternarios de manera a simplificar, saludos !!!
![](2021-03-07 10_34_56-Window.png

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

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

Vá muy rápido Oscar

las funciones de flechas se llaman con log. normalmente

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

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

image 1.jpg
  • 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.

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.

Las Arrow Functions son interesantes pero personalmente me gusta más ver la palabra function cuando se declara una función.
Por ejemplo listOfName3
tempPlatzi.JPG
no tiene pinta de poder ser llamada de la siguiente manera listOfNames3('Juan', 35, 'Colombia')
.
Quizas será falta de costumbre?

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

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

Prometo que terminare el curso

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!

habla muy rápido pero vamos por todas!

=> = 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 😉

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

Por fin entiendo las promesas

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

/* '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));```

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

Clases de promesas
Fuente: Promise - Javascript

Screen Shot 2020-08-03 at 21.01.39.png

Después de ver la clase me di cuenta que tenía una confusión con los términos de síncrono y asíncrono 🙃

Les comparto mis apuntes de la clase, espero les sea de ayuda.

Objetos en base a variables

Funciones de tipo flecha (arrow functions)

Promesas

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;

Las arrow functions

  • No tiene sus propios enlaces a this o super y no se debe usar como métodos
  • No tiene argumentos o palabras clave new.target.
  • No apta para los métodos callapply y bind,
  • No se puede utilizar yield dentro de su cuerpo.

Comparto mi resumen.

-Arrow functions
Las funciones anónimas cambian por los arrow functions.
Es decir, las arrow functions son funciones anónimas.
Cuando es con un solo parámetro se pueden omitir los paréntesis; con más de un parámetro los paréntesis son obligatorios.
Si solo retorna un valor, se puede omitir la palabra reservada return, por lo que, el bloque de llaves {} también se puede obviar.
Si dentro de la función hacemos más operaciones, las llaves no se pueden omitir.
-Promesas
Repara un problema con los callbacks - El callbackHell
Promesas: Algo va a pasar.

const helloPromises = () => {
  return new Promise((resolve, reject) => {
    if (true) {
      resolve('HEY')
    } else {
      reject ('UPS!!')
    }
  )}
}

Ejecución de la promesa:

helloPromise()
   .then(response => console.log(response))
   .then(() => console.log('Hola') //Es posible anidar varias promesas
   .catch(error => console.log(error))

Gracias por ayudarme a entender el tema de las promesas…

Arrow Functions, Promises, Obj Parameters

// ARROW FUNCTION: sintaxis mas reducidas y un this no vinculado

const names = [
    {name : 'Oscar', age: 23},
    {name: 'Yesica', age: 24}
]

// antes se hacia con esta funcion anonima
let listOfNames = names.map(function(item){
    console.log(item.name);
})

// arroy function: mas amigable mas entendible mas corta
let listOfNames2 = names.map (item => console.log(item.name));

//otra forma de encontrar a las arrow function es con las constantes
const listOfNames3 = (name, age, country) => {
    ... //bloque de codigo
}

// otra forma si solo tuviera un solo argumentos
const listOfNames4 = name => {
    ...// bloque de codigo
},

//multiplica es numero por si mismo y lo retorna. Ya no hay que generar return o poner en bloques de llaves
const square = num => num*num; 

// PROMESAS PARA TRABAJAR CON ASYNC 

const helloPromise = () => {
    // retornar una promesa con dos elementos que necesita: resolve y reject
    return new Promise ((resolve, reject) => {
        // nos va a permitir establecer una validacion 
        if (true) {
            resolve('HEEEEY!!');
        } else {
            reject('OOOpps'); 
        }
    });

}

//ejecutar una promesa
 helloPromise() 
    .then(response => console.log(response))
    .catch(error => console.log(error)); 

C4.png

Hola chicos les recomiendo que si sus if no son tan largo usen los operadores ternarios ayudan mucho a la legibilidad y reducción en líneas del código.
Sintaxis

condición ? expr1 : expr2 

condición
Una expresión que se evalúa como true o false.
expr1, expr2
expr1 : Lo que se evalua como true
expr2 : Lo que se evalua como false

Quedaría algo así el ejemplo del profe

false ? resolve('Hey!') : reject('Ups!');
//es6
//Crear objetos de manera facil
//Nos sirve para ahorra codigo
let nombre = "Victor";
let edad = 17;
obj = {nombre, edad};

console.log(obj);

//Arrow function
let datos = [
    {nombre : "Victor", edad : 17},
    {nombre : "Axel", edad : 18}
]
const resultadoValores = datos.map( recorrer => recorrer.nombre);
console.log(resultadoValores);

const suma = num => num * num;


//Promesas
const helloPromise = () => {
    return new Promise((resolve, reject) => {
        if (true){
            resolve("Bien");
        }else{
            reject("Upssss")
        }
    })
}
helloPromise()
    .then(reponse => console.log(reponse))
    .then(() => console.log("Holaaa"))
    .catch(error => console.log(error));

Mi código:

const Promesas = (evaluar) => {
    return new Promise((resolve, reject) => {
        if (evaluar){
            resolve('Felicidades')
        }else{
            reject('Lo siento!')
        }
    });
}

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

4. Arrow Functions, Promesas y Parámetros en objetos

Esta clase en el tema de Promesas no me quedó muy clara, leerá documentación y llevaré el curso de Asincronismo para reforzar ese punto.

Les comparto el código de la clase:

//Lesson 3: Arrow Functions, Promesas y Parámetros en objetos
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}
];

//arrow functions
//es5
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 squeare = num => num * num;

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

helloPromise()
    .then(response => console.log(response))
    .then(() => console.log('hola'))
    .catch(error => console.log(error))
  1. Arrow Functions, Promesas y Parámetros en objetos
    *- Propiedad de objeto mejorada
    Han mejorado las propiedades para manipular los objetos en javascript. Actualmente se puede conformar objetos a partir de variables ya inicializadas con valores con una sentencia más reducida.
    4-1-porpiedad-de-objeto-mejorada.png
    4-1-porpiedad-de-objeto-mejorada-resultado.png

Function expression
*- function expression o Anonymous function (es5)
También se puede definir una función de JavaScript mediante una expresión. Una expresión de función se puede almacenar en una variable. La función anterior es en realidad una función anónima (una función sin nombre). Las funciones almacenadas en variables no necesitan nombres de función. Siempre se invocan (se llaman) utilizando el nombre de la variable.
Referencia
https://www.w3schools.com/js/js_function_definition.asp
4-2-anonymous-function.png
*- Function Arrow
Las arrow function, vienen a solucionar dos problemas: 1) sintaxis reducida y 2) Usan this no vinculable, hay que aclarar que las arrow function son funciones anónimas también.
Minuto de clase 2:27
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions
4-2-arrow-function.png
4-2-arrow-function-respuestas.png
*- Promesas
El objeto Promise (Promesa) es usado para computaciones asíncronas. Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca. las promesas viene a solucionar dos cosas en javascript uno es los call-back hell y agregar el asincronismo en javascript
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise
4-3-promesas.png

4-3-promesas-respuesta.png

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

Otra forma de las Arrow Functions es desglosar los atributos del objeto, así la sintaxis es mas amigable.
ejemplo.

var Alex = {
    nombre: 'Alex',
    apellido: 'Nieto',
    edad: 21,
    profesion: 'software engineer'
}
const MAYORIA_DE_EDAD = 18

// const esMayorDeEdad = function (persona) {
//     return persona.edad >= MAYORIA_DE_EDAD
// }

const esMayorDeEdad = ({ edad }) => MAYORIA_DE_EDAD

Este tema se trata a mayor profundidad en el curso de fundamento de js

la fin entiendo las promesas, muy buena la clase!

Genial

Si decean profunizar mas sobre las promesas en JS , les recomiendo

Mas lento please

MIS APUNTES DE LA CLASE

let name = 'andres';
let age = 32;

//es5

obj = {name: name, age: age}

//es6 

// En ves de hacer la asignacion completa solo indicamos la variable al objeto
// Y javascript hara la asignacion como si la estuvieramos haciendo
// Nos sirve cuando queremos establecer un objeto con varios elementos y
// no tendriamos que hacer la asignacion de cada cosa

obj2 = {name, age}

console.log(obj, obj2);

// Arrow Fuctions

const names = [

    {name: 'Oscar', age: 32},
    {name: 'Yesica', age:27}
]

// Funcion Normal 

let listOfNames= names.map(function(persona){

    console.log(persona.name)

})

// Arrow Function
let listOfNames2 =  names.map((item)=>{ console.log(item.name)})

// Otra forma en la que encontraremos Arrow Function
 
const listOfNames3 = (name, age, country) =>{


}

// Arrow function con un solo parametro no es necesario ()

const listOfNames4 = name => {}

// Otra forma de arrow function sin () ni {} y nos retorna su valor directamente

const square = num => num * num;


// Promesas para trabajar con asincronismo

// es5 callback

// es6 promesas pra reparar el problema con los callback hell

const helloPromise = () =>{

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

        if(true){

            resolve('Hey!!')

        }else{

            reject('Ups')
        }


    })

}

// Para ejecutar nuestra promesa

//invocamos la funcion que la retorna
helloPromise()
    //Concatenamos .then y esta funcion nos permite obtener el valor de la promesa
    //Obtenemos el valor atraves de una funcion que le pasamos por parametro
    .then(response => console.log(response))
    //Podremos encadenar varios .then para seguir obteniendo respuestas
    .then(response => console.log(response))
    //En el catch  saldra un error si las promesas no se resuelven
    .catch(error => console.log(error));

Excelente! no me había quedado muy claro el tema de promesas, explicación eficiente!

Para pasarle valores como parámetro al segundo .then() de la llamada a la promesa, puedes usar un return en el primer .then(), así:

APIcall()
	.then(response => {
		/* your code */
		return 'Hey!';				
	})
	.then(returnedFromThen1 => 	{
		console.log(returnedFromThen1);		/* Hey! */
	}) 
	.catch(error => {
		console.error(`Error, could not connect to the API; ${error}`);
	});

.
Por si algún día tienen problemas con el escope 😉

Este video explica muy bien las promesas e incluso va más a detalle en algunas de sus propiedades, solo que está en inglés. https://www.youtube.com/watch?v=DHvZLI7Db8E&t=456s

Grupo de whatsapp sobre la Escuela de Javascript y JS en general https://chat.whatsapp.com/LsR1Zt77zIV2bUw30fMQ3M

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.

Solo tengo una pregunta resolve y reject hacen prácticamente lo mismo? mas allá de que uno es para cuando la promesa funciona correctamente y el otro cuando no, en que se diferencian?

Siempre usen promesas para manejar su asincronismo, en serio, a mi me costó trabajo aceptarlos porque amaba los callbacks, pero las promesas son mejores en muchos sentidos jaja

quede muy perdida en esta clase 😕

var array = [1,2,3,4];
arrSquare = array.map( item => {
console.log(item);
return item+6
})
map debe devolver una lista y para eso en la arrow function debe haber un return, detalle a no olvidar.

Hola profe, tengo una duda que me parece ser muy tonta, pero ahi voy. Tengo un proyecto el día de hoy en .net y js. ¿como puede integrar estas nuevas funciones?, ¿Debo instalar algún plugin?

Hola tengo una pregunta, por qué al ejecutar el siguiente codigo me muestra primero el ‘OK’ y luego el ‘Si resolvio’ ? En qúe orden se ejecutan los .then() ?

const helloPromise = () => { return new Promise( (resolve, reject) => { if(true) resolve('Si se resolvio...'); else reject('No se resolvio'); } ) } helloPromise() .then(response => console.log(response)) .then(console.log('OK')) .catch(error => console.log(error)) ;

mia prote codigo comentado pero nose s se entienda

//asignar a objetos
let name = 'fernando';
let age  = '17';
//es5
obj = {name: name, age: age};
// es6
obj2 = {name, age};
console.log(obj2);

//arrows function
const names = [
    {nombre: 'fernando', edad: 17},
    {nombre: 'daniela', edad: 16}
] //arreglo con objetos dentro
//es5
let listOfNames = names.map(function (item) {
    console.log(item.nombre)
});
// es6
let listOfNames2 = names.map(item => console.log(item.nombre));
// tambien se puede
const listOfNames3 = (name, age, country) => {
    //codigo a ejecutar
}
// y cuando solo hay unparametro
const listOfNames4 = name => {
    //codigo a ejecutar
}
//otra
const square = num => num * num; //al parametro num se le multiplica por si mismo para dar el cuadrado

//********************* */ asincronismo con promesas*******************************************
//se le agregan lso parametror resolve si funciona y reject si rechaza
const helloPromise = () => {
    return new Promise((resolve, reject) => {   
        if (true){
            resolve('hey funcino');//si funciona
        }else{
            reject('ups :(');//recahazado
        }

    });
}
helloPromise()
.then(Response => console.log(Response))//si funciono
.then (() =>  console.log("hola"))//muestra esto si funciono
.catch (Error => console.log(Error));//muestra el error si rechazo```

muy interesante lo de las promesas, creo que es mas util que estar manejando tanto callback function

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

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


Alguien sabe por qué no me está corriendo el código?

osea que los callbacks ya no se usarían más?

Las promesas son super básico pues siempre estaremos haciendo llamados que podrían hacer que el código se rompa (si es que hay un error).
Las promesas nos ayudarán a evitarlo.

muy buen profesor! Arrow functions es tan importante para entender código actual en JS

muy interesante esto…

de gran utilidad, las habia utilizado antes pero aun no comprendia adecuadamente el concepto

Todo muy bien explicado. Se nota el buen manejo del tema, gracias

muy bueno para evocar 😉

Inlcuso esto puede ser mas simplificado con arrow functions para que las practiquen.

const hellowPromise = () => new Promise((resolve, reject) => {
    const validation = true;
	if(validation)
		resolve("Good!");
	else
		reject("Bad!")
});
hellowPromise()
.then(response => console.log(response))
.catch(error => console.log(error));

parametros de objetos en ES6
obj = {name, age}


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

La parte de las API me tiene emocionado!!

Propiedad de objeto mejorada

const name = 'Walter'
const age = 41
//es5
obj = { name: name, age: age }
//es6
obj2 = { name, age }

console.log(obj2)