Bueno, que mejor manera de comenzar el blog con un post base sobre Javascript y sus nuevas funcionalidades.
Pero primero que todo, ¿A que me refiero con ECMAScript 6?, en palabras simples, ECMAScript 6 (o ES6 para abreviar), es el nuevo estándar de Javascript (que en realidad ya tiene algo de tiempo, pero ya se esta utilizando actualmente) el cual nos trae una extensa lista de cambios y mejoras a lo que ya conocemos, tantos, que se merece más de un post, a continuación cubriré lo "esencial" y lo que utilizare mayormente en mis siguientes posts.
Variables (var, let y const)
A pesar de seguir siendo dinámicamente tipeado, ES6 nos introduce una nueva forma de declarar variables aparte del ya conocido var, estos son let y const.
La primera forma, let se utiliza de la misma forma que el var, y prácticamente tienen un escenario de uso muy similar, pero este tipo de variable se introdujo para solventar el problema de los Scopes, de manera que esta variable solo tiene un alcance local, es decir, solo se inicia la variable en el bloque de código actual.
La segunda forma, const se introdujo para optimizar el uso de memoria de Javascript (¿Quien no quiere que su código sea más eficiente?), se utiliza para declarar constantes y este tipo de “variables” se tienen que declarar con un valor que no podrá ser reasignado (javascript lanzara un error en caso de). OJO: a pesar de que la variable no puede ser reasignada, las propiedades del objeto si pueden variar.
¿Entendieron?, supongo que no, así que vamos con un ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 5; // Manera tradicional, el alcance es toda la función
let b = 10; // Alcance de bloque local, solo el bloque que lo declara
// No se puede reasignar, pero si modificar propiedades
const c = {
test: 'Por defecto'
};
if (true) {
var a = 30; // a = a
let b = 5; // Solo dentro del bloque "if" b != b
console.log(a); // 30
console.log(b); // 5
}
console.log(a); // 30
console.log(b); // 10
c.test = 'hola'; // ok
c = 50; // TypeError: Assignment to constant variable.
Como se puede apreciar en el ejemplo, la variable b declarada con let dentro del bloque if no es igual a la que fue declarada en el bloque exterior, a diferencia de la variable a declarada con var donde si son la misma. Con respecto a la variable c declarada con const, con esta pudimos reasignar su propiedad “test” sin ningún problema, pero al momento de tratar de volver a asignarla salto un error (ugh).
En conclusión: Javascript nos ofrece dos maneras eficientes y seguras de declarar variables, por lo cual no veo razón para seguir utilizando var de manera general, en mi caso, me inclino más a utilizar const para declarar módulos, utilidades, etc, en una variable que se que no volveré a asignar, mientras para el resto, utilizare let para prevenir errores de Scope, tipo… oh la función x me cambio el valor de la variable! acabo de perder 2 horas buscando el error…, hmm me suena familiar.
() => Funciones
Ahora hasta una nueva y mejor manera de declarar funciones le agregaron a Javascript, ¿Que les parece? ¿Genial no?
Esta nueva forma de declarar funciones es con el operador “fat arrow” =>, de esta manera podemos reemplazar la clasica declaración de function(param1, param2) {} a esta declaración (param1, param2) => {}.
Y no solo se trata de una manera más “limpia” de declarar funciones anonimas (si, este nuevo metodo solo es para funciones anonimas), si no que solventan un problema muy común y que seguramente les ha ocurrido… el valor del this se mantiene dentro de la función…
¡Y aun hay más! ahora hasta un valor por defecto le podemos dar a los parametros, leyeron bien, ¡valores por defecto!, pero bueno basta de charla y vayamos al código:
Ejemplo 1:
1
2
// función de un parametro y return implicito
const myFunction = text => console.log(text);
Primero que todo veamos que estamos haciendo uso de la palabra reservada const para la declaración de la función, esto es debido a que no re-declarare esta variable en ningun bloque del código, pero bueno esto no es lo que veniamos a ver. Este nuevo tipo de declaración solo funciona para funciones anonimas, por eso hago uso de la constante myFunction para contener la función.
Podemos observar que text es el parametro que recibe la función, pero… ¡no tiene parentesis!… así es, en este tipo de funciones en el caso de que se envie un solo parametro no se requieren los parentesis, asi es, y por si fuera poco, en caso de ser una función de una linea el return esta implicito, es decir, para Javascript estamos haciendo un return console.log(text) y no requerimos de las llaves tampoco, ¿mucho más limpio no les parece?
Ejemplo 2:
1
2
// Function anonima sin parametros
console.log( () => 'Hola mundo!' ); // Hola mundo
Este es un caso muy similar el primer ejemplo, la diferencia es que no esperamos parametros para esta funcion, pero hay una mención muy importante que hacer, a diferencia de CoffeeScript (si lo utilizan o llegaron a usar), en caso de que la función no reciba parametros es necesario colocar () antes del signo =>, y bueno, el console.log mostrara “hola” debido a que la función retorna implicitamente debido a que es una linea, cool!
Ejemplo 3:
1
2
3
4
5
6
7
8
9
10
11
12
13
// Función con más de un parametro y parametro con valor por defecto
const myFunctionTwo = (param1, param2 = 'test') => {
console.log(param1); // valor del param1
return param2; // test
}
/*
Este console.log regresara:
1. 'test' => Es el parametro por default de la función que regrese en el return
2. 'hola' => Parametro enviado
*/
console.log(myFunctionTwo('hola'));
En este ultimo ejemplo vemos el uso de los parámetros con valor por defecto, si han usado otro lenguaje como PHP es una función muy similar (gracias a dios que la agregaron), de tal manera que el param2 de myFunctionTwo obtiene el valor test debido a que es el valor que le asignamos al momento de declarar la función, algo muy útil ya que le podemos decir ¡Adios! a esos molestos “param2 = param2 || 'test'”.
También podemos observar que la función recibe más de un parámetro, por lo cual se requieren los () y cada parametro debe ser separado por ,, bueno, lo mismo que toda la vida.
En conclusión: Ahora hasta las funciones nos cambiaron, eso si, este nuevo operador () => {} es demasiado bueno en la vida, al solventar los problemas de Scope (que estoy seguro que más de uno declaro un self en algún lado del código) a parte de un código más limpio, eso si, estos son los cambios basicos de este apartado, todavía queda más que aportar que podremos ver en la parte 2 (¿O en la 3?).
Clases... ¡CLASES!
No tengo palabras para describir este cambio, solo… CLASES!!!, así es, díganle adiós al típico código que usábamos y llamábamos “Clases”, a ese revoltijo que tratábamos de verle sentido y aplicarle todos los estándares que conocíamos de aquel código que si soportaba clases… Pues, no se diga más, una de las mayores inclusiones de ECMAScript 6 con la palabra reservada class ¡Díganle hola a las Clases en Javascript!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Person {
// Class constructor
constructor(name, age) {
this.name = name;
this.age = age;
}
// Class method
greet() {
// Uso de `
return `Mi nombre es ${this.name}, tengo ${this.age} años...
¡Mucho gusto!`;
}
}
const person = new Person('Luis Camargo', 23); // No la volvera a reasignar
console.log(person.greet()); // Mi nombre es Luis Camargo, tengo 23 años... \n ¡Mucho gusto!
Solo… solo miren esa belleza de código… (okay ya basta)
Como podemos ver en el ejemplo, una clase se declara simplemente con el uso de la palabra reservada class seguido con el nombre de la clase (y hasta extend esta, si, podemos extender las clases al propio estilo OOP), la clase que declaremos puede contar con un constructor que recibirá los parámetros con los que instanciemos la clases y los metodos de la clase que se declaran como podemos apreciar metodo(params...) {} hora de decirle adiós a los prototypes que usábamos para estos métodos wooooo!
No solo estoy mostrando en este ejemplo la declaración de una clase, si nos fijamos bien, hay una nueva forma de escribir strings utilizando `string`, esta forma de declarar string se llama “Template Strings” y nos permiten interpolar variables y declarar string multi-lineas, así es, como podemos apreciar en el ejemplo, tenemos un string de dos lineas sin necesidad de concatenar las lineas, muy útil cuando necesitemos escribir textos largos o html (Yeah!). La interpolación de variables se utiliza de la siguiente manera: ${variable}, solo colocando eso dentro de un Template String mostrara el valor de la variable sin necesidad de operaciones extra.
En conclusión: Mantengo la explicación de clases breve ya que podría escribir todo un post hablando de la maravilla de las clases pero quiero mantener esto corto y básico, la inclusión de la palabra reservada class es uno de los cambios más grandes de ES6 y el que más nos hará cambiar nuestra manera de escribir código, lo bueno de esto, es que es una maravilla… Ya realmente no les puedo pedir más y lo de Template Strings ni se diga una muy agradable funcionalidad, sinceramente, bien hecho.
Con esto se termina la introducción básica a ES6, un tutorial bastante breve para que sea una lectura agradable sobre lo que son algunas de las nuevas funcionalidades de nuestro amado (o odiado) Javascript.
Aunque… no todo es color de rosa, a pesar de que ya muchos navegadores lo soportan nativamente, hay algo que todos los programadores tememos llamado USUARIOS, no todos estos seres tienen la ultima versión de su navegador (y algunos utilizan Internet explorer Ugh), pero no teman, hay una solución llamada… Babel, realmente quisiera hacer un Post solamente dedicado a esta librería que literalmente “Salva la patria”, mientras, diríjanse a su página web y lean algo sobre el o pruébenlo, srsly, háganlo.