Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

Clases, Módulos y Generadores

5/14
Recursos

Importaciones nombradas

Puedes importar uno o más objetos o valores utilizando el nombre que se le definió en el módulo y que se haya declarado con la palabra clave export. Ejemplo:

// module.js
export const myExport = "hola"

// index.js
import { myExport } from "module.js"

Importación predeterminada (default)

Cuando el módulo tiene una exportación predeterminada (default) omitimos el uso de llaves al momento de importar. Ejemplo:

// module.js
function myFunction() {...}

export default myFunction

// index.js
import myFunction from "module.js"

Para importar los dos tipos de exportaciones podemos separarlos por comas. Ejemplo:

// module.js
export const myExport = "hola"
function myFunction() {}

export default myFunction

// index.js
import myFunction, { myExport }

Aportes 311

Preguntas 70

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Veo un pequeño error en la parte de módulos, Óscar exportó el módulo usando un export default y lo importó como un export nombrado.

También quiero aclarar que si a algunos no les funciona tal vez sea porque es una sintaxis que no está aún soportada por las últimas versiones de Node y para ese caso tocaría usar la sintaxis antigua.

ES6

<h3>export default</h3>

Con export default podemos exportar una variable, o función por defecto de un archivo así:

function hello() {
	return 'Hello!'
}

export default hello

Para importarla no necesitamos hacerlo con su nombre, podemos usar cualquier nombre y por defecto nos traerá la única variable o función que exportó así:

import myHello from './module'

console.log(myHello())
<h3>export nombrado</h3>

A diferencia del export default en esta ocasión podemos exportar más de una variable o función que se encuentre en nuestro archivo, pero para importarlas debemos hacerlo con el nombre exacto de esa variable entre llaves.

Para exportar lo hacemos así:

export function hello() {
	return 'Hello!'
}

export const bye = 'Bye!'

Podemos importar solo lo que necesitemos así:

import { hello } from './module'

console.log(hello())

También podemos importar más de un elemento nombrando cada uno

import { hello, bye } from './module'

console.log(hello())
console.log(bye)

Podemos cambiarles los nombres

import { hello, bye as byeGreeting } from './module'

console.log(hello())
console.log(byeGreeting)

Y podemos importar todas las funciones de una sola vez

import * as allGreetings from './module'

console.log(allGreetings.hello())
console.log(allGreetings.bye)

Anterior sintaxis

Cuando no nos funcione esta sintaxis porque no la tengamos soportada podemos usar la anterior

Para exportar lo hacemos así:

function hello() {
	return 'Hello!'
}

module.exports = hello

Para importar así:

const hello = require('./module')

console.log(hello())

Con la sintaxis antigua también podemos exportar más de una variable o función pasándolas como un objeto.

Creo que la razón por la que no se corren los módulos adecuadamente es porque la extensión Code Runner usa nodejs para correr el código. Nodejs usa la sintaxis de CommonJS Module. Entonces, la exportación se podría hacer así:

module.exports = hello;

Y la importación, así:

const hello = require('./module');

Si quieren que en la consola se vea el “hello!”, recuerden:

console.log(hello());

Por lo que entiendo, para poder hacerlo con la sintaxis de ES6 Module (la que enseña Oscar), se necesitaría que la extensión usara Babel para transpilar el código. Acá parece haber una solución, mas no la he probado. A ver si alguien se anima y nos cuenta si pudo:

https://gist.github.com/adisuryadi/2b938415b0fb598ce837

Las funciones generadoras son realmente interesantes:

La funcion de fibonnaci con una funcion generadora:


function* fibonacci(){
  var fn1 = 1;
  var fn2 = 1;
  while (true){  
    var actual = fn2;
    fn2 = fn1;
    fn1 = fn1 + actual;
    var reset = yield actual;
    if (reset){
        fn1 = 1;
        fn2 = 1;
    }
  }
}

var secuencia = fibonacci();
console.log(secuencia.next().value);     // 1
console.log(secuencia.next().value);     // 1
console.log(secuencia.next().value);     // 2
console.log(secuencia.next().value);     // 3
console.log(secuencia.next().value);     // 5
console.log(secuencia.next().value);     // 8
console.log(secuencia.next().value);     // 13
console.log(secuencia.next(true).value); // 1
console.log(secuencia.next().value);     // 1
console.log(secuencia.next().value);     // 2
console.log(secuencia.next().value);     // 3

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Iterators_and_Generators

Mis Apuntes de la clase, si te sirven, puedes buscarlos todos ordenaditos en mi tw una vez acabes el curso @juanbocode

Paso a dejar mis aportes

Hay que tener en cuenta que al correr el programa en la terminal (como lo hace el profesor Oscar) y no en el browser, se está haciendo uso de Nodejs para ejecutar el código javaScript. Y como import de ES6 aún no es una sintaxis oficial en NodeJs, al tratar de correrlo nos arrojará un error del tipo: SyntaxError: Cannot use import statement outside a module.
Por lo que para exportar e importar módulos usando la terminal habría que hacer uso de la sintaxis vigente en Node:

para exportar

module.exports = hello;

para importar

const hello = require("./module");

Por ultimo, si se quiere forzar el uso de la sintaxis import en NodeJs hay que crear los archivos con extención .mjs, y para correrlos se debe desde la terminal ingresar al directorio del archivo y ejecutar el siguiente comando

node --experimental-modules index.mjs

Con esto le decimos a NodeJs que queremos trabajar con la versión experimental.

Por convención, una clase siempre debe empezar con una letra mayúscula.

En el minuto 4:30, sobre export e import, para todos los que se estén rompiendo la cabeza de porque no sale, aquí la explicación:

Primero que nada para que funcione, tendrías que que correr un servidor node, abrirlo desde un navegador no funcionará, en tu archivo html llamas a tu archivo js de la sgte manera <script src=“index.js” type=“module”></script> y bueno de hecho para que funcione al parecer necesitas usar webpack para que los transpile.

Hubiera sido bueno que lo recalquen en el curso, a mí también me dejó wdf?

cuando creó el modulo hizo un export default; por lo tanto la forma correcta de importarlo era sin las llaves.

import hello from './module'
/**
 * Classes
 */
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 Result -> ', calc.sum(2, 3));

/**
 * Modules
 */
import { hello } from './class4-module.js';
console.log('Hello Module -> ', hello());

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

  if (true) {
    yield 'World!';
  }
}
const generatorHello = helloWorld();
console.log('generatorHello first call -> ', generatorHello.next().value);
console.log('generatorHello second call -> ', generatorHello.next().value);
console.log('generatorHello third call -> ', generatorHello.next().value);

class4-module.js

const hello = () => {
  return 'Hello World!';
};

export default hello;

Super interesante el concepto de generadores, realemente no lo conocía. Dejo mi aporte sobre lo que diferencian a las funciones generadores de las normales:

  • Las ‘funciones normales’ presentan un comportamiento llamado ejecución hasta el final, lo que significa que una función que se ejecuta, se ejecuta continuamente (y no se puede interrumpir) hasta que la función deja de ejecutarse.
  • El propósito de las funciones generadoras (ó generadores) es implementar una función sin el comportamiento de ejecucion hasta el final, devolviendo un objeto iterador que mantiene el flujo de control. En cualquier momento, el generador se puede pausar y luego reanudar sin perder su contexto utilizando el método .next() que viene en el iterador.
    Nota: Detener un generador es tan fácil como poner un ‘return’ en algún lugar dentro. Una vez que regrese, estará listo. Si no incluye la devolución, seguirá retornando ‘undefined’ las llamadas .next() en caso de que se sigan invocando.

Imagen original: https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5

No me gusta el uso que le dió el profe a la clase, trataré de demostrar un uso un poco más útil.

Si quisieran agregar una función de multiplicar dos numero a la clase, se darían cuenta del siguiente problema.
Cada vez que tienen que invocar a la función sum o multiply, van a tener que pasar los números. Pero si estos los toman como parámetros del objeto creado, eso no haría falta, ya que los podríamos usar desde el propio objeto con la palabra this.

En coding seria esto:

class Calculator {
    constructor(a, b) {
        this.a = a
        this.b = b
    }

    sum() {
        return this.a + this.b
    }

    multiply() { 
        return this.a * this.b;
    }
}

const myCalculation = new Calculator(2,3);
console.log(myCalculation.sum());
console.log(myCalculation.multiply());

Espero les sirva!.

Me quedo la duda de que es un generador, lo busque en otro lado, acá les dejo la definición:
Funcion Generador: función que se puede pausar o detener para ser usada mas tarde
manteniendo el mismo contexto donde se le dejo anteriormente.

![](

A los que dicen que porque no explica que las clases son prototipos , ese es el problema de saltarte los cursos, si siguen la ruta de escuela de js, ahí explican claramente que las clases solo son una forma mas amigable de usar prototipos, y de echo enseñan a como funcionan los prototipos, no veo necesidad de que estén mencionando una y otra y otra vez, algo que ya se explico en un curso que antecede a este.

una anotación sobre la clase Calculator, debe iniciar en mayúsculas como buena practica para indicar que nos referimos a un Objeto.

Import y Export son importantes para los Frameworks

Exportación:

const hello=()=>{
    return 'hello'
}

module.exports=hello;

Importación

const hello = require('./module') 
 console.log(hello());

antes de ES6, hacer clases era horrible, ni hablar de herencia prototipal xD

Hola, tuve un “problema” al realizar: “import”, y “export”.
Le quité las llave a “hello”, y tampoco. Se las puse…me marca un error (sintaxis error). No me lee el módulo (exporto).

los GENERADORES son para iterar el codigo dentro de una function
tambien puedes iterarlos dentro un FOROF ejemplo

Aporte sobre Generadores.
Investigué un poco más y descubrí la propiedad done.

//GENERATORS
//Una funcion generadora puede ser detenida en medio de su ejecución y posteriormente retormarla desde el punto en que se detuvo
//También permiten devolver diferentes resultados, podemos obtener secuencias de resultados en vez de uno solo
//son declaradas mediante un * después de la palabra clave function
//devuelven un objeto sobre el que podemos invocar el método next()
//cada que invocamos next se genera un nuevo objeto con la estructura (value: Any, done: true|false)
//La propiedad value es el valor devuelto por la función, mientras que done indica si la función ha dado por concluida su ejecución
//yield es la forma de devolver valores dentro de una funcion generadora, de modo que al devolver un valor, la ejecución para hasta que next se vuelva a llamar

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)

La sintaxis que utiliza Óscar ya está desactualizada en Node.js

En module.js, en lugar de usar

export default hello

Utiliza

module.exports = hello

Y index.js en lugar de usar:

import { hello } from './module';
hello();

Utiliza

const hello = require('./module')
console.log(hello());

Así ya funcionaria,

Como apunte, decir que una función generadora puede tener diferentes yields, en el mismo bloque de código, y no devolverá esos valores hasta que vuelva a llamarse el valor next.

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

const generatorHello = helloWorld();

console.log(generatorHello.next().value); // 'Hello, '
console.log(generatorHello.next().value); // 'World'

El código de importación de módulos no funciona con run code porque es una sintaxis que no corre en node, y el run code corre en node

wow no conocia el metodo generator que interesante

¿Qué es ECMAScript 6?
ECMAScript 6 también se conoce como ES6 y ECMAScript 2015.

Algunas personas lo llaman JavaScript 6.

Este capítulo presentará algunas de las nuevas características en ES6.

  • JavaScript let
  • JavaScript const
  • Funciones de flecha de JavaScript
  • Clases de JavaScript
  • Valores de parámetros predeterminados
  • Array.find()
  • Array.findIndex()
  • Exponenciación ( **) (EcmaScript 2016)
    By: https://www.w3schools.com/js/js_es6.asp

generador de la sucesión Fibonacci

function* fibonacci(){
    let index = 0;
    var value1 = 0;
    var value2 = 1;
    var resultado = 0;
    yield 0;
    while(index < 1){
        resultado = value1 + value2;
        value1 = value2;
        value2 = resultado; 
        yield resultado;
    }
}
const fibo = fibonacci();
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);

me gustaria saber por que sucede el siguiente mensaje de error al declarar los modulos y ejecutarlos?

hello();
^

ReferenceError: hello is not defined
at Object.<anonymous> (c:\Users\juand\TODO DE PROGRAMACION\ecmascript\src\es6\tempCodeRunnerFile.js:1:1)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1167:10)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47

[Done] exited with code=1 in 0.086 seconds

ES6 includes the following new features:
arrows
classes
enhanced object literals
template strings
destructuring
default + rest + spread
let + const
iterators + for…of
generators
unicode
modules
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
promises
math + number + string + array + object APIs
binary and octal literals
reflect api
tail calls

¿CÓMO SOLUCIONO ESTE ERROR?

Uncaught SyntaxError: Cannot use import statement outside a module

Si tienes problemas al exportar importar prueba lo siguiente:

Alternativa de exportación:

// Usando export
export { hello };

// En tu archivo package.json agrega
"type": "module",

// Importa de manera que ...
import { hello } from './module.js';

// Y listo! :D
console.log(hello());

Es por esto que JS no me gusta, veo que a unos les funciona como Oscar lo puso y a otros no, yo soy del caso del que no me funciono tal como lo puso Oscar, asi que tuve que hacer lo siguiente:

1.- Forzosamente usar npm init
2.- Colocar los archivos de esta forma:
module.js:

const hello = () =>{
    return "Hello"
}

export default hello;

index.js

import hello from './module.js';

console.log(hello());

Si lo pongo como Oscar me manda estos errores:

Lo que puedo rescatar de este módulo (ES6) sobretodo para las personas que vienen del curso de Javascript Básico es lo siguiente:

  • Podemos dar valores por defectos a nuestros parámetros en nuestras funciones.
  • Debemos usar los ${variable/constante} para concatenar o mejor dicho agregar valores de variables en nuestro console.log .
  • Además de concatenar con para generar saltos de líneas (sólo lo hacemos con ENTER) en vez de usar \n.
  • Este operador nos permite agregar todos los elementos de un Array dentro de otro.
  • Al momentos de crear objetos podemos llamarlos usando la siguiente sintáxis:
let {propiedadesObjetos} = nombreObjeto;
console.log(propiedadDeclarada);
  • Podemos declarar de 3 formas distintas nuestras variables:
    • let => Crea variables que pueden ser accedidas de forma local.
    • var => Crea variables que pueden ser accedidas de forma global.
    • const => Crea constantes.
  • Crear funciones flechas (facilita la escritura y lectura de funciones):
    nombreVariable = parámetros => bloque de código;
const listOfNames = (name, age, country) => {
	//Bloque de código
};

Un saludos a [email protected] y éxito!!!

Habla a 3x

OMG, no es posible aplicar la POO a javascript, javascript es otro paradigma, aunque tengamos clases, realmente son un syntactic-sugar sobre las funciones constructoras, no pense escuchar esto del curso base de desarrollo web, aqui es donde surgen los problemas que he observado, de programadores tratando de aplicar Orientacion a Objetos a un lenguale que no es Orientado a Objetos, en fin.

Hey, como que Oscar no sabe enseñar bien, aqui lo entiendo perfectamente

Es buena la cantidad de información pero faltan más ejemplos para poderlo dejar más claro.

Para los que tengan problemas con importar el módulo, pueden agregar esta linea de código a su package.json:

  "type": "module",

A los que no les funciona utilizando export default hello es porque tienen que agregar en su package.json la propiedad “type”:“module”:


Aqui una observacion al profe, con el tema de los imports y exports
No lo probro.
Encima importo mal el modulo, lo declaro como default, y lo importo con llaves

Hizo cualquiera en la clase, la asignacion de los valores de los atributos de una clase se hace en el constructor no en un metodo de la clase.
Eso generaria confusion en los que no tengan mucha idea del tema.

Las funciones son un elemento clave en cualquier lenguaje de programación. Se emplean para realizar tareas específicas y pueden ser llamadas una y otra vez siempre que queramos.
La diferencia entre las funciones de Javascript y otros lenguajes de programación es que en Javascript las funciones son tratadas como “first-class objects”, es decir, se pueden asignar a variables, insertar en arrays y objetos y realizar cualquier otra operación que haríamos con los tipos base.

se ve que no quiso ejecutar la parte de import/ export por que sabia que no funcionaba en ese entorno.

Cuando tenemos varias funciones en un mismo modulo las podemos exportar de la sguiente manera como si fuera un objeto:

module.exports = {
    guardarDB,
    leerDB,
}

y luego llamandolos haciendo uso de la desestructuración de objetos:

const { 
    guardarDB,
    leerDB,
 } = require('./helpers/guardarArchivo');

Tambien podremos exponer una clase completa y utilizar los metodos instanciando la clase:

module.exports = Tarea;

Apuntes 😄

Fibonacci con generador:
https://stackoverflow.com/questions/9620586/what-is-function-in-javascript

function* fibonacci(){
let[prev, curr]= [0,1]
// aqui tambien se podria poner for(;😉 que repite infinitas veces
while(true){
[prev,curr]= [curr, prev + curr];
yield curr;
}
}
var gen = fibonacci();
//en el for pones que tan larga quieres que sea la sucesión
for (let index = 0; index < 8; index++) {
console.log( gen.next().value);
}

Y la version sin generador que yo hice:

[prev, current] = [0,1];
console.log(`${prev}
${current}`);
//en el for se pone eñ tamaño que quiero que tenga la sucesión
for (let index = 2; index < 10; index++) {
    console.log(prev + current);
    [prev,current]= [current,prev+current];
}

Me pareció muy interesante la forma de resolverlo con el generador 😃

me encanto los generadores y aquí encontré un poco mas sobre como utilizarlo: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Generador

Esta explicación esta bastante completa.

Generadores

concepto de Generators en Developer-mozilla

//clases
//programacion orientada a objetos

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

    multiplica(valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA * this.valueB
    }
}

const calc = new calculator();

console.log(calc.sum(2, 5));
console.log(calc.multiplica(2, 5));


//import y export
import { hello } from './module';

hello();

//generators

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

    if (true) {
        yield 'World';
    }
};

const generatorHello = helloWord();
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);

//este caso es muy utili para fibonacci

el profesor va muy rápido en cuanto a contenidos, no se la necesidad de meter tres temas por clase, no se aprecia bien los contenidos, encima su volumen de dicción es muy bajo.

Si estas haciendo este curso en 2022 seguramente vas a encontrar una “error” al momento de importar tus modulos. A mi me funciono de la siguiente manera.

Ejecute por consola node y el nombre del archivo donde importe el modulo. Sin embargo la manera que use tanto para exportar como para importar es diferente a la de la clase.

Este es el archivo de module.js :

Este el archivo donde importe el modulo anterior.

Y este seria el resultado final.

Espero a alguien le pueda ayudar.

Nada de lo que ví aquí lo veo claro, necesito ejemplos reales. Vi una suma con mucho código que no se para que lo hace de esa manera. Creo que no estoy viendo el panorama completo. Seguir investigando.

A mi me funciono con commonjs que es la forma de importar de node de la siguiente manera:
module.js:

const hello = () => {
  return 'hello!'
}

module.exports.hello = hello;

index.js:

//  code runer funcionc con nodejs 
const hello = require('./module.js')

console.log(hello.hello());
// o como es un string 
let holaAqui = hello.hello();
console.log(holaAqui);

Los generadores son una cosa loca de JavaScript jaja, recomiendo el curso profesional para entenderlos mejor

Y las clases, aunque ahora se usa lapalabra class, siguen siendo internamente clases prototipales, simplemente es un suggar syntax ^^

Comparto con ustedes un enlace que ayuda a clarificar por completo el tema de los modulos, CommonJs contra los ES Modules:

https://blog.logrocket.com/commonjs-vs-es-modules-node-js/

Resumen de ES6

// Antes de ES6
function newFunction(name, age, country) {
    var name = name || 'oscar';
    var age = age || 32;
    var country = country || 'MX';
    console.log(name, age, country);
  }
  
// con es6
function newFunction2(name = 'oscar', age = 32, country = "MX") {
    console.log(name, age, country);
  };
// dos formas de llamar a la funcion
newFunction2();
newFunction2('Ricardo', '23', 'CO');

// concatenar antes de ES6
let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);
//Concatenar con ES6 con templates ${}
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

// salto de linea previo a es6
let lorem = "Qui consequatur. Commodi. Ipsum vel duis yet minima \n"
+ "otra frase epica que necesitamos."
  
// salto de linea con es6
let lorem2 = `otra frase epica que necesitamos
ahora es otra frase epica`;
  
console.log(lorem);
console.log(lorem2);



// Elementos de un objeto
let person = {
'name': 'oscar',
'age': 32,
'country': 'MX'
}
// llamar los elementos del objeto sin es6 
console.log(person.name, person.age);
// con es6 
let { name } = person;
console.log(name);


  
let team1 = ['Oscar', 'Julian', 'Ricardo'];
let team2 = ['Valeria', 'Yesica', 'Camila'];
// Se utiliza el ...team# para llamar a la funcion sin tener que escribir todo 
let education = ['David', ...team1, ...team2];
  
console.log(education);
 // la diferencia entre var y let, radica en que var sirve de forma globla y let solo puede ser llamado de forma local 
{
var globalVar = "Global Var";
}
  
{
let globalLet = 'Global Let';
console.log(globalLet);
}
  
console.log(globalVar);
  
const a = 'b';
a = 'a';
console.log(a);


// asignar valores de objetos
let name = 'oscar';
let age = 32;

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


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

//es5
let listOfNames = names.map(function (item) {
  console.log(item.name);
})
//es6
let listOfNames2 = names.map(item => console.log(item.name));
// arrow function con const
const listOfNames3 = (name, age, country) => {
  ... 
}
// lo mismo pero sin pasar tantos elementos
const listOfNames4 = name => {
  ...
}
// Transformando un valor a una de una misma variable
const square = num => num * num;


//Promesas con arrows
const helloPromise = () => {
    //resolve y reject para ver si se resuelve o se rechaza
  return new Promise((resolve, reject) => {
    if (true) {
      resolve('Hey!');
    } else {
      reject('Ups!!');
    }
  });
}
// ejecucion de la promesa
helloPromise()
// then se utiliza para obtener una respuesta
  .then(response => console.log(response))
  // catch para obtener el error y mostrarlo en consola 
  .catch(error => console.log(error));


// Clases 
class calculator {
 //Creacion del constructor con los elementos
    constructor() {
    this.valueA = 0;
    this.valueB = 0;
  }
  // Metodo el cual recibe los valores del constructro y hacer que se sumen al final
  sum(valueA, valueB) {
    this.valueA = valueA;
    this.valueB = valueB;
    return this.valueA + this.valueB;
  }
}

// se utiliza const para crear la funcion calc la cual se basa en lo construido en calculator
const calc = new calculator();
//calc.sum() recibe dos valores
console.log(calc.sum(2, 2));


// Import se utilizar para importar elementos de otras clases
//***Esta es la clase***
//  const hello = () => {
//      return 'hello!'
//}
// *** con export se exporta la funcion***
//export default hello;
import { hello } from './module';

//Imprime la funcion hello que fue importada
hello();


//Generators
function* helloWorld() {
  if (true) {
      //yield se encarga de guardar el valor que se va a retornar, es diferente a return
    yield 'Hello, ';
  }
  if (true) {
    yield 'World';
  }
};
// Se debe crear un const para imprimir la funcion 
const generatorHello = helloWorld();
//Esto es para retornar el primer yield
console.log(generatorHello.next().value);
//Esto retorna el segundo yield
console.log(generatorHello.next().value);
//Retorna undefined por que ya no hay nada mas que mostrar en la funcion
console.log(generatorHello.next().value);

A este punto entiendo porque se divide todo por módulos, simplemente wow cuanto contenido, es abrumador la cantidad de cosas que desconocía

Uy !! el generator jamás lo había escuchado, esta cool 😄

Hola a todos, a continuación dejo mis apuntes de clases como aporte:

class calculadora {
    //Metodo constructor para inicializar la clase
    constructor() {
        this.a = 0;
        this.b = 0;
    }

    sumar( a, b ) {
        this.a = a;
        this.b = b;
        return this.a + this.b;
    }
}

//Se crea un objeto de la clase calculadora
const calculator = new calculadora();

//Se hace uso del objeto y su metodo sumar.
console.log(calculator.sumar(4,5));

En los modulos me dio error, lo solvente colocandolo asi

module.js

const hello = () => 'hello';

module.exports = hello;

codigo

const hello = require('./module')
console.log(hello());

Así fue como me funcionó

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

Calcular dígitos de PI usando generadores en Javascript:
https://stackoverflow.com/questions/30747235/javascript-pi-π-calculator

yield nos permite simular el comportamiento del patrón de diseño de software Iterator

HAGO UNA CONSULTA:
Viendo la DOCU de MOZILA se ve info acerca del soporte que hay para GENERADORES.
Ahí dice que no tiene soporte para Android.
PIC

¿Esto significa que en REACT-NATIVE no funciona? ¿O, por el contrario, el bridge de react-native lo compila y se lo pasa a Android sin problemas?

A mi me funciono asi el import

En package.json

"type": "module"

En index.js

import hello from './module.js';

console.log(hello());

Tuve un inconveniente en la parte de Módulos y realice el siguiente proceso para solucionarlo:

En el archivo package.json agregue la línea de “type”: “module”, el archivo quedo como el siguiente:

{
  "name": "ecmascript",
  "version": "1.0.0",
  "description": "entendiendo ecmascript",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

El código del archivo module.js es el mismo:

const hello = () =>{
    return 'Hello'
}

export default hello

El código de la importación retire las "{ } ", y funciono:

import hello from './module.js'; 
console.log(hello());

Espero les sirva, Saludos.

  1. Clases, Módulos y Generadores
    *- Declaración de clases
    La introducción de la sintaxis de class permite una sintaxis más amigable para manejar la orientación a objetos. Se debe recordar que javascript es un lenguaje orientado a prototipos a pesar de que se usa la sentencia class y extends para la herencia por debajo se maneja prototipos (prototype) en javascript e incluso permite realizar una herencia más fácil con la sintaxis extends. Se debe recordar que por debajo de la sentencia class se manejan prototipos.

*- Módulos en JavaScript
Los módulos sirve para separar lógica de programación entre diferentes archivos.js o archivos.mjs y luego importar o exportar según sea el caso
minuto 4:13
Forma de importar/exportar en JavaScript en es5
Es importante que en packge.json no exista el type :module



*- Forma de importar y exportar es6
Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import

En la función generadora, no se especifica algo muy importante que es la palabra reservada YIELD, es simplemente un pause, como pausar la función y guarda el estado de las variables hasta el yield, por eso cuando volvemos a llamar el next() de la función generadora continua a partir del YIELD.

Dejo un ejemplo de un CountDown, para mayor entendimiento.

function* countDown(startCount) {
  let countStub = startCount;
  while (countStub > 0) {
    yield countStub;
    countStub--;
  }
}

const iterator = countDown(100);

console.log(iterator.next().value);
// expected output: 100

console.log(iterator.next().value);
// expected output: 99

console.log(iterator.next().value);
// expected output: 98
// Clase 5: Clases, Módulos y Generadores

// Clases

// Con las clases vamos a tener una forma más clara para manejar 
// objetos así como la herencia dentro de javascript y con esto 
// podemos aplicar la programación orientada a objetos dentro de 
// javascript

// para declarar una clase debemos hacerlo con la palabra class 
// seguida del nombre y llaves ademas debemos declarar un 
// constructor que es donde inicializamos todas la variables que van 
// a estar disponibles de manera global en nuestra clase 
// (scope global), ademas podemos declarar métodos que se donde 
// pondremos la lógica de nuestra clase

class Calculator {
  constructor() {
    this.valueA = 0;
    this.valueB = 0;
  }

  sum(valueA, valueB) {
    this.valueA = valueA;
    this.valueB = valueB;
    return this.valueA + this.valueB;
  }
}

// para utilizar nuestra clase asignamos una nueva instancia en una 
// constante con la palabra new y el nombre de nuestra clase y ya 
// con esto podemos acceder a los métodos de la clase

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

// Módulos

// una de las características importantes de em6 es import y el export 
// y así poder separar la lógica de nuestras aplicaciones en varias 
//partes o en diferentes archivos

// creamos un nuevo archivo (module.js) donde colocamos la lógica 
// de nuestra aplicación que queremos separar del módulo principal 
// (index.js) y en el nuevo archivo declaramos una constante con una
// arrow function que nos devuelva un valor, luego se exporta la 
// constante que declaramos anteriormente y así la podremos 
// importar en el módulo principal de la aplicación

import hello from "./module.js";

console.log(hello());

// Generadores

// generators en una clase especial que crea una serie de valores 
// según el algoritmo definido y cada elemento va a ser ejecutado 
// cuando sea llamado el siguiente valor de la función, la palabra 
// reservada yield va a ir guardando internamente donde se quedo la 
// ejecución para saber que elemento ejecutar

function* helloWorld(params) {
  if (true) {
    yield "Hello, ";
  }
  if (true) {
    yield "world";
  }
}

// para llamar a nuestra función declaramos una constante

const generatorHello = helloWorld();

// una vez declarada podemos ejecutar el valor next que es el que va 
// a ir ejecutando los bloques de código de nuestra función y para 
// obtener el valor de lo que está retornando utilizamos value,
// si los llamados con next sobrepasan los bloques declarados nos 
// devuelve undefined

console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);

me encanta cuando dice ‘y’

Yo solucioné la exportación modificando un poco el cómo lo hizo Oscar

package.json
En el package.json agregué la key-value "type": "module" (tiene que ir al principio)

index.js

module.js

si no te funciona el modulo prueba lo siguiente en el arcchivo del html en el scrip pon el atributo type="module"

y el import pon el nombre completo ejemplo

En el code runner arroja error al correr el import por node. De todas formas cuando hacemos apps en React Native se utiliza la misma sintaxis que el profesor enseñó y funciona correctamente.

Gracias Oscar, Excelentes conocimientos voy adquiriendo en este curso 😄

Esta muy bien la explicación pero creo que una clase siempre debe empezar con mayuscula en POO 😉

En esta clase se menciona pero considero que escaso,
En esta clase del curso profesional de js se puede entender mucho mejor este concepto y lo útil que puede ser.

//export
const hello = () => {
    console.log('hello')
};

export default hello ; 
//import
import  hello  from './modulo';
hello()


me sale este error:

(node:5456) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
/home/walter2/ecmascript/src/es6/tempCodeRunnerFile.js:1
import hello from ‘./modulo’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1039:16)
at Module._compile (internal/modules/cjs/loader.js:1087:27)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1143:10)
at Module.load (internal/modules/cjs/loader.js:972:32)
at Function.Module._load (internal/modules/cjs/loader.js:872:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47

Hola a todos!
Para los que han tenido problemas al ejecutar el código con el plugin the Code Runner en Visual Studio Code les dejo acá una solución que encontré:

  1. Instalen el módulo esm con npm
npm i -D esm
  1. Creen una carpeta en la raíz de su proyecto que se llame .vscode. Dentro de esa carpeta crean un archivo que se llame settings.json y colocan lo siguiente:
{
    "code-runner.executorMap": {
        "javascript": "node -r esm $fullFileName",
    }
}
  1. Ejecutan su código normalmente y obtendrán el resultado:
[Running] node -r esm "/home/chepix10/platzi/ecmascript6/src/es6/tempCodeRunnerFile.js"
hello!

[Done] exited with code=0 in 0.308 seconds

Espero que les sirva.
Saludos desde Guatemala!

Clases

class calculador {
  constructor () {
    this.valorA = 0;
    this.valorB = 0;
  }

  suma(valorA, valorB){
    return valorA + valorB;
  }
}

const calcula = new calculador();
console.log(calcula.suma(10,30));

Dejo un recurso que servirá para entender más a profundidad sobre los módulos. Es bastante sencillo y entendible, echenle un ojo!

https://www.samanthaming.com/tidbits/79-module-cheatsheet/

Aquí ya me estanqué. Tendré que ir a estudiar Fundamentos de Javascript para aprender sobre CLASES y todo lo demás

//se puede trabajar con un modulos para tener lógica separada 
//del hilo principal o de mi app principal
//Export se utiliza para poder utilizar mi función** separada** dentro de mi hilo principal:
const hello = () => 'hello’
export default hello;

//Import para utilizar el arrow function de hello en nuestro hilo principal:

import {hello} from '/.module';
hello();```

excelentes caracteristicas de ES6

Abro debate.

¿Se debe teminar las sentencias con punto y coma?

Observé que solo se puede hacer un export default dentro de un módulo, a diferencia del export que si puedes aplicarlo a cualquier elemento cuantos quieras.

La forma correcta de importar el export default es sin las llaves.

export default const hello = () =>'hello'
import hello from'./module'

La importación para solo el export es con las llaves.

export const hello = () =>'hello'
import { hello } from'./module'```

Código de clase calculadora

class calculator{
    constructor(){
        this.valueA=0;
        this.valueB=0;
    }
    sum(valueA, valueB, operador){
        this.valueA=valueA;
        this.valueB=valueB;
        let result;
        switch (operador){
            case '+':
                result = this.valueA + this.valueB;
                break;
            case '-':
                result = this.valueA - this.valueB;
                break;
            case '/':
                result = this.valueA / this.valueB;
                break;
            case '*':
                result = this.valueA * this.valueB;
                break;
            default:
                result = "Esa operacion no esta permitida";
        }
        return result;
    }
}
const calc = new calculator();
console.log(calc.sum(6, 2, 'ñ'));

En fundamentos de JS hablaban de que no es una clase sino un prototipo. Sin embargo, en el curso de POO sí lo mencionan como clases.

Las clases se manejan con un constructor que nos permiten asignaciones globales, pero permiten tener acceso a las funciones desde otras funciones. Se pueden generar métodos que usen las variables que se establecen en el Constructor.

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()
let sum = calc.sum(1,2)
console.log(sum)

La forma de manejar módulos entre archivos se hace de la siguiente manera:

Dónde hello es una función en el documento module.js

const hello = () => {
  return 'Hello! Imma module'
}

export default hello

. . .

import {hello} from './module'

let helloFromModule = hello()
console.log(helloFromModule)

Los generator te permiten establecer funciones que a causa de un condicional (para este ejemplo) decide qué valor retorna si cada condición se cumple . Si no hay algo por default para devolver, retorna un Undefined. Mira la seria de Fibonacci para entender mejor

function* helloWorld() {
  if ( 1 == '1') {
    yield 'Hello World!!'
  }

  if ( 2 == '2') {
    yield 'Imma Big World'
  }
}

const genHello = helloWorld()
console.log(genHello.next().value)
console.log(genHello.next().value)
console.log(genHello.next().value)
console.log(genHello.next().value)

Al ejecutar el import existe un error SyntaxError: Cannot use import statement outside a module Se resuelve en el módulo usando: module.exports = hello Y en lugar del import usar: const hello = require('./module')

Punteros en JS :p

¿Alguien sabe como se llama el tema que el profesor esta usando en visual studio para que el código salga en neon?

Hola a todos, tengo una pregunta, me podrían decir en que casos se pueden usar los generators, entendí el concepto pero no sé en que casos aplicarlo.

Estoy aprendiendo a programar y tengo una noción de lo que es una librería.
¿Qué diferencia existe entre modulo y libreria?

Que tan usados son los generator?

Dejo un ejemplo de un generador para la serie fibonacci y su uso

function* fibonacci() {
    let a = 1;
    let b = 1
    yield a;
    yield b;
    while (true) {
        b_ = b;
        b = a + b
        a = b_;
        yield b
    }
}
let fib = fibonacci();
for (let i = 0; i < 10; i++) {
    console.log(fib.next().value);
}

Excelente

//clases

class calculator {
    constructor(){
        this.valueA = 0;
        this.valueB = 0;
    }
    sum(valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA + this.valueB;
    }
    res(valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA - this.valueB;
    }
    mul(valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA * this.valueB;
    }
    div(valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA / this.valueB;
    }
}

const calc = new calculator();
console.log(calc.sum(6,18));
console.log(calc.res(6,18));
console.log(calc.mul(6,18));
console.log(calc.div(18,5));


Creo estos cursos especializados podrían ir después del curso profesional de JavaScript, replantearse el orden de los módulos si estas llevando la escuela.