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 : 56M : 48S

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

Clases, Módulos y Generadores

5/11

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

Paso a dejar mis aportes clase5.pngclase52.png

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.

Mis Apuntes de la clase, si te sirven, puedes buscarlos todos ordenaditos en mi tw una vez acabes el curso @juanbocode
screencapture-notion-so-Clases-M-dulos-y-Generadores-806c5675d4a14036a3b951d66a743056-2020-07-20-00_32_47.png

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;

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?

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

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.

![](generator.png

Exportación:

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

module.exports=hello;

Importación

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

Import y Export son importantes para los Frameworks

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

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:

Funciones Comunes.jpg
  • 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

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.

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

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

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

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

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

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

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)

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

¿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

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.

2020-05-05_12h25_47.png

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

Apuntes 😄

Clase 5.png

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.

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 😃

  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.
    5-1-clases.png

*- 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
5-2-es5-configuración-del-package.png
5-2-es5-exportar-modulos.png
5-2-es5-importar-modulos.png
*- 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
5-2-es6-exportar-modulos.png
5-2-es6-importar-modulos.png

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)

package.png

index.js

index.png

module.js

module.png

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 😉

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.

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:
Captura de pantalla de 2020-04-28 09-33-54.png
(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

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.

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

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

excelentes caracteristicas de ES6

Abro debate.

¿Se debe teminar las sentencias con punto y coma?

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

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

Habla a 3x

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.

Implementación: generador de la secuencia de Fibonacci.

/* fibonacci generator */
function * fibonacci() {
    var a = 0, b = 1, c;
    yield 0;
    while (true){
        c = a + b;
        a = b;
        b = c;
        yield c;
    }
}
const fibonacciGenerator = fibonacci();
console.log(fibonacciGenerator.next().value); //0
console.log(fibonacciGenerator.next().value); //1
console.log(fibonacciGenerator.next().value); //2
console.log(fibonacciGenerator.next().value); //3
console.log(fibonacciGenerator.next().value); //5
console.log(fibonacciGenerator.next().value); //8

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

Llevo casi dos años trabajando js y este curso me ha eseñado cosas que ni sabía, es simplemente espectacular!

apuntes 😄

Clase 4.png

-Clases
Utilizamos las palabras reservadas class y constructor;
por cierto, se les llama reservadas puesto que no se pueden
utilizar para nombrar otras variables por ejemplo:

let class = 'hola' //Incorrecto.
const constructor = 3 //Incorrecto
class calculator {
   constructor() {
   this.valueA = 0
   this.valueB = 0
 }
 sum(valueA , valueB) {
   this.valueA = valueA
   this.valueA = valueA
   return this.valueA + this.valueB
 }
}

const calc = new calculator() //Instancia de la clase
console.log(calc.sum(2, 2)) //(objeto.método(parámetros))

-Generator
Retorna una serie de valores según el algoritmo definido

hello()

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

const generatorHello = helloWorld()
console.log(generatorHello.next().value)//Devuelve Hello
console.log(generatorHello.next().value)//Devuelve World
console.log(generatorHello.next().value)//Devuelve undefined
// CLASES 

class calculator {
    //metodo para inicializar nuestra clase
    constructor() {
        // aqui vamos a asignar las variables que estaran disponibles en un scope global
        this.valueA = 0;
        this.valueB = 0; 
    }

    //metodo 
    sum (valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;

        return this.valueA + this.valueB;
    }
}

// aqui lo llamamos
const calc = new calculator ();

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


// ES6 tambien trajo los MODULOS 
// IR AL ARCHIVO MODULES.JS

module.js

// en este archivo voy a tener logica separada de mi archivo principal

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

// de esta forma se exporta el modulo para llamarlo donde lo necesite
export default hello; 
//importando...
import { hello } from './module';



// GENERATORS TAMBIEN SE ANADIO EN ES6
// Es una funcion especial que retorna una serie de valores segun el algoritmo definido 
function* helloWorld() {
    if (true) {
        yield 'Hello, ';
    }

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

// llamar a la funcion 
const generatorHello = helloWorld() ;
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
C5.png
//Clases

class Datos {
    constructor() {

    }
    usuario(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;

        console.log(`Hola ${this.nombre}, tu edad es de: ${this.edad}`);
    }
}
const resultado = new Datos();
resultado.usuario("Victor", 17);

//Generadores

en mi caso era necesario añadir en el package.json (type:“module”)

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

Asi lo implemente con la clase a ver que tal quedaba, que opinan ?

const hello =  () => {
    return "hello world";
}

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

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

}
module.exports =  {hello,Calculator};

asi lo llame el module

const {hello, Calculator} = require('./module');
console.log(hello());
const calculadora = new Calculator();
console.log(calculadora.sum(2,2));

Hasta hoy me enteré de la existencia de los generadores, súper!

Leyendo varios comentarios, noto que hay una confusión respecto al import y el require. Desde la versión 13 de node, se implementó nativamente el uso de import. Sin embargo, el archivo debe tener una extensión .mjs o en el package.json se debe agregar la propiedad “type” con un valor igual a “module”.
ECMAScript modules

Las clases son una forma en que podemos manejar una sintaxis mas clara para manejar objeto y la herencia y nos permite aplicar la programacion orientada objetos en JS.

Primero necesitamos definir la palabra reservada “class” y nuestro nombre, dentro ira el constructor, en el que asignaremos las variables que estaran en nuestro Scope Global. Usamos la palabra “this” despues de un punto utilizaremos el nombre de nuestra variable y las inicializamos a 0.

Tambien podemos dentro de la clase asignar los metodos al que le podemos asignar parametros. Esto se puede ver asi:

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

Para poder utilizar o instanciar esta clase que ya creamos y utilizar sus metodos, necesitamos hacer:

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

De esta forma se crean los objetos y ya podemos trabajar con ellos y con la herencia.

Otra caracteristica que se han agregado es el trabajar con modulos, o el import o el export. Donde en otro archivo podriamos crear otro metodo de esta forma: (archivo module.js):

const hello = () => { return 'hello!' };
module.exports = hello;

Y para poder exportarlo usamos en nuestro index:

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

Otro punto interesante que se agrrego en Es6 es Generator o generadores. Es una funcion especial que retorna una especie de valores segun un algoritmo definido. Necesitamos una funcion que sintaxis es:

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

Para poder ejecutarla de forma que se vayan corriendo los pasos, podemos usar:

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

que nos permitira con next poder ejecutar la primer logica y obtener ese valor y cuando volvamos a ejecutar el siguiente valor next, recordara en que parte se quedo y mostrara el segundo valor y asi en cada paso que le agregamos.

Compañeros, ya pude correr los módulos con la forma presentada por el profesor. Lo que se tiene que hacer es lo siguiente (se debe estar en el home de tu espacio de trabajo, la “~” en linux):

  1. ~$ npm --version
    3.5.2 //checar nuestra versión actual de npm
  2. ~$ sudo npm install -g [email protected] //instalar la más reciente
  3. ~$ npm -v
    6.13.6 //confirmar la actualización
  4. ~$ sudo npm cache clean -f //Borrar el caché
  5. ~$ sudo npm install -g n //buscar e instalar la última versión de nodejs
  6. ~$ sudo n stable //establecer la versión actual más estable

Fuente de dónde lo saqué

Me funcionó los modulos de javascript, esto fue lo que hice para que me funcionará…
Mi entorno de trabajo es pop os 20.04, esta distribución de linux está basada en ubuntu 20.04, cabe destacar que debería funcionar para Window 10 con WSL, yo tenía la versión 12 de node.js y no me funcionó con es versión, esta versión fue la instalé en los prework de los cursos.

Descripción general de la solución:

  1. Desinstalé la versión node.js
  2. Instalación node.js en su versión más actual y que se LTS
  3. Configuración del proyecto y el archivo.json

Todos los pasos los ejecuto en la terminal

Paso a paso de la solución antes descrita

  1. Desinstalé la versión node.js

*- Eliminé node.js, ya que tenía la versión v12 y lo hice haciendo los siguientes pasos:

Desinstale node con el siguiente comando:

	sudo apt-get purge --auto-remove nodejs

Elimine los directorios node o node_modules de / usr / local / lib con la ayuda del siguiente comando:

	sudo rm -rf /usr/local/lib/node*

Elimine los directorios node o node_modules de / usr / local / include con la ayuda del siguiente comando:

	sudo rm -rf /usr/local/include/node*

Elimine cualquier archivo de nodo o directorio de / usr / local / bin con la ayuda del siguiente comando:

	sudo rm -rf /usr/local/bin/node

Por último como indica el tutorial verifique paso a paso eliminando cada una de estas carpetas, puede ocurrir el caso de que no existe alguna carpeta a eliminar

sudo rm -rf /usr/local/bin/npm 

sudo rm -rf /usr/local/share/man/man1/node*

sudo rm -rf /usr/local/lib/dtrace/node.d  ~/.npm

sudo rm -rf ~/.node-gyp /opt/local/bin/node

sudo rm -rf opt/local/include/node

sudo rm -rf /opt/local/lib/node_modules
  1. Instalación node.js en su versión más actual y que sea LTS

Realicé la instalación de node a la última versión

2.1 Primero, verifique si tenía las librerías esenciales instaladas, ejecutando los siguientes comando en mi caso yo las tenías, pero lo coloco por si alguno no las tienes:

sudo apt install build-essential && sudo apt-get update

sudo apt-get install gcc g++ make && sudo apt-get update


sudo apt update && sudo apt upgrade && sudo apt install curl

2.2 Segundo instalé node en la versión 14 ejecutando el siguiente comando curl -sL

http://deb.nodesource.com/setup_14.x | sudo -E bash - 
sudo apt-get install -y nodejs

sudo apt-get update

2.3 Tercero reiniciar la computadora

2.4 Cuarto luego realice la actualización de npm con la siguiente instrucción

sudo npm install -g npm
  1. Configuración del proyecto y el archivo.json
    Por último configuré el proyecto siguiendo los siguientes pasos, cabe aclarar que los pasos que seguí fueron los que el profesor indico al principio, es decir.

NOTA: Si tienes la capeta del proyecto puedes saltarte el paso 3.1 ve directamente al 3.2

3.1 Abrir terminal y crear la carpeta del proyecto si tienes ya la carpeta creada salta este paso

mkdir  proyecto

cd proyecto

3.2 Iniciar proyecto con node con el comando, seguir las mismas instrucciones que el profesor mostró puedo utilizar “npm init -y” para no contestar ninguna pregunta. Pero aconsejable seguir lo que el profesor dice

npm init

3.3 Luego en el package en la primera sección del código agregue la instrucción

    "type": "module",
5-2-es6-configuración-del-json.png

NOTA importante los módulos pueden tener extensión .js o .mj pero creo que es buena práctica tenerlo .mj para saber que esos archivos sólo son módulos con lógica…

Por cierto quiero aclarar que si te funciono dale un linke para que los demas lo vean y coméntame si te funcionó…

Otra cosa más , no te desanimes

Tú eres absolutamente genial y único o única 🥺 tus logros no definen lo especial que eres. Lo define el hecho y la verdad absoluta que no hay dos personas como tú y eso te hace maravillosamente genial y especial. Dios te ama ❤️ y búscalo 😃 Juan 1:12

Por si les sale error de que no pueden importar su modulo, solo agreguen esto:

"type": "module",

en su archivo de package,json y así ya les debe de correr sin problemas

//CLASES
class calculator {
    constructor() {
        this.valueA = 0;
        this.valueB = 0;
    }

    sum(valueA, valueB) { //Método de suma
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA + this.valueB;
    }
}

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

//MODULOS Import y Export 
import { hello } from './module';

hello(); //De esta forma yo puedo traer esa logica que acabo de separar en modulos. Esto se usa para una logica para hacer una peticion especifica o alguna operacion matematica

//GENERATORS es una funcion especial que retorna una serie de valore segun el algoritmo requerido.

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

const generatorHello = helloWorld();
console.log(generatorHello.next().value); //Hello,
console.log(generatorHello.next().value);//World
console.log(generatorHello.next().value); //undefined

//Uno de los generadores más aplicados es el de Fibonacci. 

Por si quedan dudas acerca de los generadores encontré este video donde explican con caso practico como el scroll infinito en las paginas web.
https://www.youtube.com/watch?v=zmvUvRyAi0A

Esto aplica si solo estamos usando node? lo hice en un ambiente con dos javascripts y no me dejo. Me salio el error: cannot use import statement outside a module

Módulos

⠀⠀⠀⠀⠀⠀⠀⠀
Si como la mayoria y yo tuviste problemas para importar y exportar, tal vez lo siguiente te pueda ayudar.
⠀⠀⠀⠀⠀⠀⠀⠀
Si estás trabajando con un documento HTML para testear tu código.
⠀⠀⠀⠀⠀⠀⠀⠀
Debes agregar a tu <script> lo siguiente:

<script type="module" src="./script.js"></script>

De esta manera, trabajando con el navegador y definiendo el type ya no tendrias problemas con el código.
⠀⠀⠀⠀⠀⠀⠀⠀

Export

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

let persona = "ivan";

export {hello, persona};

Import

import { hello, persona } from './module.js';

console.log(hello());
console.log(persona);

⠀⠀⠀⠀⠀⠀⠀⠀
Si estás corriendo tu código dentro de VS Code entonces crearas un archivo llamado package.json dentro de tu carpeta actual.
⠀⠀⠀⠀⠀⠀⠀⠀
2021-02-12_13h32_11.png
⠀⠀⠀⠀⠀⠀⠀⠀
Y dentro definirás el siguiente código:

{
    "type" : "module"
}

De esta manera ya no tendrías problemas para importar/exportar tu código dentro de VS Code.

Una buena practica es siempre poner el nombre de la clase en Capitalize, con la primer letra en mayuscula.

Acerca de los generadores e iteradores encontré este link muy interesante.
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Iterators_and_Generators

Al ejecutar el condigo en VSC utilizando el complemento Code Runner a mi me daba error.
Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
Lo solucione agregando “type”: “module” en el modulo package.json 😋

Export:

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

Import:

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

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

Paso a dejar mis aportes clase5.pngclase52.png

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.

Mis Apuntes de la clase, si te sirven, puedes buscarlos todos ordenaditos en mi tw una vez acabes el curso @juanbocode
screencapture-notion-so-Clases-M-dulos-y-Generadores-806c5675d4a14036a3b951d66a743056-2020-07-20-00_32_47.png

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;

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?

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

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.

![](generator.png

Exportación:

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

module.exports=hello;

Importación

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

Import y Export son importantes para los Frameworks

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

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:

Funciones Comunes.jpg
  • 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

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.

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

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

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

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

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

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

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)

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

¿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

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.

2020-05-05_12h25_47.png

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

Apuntes 😄

Clase 5.png

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.

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 😃

  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.
    5-1-clases.png

*- 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
5-2-es5-configuración-del-package.png
5-2-es5-exportar-modulos.png
5-2-es5-importar-modulos.png
*- 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
5-2-es6-exportar-modulos.png
5-2-es6-importar-modulos.png

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)

package.png

index.js

index.png

module.js

module.png

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 😉

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.

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:
Captura de pantalla de 2020-04-28 09-33-54.png
(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

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.

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

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

excelentes caracteristicas de ES6

Abro debate.

¿Se debe teminar las sentencias con punto y coma?

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

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

Habla a 3x

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.

Implementación: generador de la secuencia de Fibonacci.

/* fibonacci generator */
function * fibonacci() {
    var a = 0, b = 1, c;
    yield 0;
    while (true){
        c = a + b;
        a = b;
        b = c;
        yield c;
    }
}
const fibonacciGenerator = fibonacci();
console.log(fibonacciGenerator.next().value); //0
console.log(fibonacciGenerator.next().value); //1
console.log(fibonacciGenerator.next().value); //2
console.log(fibonacciGenerator.next().value); //3
console.log(fibonacciGenerator.next().value); //5
console.log(fibonacciGenerator.next().value); //8

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

Llevo casi dos años trabajando js y este curso me ha eseñado cosas que ni sabía, es simplemente espectacular!

apuntes 😄

Clase 4.png

-Clases
Utilizamos las palabras reservadas class y constructor;
por cierto, se les llama reservadas puesto que no se pueden
utilizar para nombrar otras variables por ejemplo:

let class = 'hola' //Incorrecto.
const constructor = 3 //Incorrecto
class calculator {
   constructor() {
   this.valueA = 0
   this.valueB = 0
 }
 sum(valueA , valueB) {
   this.valueA = valueA
   this.valueA = valueA
   return this.valueA + this.valueB
 }
}

const calc = new calculator() //Instancia de la clase
console.log(calc.sum(2, 2)) //(objeto.método(parámetros))

-Generator
Retorna una serie de valores según el algoritmo definido

hello()

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

const generatorHello = helloWorld()
console.log(generatorHello.next().value)//Devuelve Hello
console.log(generatorHello.next().value)//Devuelve World
console.log(generatorHello.next().value)//Devuelve undefined
// CLASES 

class calculator {
    //metodo para inicializar nuestra clase
    constructor() {
        // aqui vamos a asignar las variables que estaran disponibles en un scope global
        this.valueA = 0;
        this.valueB = 0; 
    }

    //metodo 
    sum (valueA, valueB) {
        this.valueA = valueA;
        this.valueB = valueB;

        return this.valueA + this.valueB;
    }
}

// aqui lo llamamos
const calc = new calculator ();

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


// ES6 tambien trajo los MODULOS 
// IR AL ARCHIVO MODULES.JS

module.js

// en este archivo voy a tener logica separada de mi archivo principal

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

// de esta forma se exporta el modulo para llamarlo donde lo necesite
export default hello; 
//importando...
import { hello } from './module';



// GENERATORS TAMBIEN SE ANADIO EN ES6
// Es una funcion especial que retorna una serie de valores segun el algoritmo definido 
function* helloWorld() {
    if (true) {
        yield 'Hello, ';
    }

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

// llamar a la funcion 
const generatorHello = helloWorld() ;
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
C5.png
//Clases

class Datos {
    constructor() {

    }
    usuario(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;

        console.log(`Hola ${this.nombre}, tu edad es de: ${this.edad}`);
    }
}
const resultado = new Datos();
resultado.usuario("Victor", 17);

//Generadores

en mi caso era necesario añadir en el package.json (type:“module”)

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

Asi lo implemente con la clase a ver que tal quedaba, que opinan ?

const hello =  () => {
    return "hello world";
}

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

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

}
module.exports =  {hello,Calculator};

asi lo llame el module

const {hello, Calculator} = require('./module');
console.log(hello());
const calculadora = new Calculator();
console.log(calculadora.sum(2,2));

Hasta hoy me enteré de la existencia de los generadores, súper!

Leyendo varios comentarios, noto que hay una confusión respecto al import y el require. Desde la versión 13 de node, se implementó nativamente el uso de import. Sin embargo, el archivo debe tener una extensión .mjs o en el package.json se debe agregar la propiedad “type” con un valor igual a “module”.
ECMAScript modules

Las clases son una forma en que podemos manejar una sintaxis mas clara para manejar objeto y la herencia y nos permite aplicar la programacion orientada objetos en JS.

Primero necesitamos definir la palabra reservada “class” y nuestro nombre, dentro ira el constructor, en el que asignaremos las variables que estaran en nuestro Scope Global. Usamos la palabra “this” despues de un punto utilizaremos el nombre de nuestra variable y las inicializamos a 0.

Tambien podemos dentro de la clase asignar los metodos al que le podemos asignar parametros. Esto se puede ver asi:

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

Para poder utilizar o instanciar esta clase que ya creamos y utilizar sus metodos, necesitamos hacer:

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

De esta forma se crean los objetos y ya podemos trabajar con ellos y con la herencia.

Otra caracteristica que se han agregado es el trabajar con modulos, o el import o el export. Donde en otro archivo podriamos crear otro metodo de esta forma: (archivo module.js):

const hello = () => { return 'hello!' };
module.exports = hello;

Y para poder exportarlo usamos en nuestro index:

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

Otro punto interesante que se agrrego en Es6 es Generator o generadores. Es una funcion especial que retorna una especie de valores segun un algoritmo definido. Necesitamos una funcion que sintaxis es:

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

Para poder ejecutarla de forma que se vayan corriendo los pasos, podemos usar:

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

que nos permitira con next poder ejecutar la primer logica y obtener ese valor y cuando volvamos a ejecutar el siguiente valor next, recordara en que parte se quedo y mostrara el segundo valor y asi en cada paso que le agregamos.

Compañeros, ya pude correr los módulos con la forma presentada por el profesor. Lo que se tiene que hacer es lo siguiente (se debe estar en el home de tu espacio de trabajo, la “~” en linux):

  1. ~$ npm --version
    3.5.2 //checar nuestra versión actual de npm
  2. ~$ sudo npm install -g [email protected] //instalar la más reciente
  3. ~$ npm -v
    6.13.6 //confirmar la actualización
  4. ~$ sudo npm cache clean -f //Borrar el caché
  5. ~$ sudo npm install -g n //buscar e instalar la última versión de nodejs
  6. ~$ sudo n stable //establecer la versión actual más estable

Fuente de dónde lo saqué

Me funcionó los modulos de javascript, esto fue lo que hice para que me funcionará…
Mi entorno de trabajo es pop os 20.04, esta distribución de linux está basada en ubuntu 20.04, cabe destacar que debería funcionar para Window 10 con WSL, yo tenía la versión 12 de node.js y no me funcionó con es versión, esta versión fue la instalé en los prework de los cursos.

Descripción general de la solución:

  1. Desinstalé la versión node.js
  2. Instalación node.js en su versión más actual y que se LTS
  3. Configuración del proyecto y el archivo.json

Todos los pasos los ejecuto en la terminal

Paso a paso de la solución antes descrita

  1. Desinstalé la versión node.js

*- Eliminé node.js, ya que tenía la versión v12 y lo hice haciendo los siguientes pasos:

Desinstale node con el siguiente comando:

	sudo apt-get purge --auto-remove nodejs

Elimine los directorios node o node_modules de / usr / local / lib con la ayuda del siguiente comando:

	sudo rm -rf /usr/local/lib/node*

Elimine los directorios node o node_modules de / usr / local / include con la ayuda del siguiente comando:

	sudo rm -rf /usr/local/include/node*

Elimine cualquier archivo de nodo o directorio de / usr / local / bin con la ayuda del siguiente comando:

	sudo rm -rf /usr/local/bin/node

Por último como indica el tutorial verifique paso a paso eliminando cada una de estas carpetas, puede ocurrir el caso de que no existe alguna carpeta a eliminar

sudo rm -rf /usr/local/bin/npm 

sudo rm -rf /usr/local/share/man/man1/node*

sudo rm -rf /usr/local/lib/dtrace/node.d  ~/.npm

sudo rm -rf ~/.node-gyp /opt/local/bin/node

sudo rm -rf opt/local/include/node

sudo rm -rf /opt/local/lib/node_modules
  1. Instalación node.js en su versión más actual y que sea LTS

Realicé la instalación de node a la última versión

2.1 Primero, verifique si tenía las librerías esenciales instaladas, ejecutando los siguientes comando en mi caso yo las tenías, pero lo coloco por si alguno no las tienes:

sudo apt install build-essential && sudo apt-get update

sudo apt-get install gcc g++ make && sudo apt-get update


sudo apt update && sudo apt upgrade && sudo apt install curl

2.2 Segundo instalé node en la versión 14 ejecutando el siguiente comando curl -sL

http://deb.nodesource.com/setup_14.x | sudo -E bash - 
sudo apt-get install -y nodejs

sudo apt-get update

2.3 Tercero reiniciar la computadora

2.4 Cuarto luego realice la actualización de npm con la siguiente instrucción

sudo npm install -g npm
  1. Configuración del proyecto y el archivo.json
    Por último configuré el proyecto siguiendo los siguientes pasos, cabe aclarar que los pasos que seguí fueron los que el profesor indico al principio, es decir.

NOTA: Si tienes la capeta del proyecto puedes saltarte el paso 3.1 ve directamente al 3.2

3.1 Abrir terminal y crear la carpeta del proyecto si tienes ya la carpeta creada salta este paso

mkdir  proyecto

cd proyecto

3.2 Iniciar proyecto con node con el comando, seguir las mismas instrucciones que el profesor mostró puedo utilizar “npm init -y” para no contestar ninguna pregunta. Pero aconsejable seguir lo que el profesor dice

npm init

3.3 Luego en el package en la primera sección del código agregue la instrucción

    "type": "module",
5-2-es6-configuración-del-json.png

NOTA importante los módulos pueden tener extensión .js o .mj pero creo que es buena práctica tenerlo .mj para saber que esos archivos sólo son módulos con lógica…

Por cierto quiero aclarar que si te funciono dale un linke para que los demas lo vean y coméntame si te funcionó…

Otra cosa más , no te desanimes

Tú eres absolutamente genial y único o única 🥺 tus logros no definen lo especial que eres. Lo define el hecho y la verdad absoluta que no hay dos personas como tú y eso te hace maravillosamente genial y especial. Dios te ama ❤️ y búscalo 😃 Juan 1:12

Por si les sale error de que no pueden importar su modulo, solo agreguen esto:

"type": "module",

en su archivo de package,json y así ya les debe de correr sin problemas

//CLASES
class calculator {
    constructor() {
        this.valueA = 0;
        this.valueB = 0;
    }

    sum(valueA, valueB) { //Método de suma
        this.valueA = valueA;
        this.valueB = valueB;
        return this.valueA + this.valueB;
    }
}

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

//MODULOS Import y Export 
import { hello } from './module';

hello(); //De esta forma yo puedo traer esa logica que acabo de separar en modulos. Esto se usa para una logica para hacer una peticion especifica o alguna operacion matematica

//GENERATORS es una funcion especial que retorna una serie de valore segun el algoritmo requerido.

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

const generatorHello = helloWorld();
console.log(generatorHello.next().value); //Hello,
console.log(generatorHello.next().value);//World
console.log(generatorHello.next().value); //undefined

//Uno de los generadores más aplicados es el de Fibonacci. 

Por si quedan dudas acerca de los generadores encontré este video donde explican con caso practico como el scroll infinito en las paginas web.
https://www.youtube.com/watch?v=zmvUvRyAi0A

Esto aplica si solo estamos usando node? lo hice en un ambiente con dos javascripts y no me dejo. Me salio el error: cannot use import statement outside a module

Módulos

⠀⠀⠀⠀⠀⠀⠀⠀
Si como la mayoria y yo tuviste problemas para importar y exportar, tal vez lo siguiente te pueda ayudar.
⠀⠀⠀⠀⠀⠀⠀⠀
Si estás trabajando con un documento HTML para testear tu código.
⠀⠀⠀⠀⠀⠀⠀⠀
Debes agregar a tu <script> lo siguiente:

<script type="module" src="./script.js"></script>

De esta manera, trabajando con el navegador y definiendo el type ya no tendrias problemas con el código.
⠀⠀⠀⠀⠀⠀⠀⠀

Export

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

let persona = "ivan";

export {hello, persona};

Import

import { hello, persona } from './module.js';

console.log(hello());
console.log(persona);

⠀⠀⠀⠀⠀⠀⠀⠀
Si estás corriendo tu código dentro de VS Code entonces crearas un archivo llamado package.json dentro de tu carpeta actual.
⠀⠀⠀⠀⠀⠀⠀⠀
2021-02-12_13h32_11.png
⠀⠀⠀⠀⠀⠀⠀⠀
Y dentro definirás el siguiente código:

{
    "type" : "module"
}

De esta manera ya no tendrías problemas para importar/exportar tu código dentro de VS Code.

Una buena practica es siempre poner el nombre de la clase en Capitalize, con la primer letra en mayuscula.

Acerca de los generadores e iteradores encontré este link muy interesante.
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Iterators_and_Generators

Al ejecutar el condigo en VSC utilizando el complemento Code Runner a mi me daba error.
Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
Lo solucione agregando “type”: “module” en el modulo package.json 😋

Export:

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

Import:

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