Qué es ECMAScript

ECMAScript es el estándar que define cómo debe de ser el lenguaje Javascript,

es la especificación que los fabricantes deben seguir al crear intérpretes para
Javascript.

Javascript es interpretado y procesado por multitud de plataformas, entre las que

se encuentran los navegadores web, así como NodeJS y otros ámbitos más
específicos como el desarrollo de aplicaciones móviles o desktop. Todos los
responsables de cada una de esas tecnologías se encargan de interpretar el
lenguaje tal como dice el estándar ECMAScript.
Porque es importante ES6
● ES6 es una nueva versión de Javascript, que nos ayuda a escribir código
más rápido, fácil y en menor cantidad de líneas.
● Entre las características destacadas, están el uso de módulos que me
permiten separar el código JS en muchos archivo y después usar solo lo que
necesito de ellos, es por esto que los frameworks como react, angular o
vue.js lo utiliza.
Compatibilidad de ES6
Si vamos a la web de https://caniuse.com vemos que todas las caracteristicas de
ES6 no es compatible con todos los navegadores, es por esto que deberemos
instalar una serie de herramientas para poder transformar nuestro código de ES6
a una versión compatible con todos los navegadores.
Instalaciones previas
● node.js: Entorno de ejecución para javascript. que permite
utilizar dentro de un servidor código javascript.

● npm: Es un gestor de paquetes pertenecientes a node,

que se llama Node package manager, podemos pensarlo
como una biblioteca llena de librerías, programas, etc.

● Babel, este programa nos permitirá compilar código de

ES6 a javascript tradicional que todos los navegadores
entienden.
Instalaciones previas
Webpack se define como un empaquetador de módulos (un bundler
en la jerga habitual) pero que hace muchísimas cosas más:

● Gestión de dependencias
● Ejecución de tareas
● Conversión de formatos
● Servidor de desarrollo
● Carga y uso de módulos de todo tipo (AMD, CommonJS o ES2015)

Es una herramienta extremadamente útil cuando desarrollamos aplicaciones web diseñadas con
filosofía modular, es decir, separando el código en módulos que luego se utilizan como dependencias en
otros módulos.
Módulos
Los sistemas de módulos para Javascript surgen como una necesidad de los
mismos programadores, de encapsular distintas funcionalidades en "bloques de
código" reutilizables.

Estos bloques son llamados módulos y es importante contar con un mecanismo

para gestionar las dependencias entre estos módulos.
Módulos
Instalaciones previas
1. Descargar e instalar https://nodejs.org/es/ (solo si no tengo instalado node)
a. verificar la versión de npm escribiendo en la consola npm -v
b. verificar la versión de node escribiendo en la consola node -v
2. Crear un proyecto con un archivo llamado package.json y agregar {} un par
de llaves sin nada adentro.
a. Este archivo sirve para nodejs, porque este se encarga de identificar todos los comandos y
dependencias que necesito para mi proyecto, por ej: babel.
3. Instalar babel https://babeljs.io/ abriendo la carpeta del proyecto en una
terminal y utilizando el siguiente comando:
a. npm install --save-dev @babel/core @babel/cli @babel/preset-env
b. Luego agregar en el archivo package.json el siguiente script: "scripts": {"build-babel":
"babel src -d lib" },
c. Crear dos carpetas: src y lib
Instalaciones previas
4- Ingresar al sitio de webpack https://webpack.js.org/ (Ir a documentación ->
guías -> Installation ) Abrir una terminal dentro de la carpeta del proyecto y
ejecutar los siguiente comandos uno por vez:
● npm install --save-dev webpack
● npm install --save-dev webpack-cli
● npm install --save-dev babel-loader

5- dejar el archivo package.json de la siguiente manera, donde van los scripts:

"scripts": {
"build": "webpack",
"build-babel": "babel src -d output --watch"
}
Instalaciones previas
6- crear en la raíz del proyecto un archivo de configuración de babel llamado
.babelrc y agregar estas lineas:

{ "presets": ["@babel/preset-env"] }

7- Agregar el archivo package.json el siguiente código:

"scripts": {
"build": "webpack --watch",
"build-babel": "babel src -d output --watch"
}
Instalaciones previas
8- Agregar un archivo en la raíz del proyecto llamado webpack.config.js

9- Documentación -> guías -> Getting Started -> Modules, copiar el codigo que
dice webpack.config.js dejar el código de la siguiente manera:
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
mode: 'development'
};
Instalaciones previas
10- Crear dentro de src un archivo app.js

11 - Para probar que funciona, ejecutar el siguiente comando:

npm run build

ES6
● Nuevas formas de declarar variables (let y const)
● Template strings
● Funciones de tipo flecha
● Clases y herencia
● Promesas
● objeto this
● Módulos
Let y Const
Ahora podemos declarar variables con let en lugar de var si no queremos que
sean accesibles más allá de un ámbito. Por ejemplo:

//ANTES ES5 //AHORA ES6

(function() { (function() {
console.log(x); // x no está definida aún. if(true) {
if(true) { let x = "hola mundo";
var x = "hola mundo"; }
} console.log(x);
console.log(x); //Da error, porque "x" ha sido definida
// Imprime "hola mundo", porque "var" hace dentro del "if"
que sea global
})();
// a la función;
})();
Let y Const
Ahora con const podemos crear constantes que sólo se puedan leer y no
modificar a lo largo del código. Veamos un ejemplo

(function() {
const PI;
PI = 3.15;
// ERROR, porque debe asignarse un valor en la
// declaración
})();

(function() {
const PI = 3.15;
PI = 3.14159;
// ERROR de nuevo, porque es sólo-lectura
})();
Template Strings
También podemos tener String multilínea sin necesidad de concatenarlos con +.

//ES5
let saludo = "hola " +
"como " +
"estas ";

//ES6
let saludo = `hola
como
estas`;
Template Strings
Con ES6 podemos interpolar Strings de una forma más sencilla que como
estábamos haciendo hasta ahora. Fíjate en este ejemplo:

//ES6
let nombre1 = "JavaScript";
let nombre2 = "awesome";
console.log(`Sólo quiero decir que ${nombre1} is ${nombre2`);
// Solo quiero decir que JavaScript is awesome
Función Arrow
Ahora contamos con una nueva forma de escribir funciones mucho más limpias y
claras, veamos el siguiente ejemplo:

// ANTES ES5 //AHORA ES6

// Imaginemos una variable data que incluye var data = [{...}, {...}, {...}, ...];
un array de objectos data.forEach(elem => {
var data = [{...}, {...}, {...}, ...]; console.log(elem);
data.forEach(function(elem){
});
// Tratamos el elemento
console.log(elem)
});
--------------------------------------------
-----------------------------------------
// ES5 // ES6
var miFuncion = function(num) { var miFuncion = (num) => num + num;
return num + num;
}
Clases
Ahora JavaScript tendrá clases, muy parecidas las funciones constructoras de objectos que realizabamos
en el estándar anterior, pero ahora bajo el paradigma de clases, con todo lo que eso conlleva, como por
ejemplo, herencia.

Aunque no deja de ser un azúcar sintáctico (Sugar Syntax) porque en JavaScript no tenemos clases,
tenemos prototipos.

class LibroTecnico extends Libro {

constructor(tematica, paginas) {
super(tematica, paginas);
this.capitulos = [];
this.precio = "";
// ...
}
metodo() {
// ...
}
}
This
La variable this muchas veces se vuelve un dolor de cabeza. antiguamente
teníamos que guardarlo en otra variable ya que solo hace referencia al contexto
en el que nos encontremos. Veamos el siguiente ejemplo:
//ES5 //ES6
var obj = { var obj = {
foo : function() {...}, foo : function() {...},
bar : function() { bar : function() {
document.addEventListener("click", document.addEventListener("click", (e) =>
function(e) { this.foo());
this.foo(); }
}.bind(this));
}
}
}
Destructuring
Tenemos nuevas formas de asignar valores a Arrays y a Objetos. Veamos unos
ejemplos
var [a, b] = ["hola", "mundo"]; var foo = function() {
console.log(a); // "hola" return ["175", "75"];
console.log(b); // "mundo" };
var [estatura, peso] = foo();
var obj = { nombre: "Carlos", apellido: console.log(estatura); //175
"Perez" }; console.log(peso); //75
var { nombre, apellido } = obj;
console.log(nombre); // "Carlos"
Valores por defecto
Otra novedad es asignar valores por defecto a las variables que se pasan por
parámetros en las funciones. Antes teníamos que comprobar si la variable ya
tenía un valor. Ahora con ES6 se la podemos asignar según creemos la función.

//ES5
function(valor) {
valor = valor || "foo";
}

//ES6
function(valor = "foo") {...};
Módulos
Ahora JavaScript se empieza a parecer a lenguajes como Python o Ruby.
Podemos llamar a las funciones, clases importando y exportando.
//File: lib/person.js //File: app.js
module "person" { import { hello } from "person";
export function hello(nombre) {
return nombre; var app = {
} foo: function() {
hello("Carlos");
}
},
name: “alex”
}
export app;