JavaScript siempre ha sido una herramienta poderosa para construir experiencias en la web, y sólo hay que tomar una muestra de lo que las comunidades de desarrolladores web están hablando para ver que es más popular que nunca – incluso fue nombrado el «lenguaje de programación del año» el año pasado por el índice TIOBE, que rastrea la relativa popularidad de los lenguajes. Justo en el horizonte está ECMAScript 6, o ES6, que traerá la próxima evolución del lenguaje JavaScript con toneladas de mejoras, nuevas características, e incluso algunas cosas que son nuevas para JavaScript pero que podrían resultar familiares si se conoce más de un lenguaje. Hay mucho más de lo que se puede cubrir en una entrada del blog, así que voy a destacar dos cosas para darles una pequeña muestra de los cambios de ES6: cadenas de plantillas y clases.
Plantilla de cuerdas
En el ES6, la concatenación de cadenas es simple con cadenas de plantilla. Aquí hay un breve ejemplo:
Como puedes ver en el código anterior, sólo tienes que envolver cada variable que quieras imprimir dentro de un bloque de cadenas de plantilla, que se parece a este ${}, luego asegúrate de que toda la cadena esté encerrada en backticks (`), y tienes una cadena fácil de leer que está compuesta por múltiples variables.
Si lo comparas con la forma en que creamos la misma cadena en ES5 (que alimenta la versión actual de JavaScript), puedes ver que los símbolos + y » hacen que sea mucho más difícil de leer rápidamente.
Como puedes ver en el código anterior, sólo tienes que envolver cada variable que quieras imprimir dentro de un bloque de cadenas de plantilla, que se parece a este ${}, luego asegúrate de que toda la cadena esté encerrada en backticks (`), y tienes una cadena fácil de leer que está compuesta por múltiples variables.
Si lo comparas con la forma en que creamos la misma cadena en ES5 (que alimenta la versión actual de JavaScript), puedes ver que los símbolos + y » hacen que sea mucho más difícil de leer rápidamente.
ES6 abarca esos patrones clásicos permitiéndole declarar algo explícitamente como una clase y definiendo un constructor y cualquier método y propiedades en su interior. Aquí hay un ES6 equivalente al ejemplo anterior:
Esto es en realidad sólo un poco de azúcar sintáctico para ayudarte a expresar claramente la intención de tu código y facilitar su lectura a ti y a los demás, pero si te gusta emular las clases entonces probablemente encontrarás esto realmente útil.
¿Cómo puedo usar esto hoy?
Como el primer borrador completo de ES6 no está terminado, no muchas de las nuevas características están actualmente soportadas en los navegadores liberados, que a partir de este post son IE10, Firefox 35, Chrome 40, y Safari 7. Afortunadamente, hay varias maneras diferentes de empezar a usar ES6 ahora. Una de las más populares es 6to5 ( https://6to5.org), un transpondedor que convierte tu código ES6 en un equivalente de ES5 para que sea compatible con los navegadores actuales.
¿Cómo me mantengo al día con los cambios de ES6?
Ya es bastante difícil aprender un idioma que no cambie todos los días, y no hay duda de que verás algún contenido de ES6 de la Escuela de Código en el futuro. Hasta entonces, echa un vistazo al increíble curso que Scott Allen y Joe Eames crearon para llamado Fundamentos de JavaScript para ES6. Está disponible para todos los suscriptores de la Escuela de Código y te pone al día en muchas de las nuevas herramientas de ES6.
ACTUALIZACIÓN: La Escuela de Código ahora ofrece un curso ES6 llamado ES2015: La forma de JavaScript por venir.
También puedes consultar esta tabla de compatibilidad que Juriy Zaytsev ha creado y gestiona para que puedas estar al día de qué navegadores son compatibles con qué características y ver cómo se va llenando de verde en los próximos meses!
¿Ya has empezado a usar el ES6? Háganos saber lo que piensa y lo que más le gusta en la sección de comentarios de abajo!