Todo lo que necesitas para explotar el poder de ES6

En este video voy a repasar que son los scopes en JavaScript. Vamos a ver cómo “var” puede contaminar el ambiente global de JavaScript (el objeto window) dependiendo de su scope. Luego, voy a introducir el nuevo tipo de variable “let”. La cual soluciona los problemas de contaminación del ambiente global y su comportamiento es similar al de variables en otros lenguajes de programación como Java.

Repaso de var y el scope - introducción a let

Voy a introducir el segundo tipo de variable: “const”. La cual nos permite declarar variables a las cuales solo se les puede asignar valores una vez. Vamos a entrar en detalle en un ejemplo contra intuitivo: la diferencia entre asignar un valor y modificar propiedades de un objeto tipo referenciado por una variable const.

Introducción a const

Vamos a repasar todo acerca de las funciones en JavaScript. Voy a explicar qué es el hoisting, la diferencia entre las function declarations y las function expressions. Y por último vamos a conversar sobre las funciones anónimas.

Repaso de hoisting, declaración de funciones y funciones anónimas

Introducción a las funciones flecha. Vamos a ver cómo se comparan con las funciones que vimos en el video anterior. También, voy a cubrir un caso que le trae problemas a los principiantes el cual es retornar un objeto desde una función flecha.

Funciones Flecha / Arrow Functions

En este ejemplo vamos a refactorizar un script que realiza multiples operaciones sobre un array. Vamos a sustituir las funciones regulares por las funciones flecha.

Funciones Flecha / Arrow Functions - Ejemplo práctico

Al comparar JavaScript con otros lenguajes de programación vemos que this se comporta de una manera extraña. En este video voy a entrar en detalle en cómo funciona y a que apunta. Vamos a analizar el comportamiento de “this” cuando invocamos una función, un método y un constructor. Vamos a comparar las diferencias entre cada una. También, vamos a hablar de una método de las funciones que se llama bind que permite forzar el this para cualquier función de JavaScript.

¿Cómo funciona this en JavaScript?

En los videos anteriores introduje las funciones flecha y luego hicimos un repaso de cómo funciona “this” en JavaScript. En este video vamos a entrar en detalle en cómo funciona “this” en las arrow functions y cómo difiere de las funciones normales.

¿Cómo funciona this en las arrow functions?

Vamos a ver la nueva forma de crear y manipular cadenas de caracteres en JavaScript. Para ilustrar su uso vamos a refactorizar un ejemplo que utilizar concatenación de strings.

Introducción a los template literals

Vamos a aprovechar todo el poder de los template strings para generar HTML dinámico. Vas a darte cuenta de lo versátil y útil que son  para generar markup.

Crear plantillas de HTML utilizado los template literals

Los argumentos por defecto nos permiten asignarle un valor a los argumentos de una función en caso de que estos argumentos no fueron suministrados durante la invocación de la función. Vamos a ver un ejemplo práctico en el cuál eliminamos la necesidad de tener un “if” a través del uso de esta nueva funcionalidad. Esto nos permite mantener nuestro código más conciso y legible.

Introducción a los argumentos por defecto - 1

Continuemos profundizando en los argumentos por defecto. Vamos a ver todas las operaciones que podemos hacer en los argumentos por defecto y sus distintos comportamientos. Vamos a ver un ejemplo en el cuál utilizamos los argumentos por defecto para crear un mecanismo en el cuál lanzamos un error en caso de que un argumento no fue suministrado. Con esto vamos a ilustrar cómo mezclar la invocación de funciones desde los argumentos por defecto.

Introducción a los argumentos por defecto - 2

Voy a introducir el nuevo operador Spread que utiliza los tres puntos (…). Lo primero que vamos a hacer es visitar cómo funciona el método “.apply()” el cual nos permite utilizar un array como una lista de argumentos para invocar una función. Luego, vamos a ver cómo nos permite unir y transformar arrays de una formar super sencilla.

Operador Spread

Vamos a ver qué es y para qué se utiliza el operador Rest. A pesar de que utiliza la misma sintaxis que el spread (los tres puntos) su uso y objetivo es distinto. Lo primero que vamos a hacer es analizar el objeto arguments el cual es accesible durante la ejecución de cualquier función. Nos vamos a dar cuenta que arguments tiene la forma de un array pero no es un array! Para convertirlo en array vamos a utilizar el método slice de los arrays. Luego, vamos a implicar toda esta lógica utilizando el operador Rest. De esta forma vas a tener todo el contexto del por qué se introdujo y qué problema resuelve.

Operador Rest

La destructuración nos permite extraer información de un objeto o array en una sola operación. Vamos a ver cómo funciona y que problema soluciona. Vamos a ver ejemplos prácticos cómo: retornar más de un valor de una función, el poder de mezclar los parámetros por defecto con las destructuración y más. Es una herramienta super poderosa que nos permite simplificar y escribir código mucho más conciso.

Destructuración con Arrays

Vamos a profundizar en la destructuración, antes vimos cómo se utiliza con arrays. En este video vamos a ver cómo se utiliza con objetos. Vamos a ver varios ejemplos prácticos incluyendo un caso de uso que es muy común en React.

Destructuración con Objetos

En este video vamos a explicar las razones por las que se le introdujo un nuevo ciclo a JavaScript. Vamos a comparar el ciclo for, for in y for each para entender en profundidad las diferencias entre ellos. Una vez exploradas las diferencias y limitaciones de estos ciclos vamos a introducir el nuevo ciclo for of.

Ciclo for of - parte 1

Continuaremos explorando el ciclo for of. En este ejemplo vamos a extraer nodos del HTML y vamos a recorrerlos utilizando el ciclo for of. El objetivo va a ser modificar el color de cada uno de los nodos.

Ciclo for of - parte 2

En este video vamos a cubrir algunas limitaciones y problemas que tienen los objetos en JavaScript. Uno de ellos es causado por la cadena de prototipos que puede traer propiedad no deseadas cuando iteramos por el objeto. También vamos a explorar el hecho de que el orden en que se agreguen las propiedad en un objeto no garantiza el orden a la hora de iterar por ellas.

Introducción a Maps - Limitaciones de los objetos

En este video voy a introducir los Maps. Vamos a explorar como crearlos, agregarle nuevas entradas e iterar sobre ellos utilizando distintos ciclos. Vamos a explorar los métodos .set(), .clear(), .add() y .entries. También, vamos a utilizar las destructuración para convertir un Map en un Array.

Maps en ES6

Voy a introducir los Sets y explicar porque son útiles. Los sets nos permiten tener una especie de “bolsa” en la cual no pueden haber artículos repetidos. Vamos a aprender cómo crear Sets, cómo agregar elementos utilizando .add(), cómo iterar sobre ellas y cómo desestructurarlas.

Sets en ES6

ES6 introduce varias mejoras a los objetos literales como: no tener que repetir el nombre del a propiedad a la hora de crear el objeto y la creación de propiedad dinámicas.

Mejoras a los objetos literales

Object.assign es una herramientas superpoderosa. Nos permite copiar las propiedades y valores de un objeto a otro. En este video voy a comenzar explicando cómo hacíamos esto antes de tener Object.assign, una solución basada en Object.keys. Luego de ver esto vas a ver cómo Object.assign simplifica todo este proceso.

Object.assign

En este video voy a repasar cómo funcionan los prototipos y cómo podemos utilizarlos para crear una especie de herencia. Voy a explicar lo que es la cadena de los prototipos, los operadores instaceof y typeof, constructores y como llamar al constructor del padre y la propiedad __proto__. Este video te va a dar todo el contexto que necesitas para entender todas las implicaciones de los prototipos en JavaScript. Todo esto me va permitir explicar lo que son las clases en JavaScript.

¿Qué son los prototipos?

En este video voy a cubrir todo lo que necesitas saber sobre las clases en JavaScript. En el video anterior utilizamos prototipos para crear una especie de herencia. En este video vamos a refactorizar el código y vamos a utilizar las clases en JavaScript. Vas a entender cómo crear clases, hacer que extiendan unas de otras utilizando extends, implementación de constructores, y más. También vamos a explorar los gets y sets que nos permiten realizar cambios a la data que se esta añadiendo o extrayendo del objeto.

Clases en JavaScript

En este video voy a conversar sobre la compatibilidad que tienen los navegadores y todas estas adiciones que se le hicieron a JavaScript. Voy a explicar cómo utilizar <a href="https://caniuse.com/">caniuse</a> que nos permite revisar que navegadores soportan cierta funcionalidad. Luego, voy a explicar lo qué es la transpilación. Vamos a utilizar <a href="https://babeljs.io/">babel</a> para ilustrar el proceso. La transpilación nos permite escribir código utilizando las últimas adiciones al lenguaje y luego nos permite convertirlo en código que es soportado por navegadores viejos.

Compatibilidad de ES6 entre navegadores

En este video voy a explicar cómo instalar y configurar babel para que lo puedas utilizar en tus proyectos.

Lecturas

Repaso de var y el scope - introducción a let

Introducción a const

Repaso de hoisting, declaración de funciones y funciones anónimas

Funciones Flecha / Arrow Functions

Funciones Flecha / Arrow Functions - Ejemplo práctico

¿Cómo funciona this en JavaScript?

¿Cómo funciona this en las arrow functions?

Introducción a los template literals

Crear plantillas de HTML utilizado los template literals

Introducción a los argumentos por defecto - 1

Introducción a los argumentos por defecto - 2

Operador Spread

Operador Rest

Destructuración con Arrays

Destructuración con Objetos

Ciclo for of - parte 1

Ciclo for of - parte 2

Introducción a Maps - Limitaciones de los objetos

Maps en ES6

Sets en ES6

Mejoras a los objetos literales

Object.assign

¿Qué son los prototipos?

Clases en JavaScript

Compatibilidad de ES6 entre navegadores

Introducción a Babel

Funciones Flecha / Arrow Functions

Descripción