Introducción
Otra de las novedades del estándar ES6 son los atajos, o shortcuts, en la definición de métodos dentro de un objeto. Son un aspecto menor, pero ahorran espacio y hacen el código más legible y menos redundante en general.
¡Echemos un vistazo a esta nueva funcionalidad!
Definición de métodos tipo Vieja Escuela
En Javascript, un método es una propiedad de un objeto que tiene como valor una función:
var foo = { // A property myProperty: 'Hello World', // A method myMethod: function ( name ) { console.info( 'Hi, ', name ); } }; foo.myMethod( 'John Smith' ); // Hi, John Smith |
Definición de métodos ES6
Uno de los objetivos de ES6 es mejorar la sintaxis, buscando un lenguaje más declarativo y menos redundante. Para ello, el intérprete nos permite omitir la palabra ‘function‘ en nuestro métodos.
Un ejemplo rápido reescribiendo el ejemplo anterior:
var foo = { // A property myProperty: 'Hello World', // A method myMethod ( name ) { console.info( 'Hi, ', name ); } }; foo.myMethod( 'John Smith' ); // Hi, John Smith |
Como podemos ver, nuestro método ahora no sigue la sintaxis tradicional dentro de un objeto de clave/valor. En su lugar, nos encontramos con el nombre del método seguido directamente del cuerpo de parámetros y de sus correspondientes llaves contextuales:
methodName ( [ arg1 [, arg2 [ , ... argN ] ], ] cuerpo-de-la-función ) |
Como cabe esperar, los nuevos operadores de propagación/arrastre y valores por defecto funcionan perfectamente:
var calculator = { sumAll ( ...args ) { return args.reduce( ( a, b ) => a + b, 0 ); }, nthRoot ( n = 1, root = 2 ) { return Math.pow( n, 1 / root ); } }; console.info( calculator.sumAll( 10, 20, 30 ) ); // 60 console.info( calculator.nthRoot( 25, 2 ) ); // 5 console.info( calculator.nthRoot( 343, 3 ) ); // 6.999999999999 console.info( calculator.nthRoot( 81 ) ); // 9 |
En el ejemplo anterior, el método sumAll utiliza el parámetro de arrastre que le permite recoger n argumentos para formar con ellos un array. En el segundo, nthRoot, utilizamos los valores por defecto para calcular la raíz n de un número dado.
NOTA: En el ejemplo de la raíz cúbica de 343, vemos que Javascript devuelve 6.999999999999 en lugar de 7. Esto es un problema histórico del lenguaje a la hora de trabajar con cantidades matemáticas precisas. Si necesitamos máxima precisión en este tipo de cálculos, existen diferentes bibliotecas especializadas.
Getters, Setters y generadores
Al igual que con un método tradicional, los nuevos getters, setters y generadores también se benefician de esta sintaxis abreviada:
var foo = { property( [ parameters ] ) { // Do wonderful things here... }, get property () { // Do wonderful things here... }, set property ( value ) { // Do wonderful things here... }, * generator () { // Do wonderful things here... } }; |
Conclusión
En este pequeño artículo, hemos visto otra de las novedades del estándar que tiene como objetivo simplificar la sintaxis tradicional de Javascript. No se trata de una revolución conceptual, sino de únicamente la supresión de una palabra reservada –function– que, en este contexto de losa métodos, resultaba redundante.
Saludos!
Buenos artículos y claros sobre ES6, enhorabuena por haber retomado el blog!
Como añadido por si alguien tiene dudas, comentar que para el ámbito del this funciona como el function de siempre, por lo que realmente esta sí es una sintaxis corta (y por cierto, muy parecida a como podemos definir un método de una clase) en vez de la sintaxis flecha, que es otra cosa que hay que saber cuando es conveniente usarla.
Sí; buen apunte el relacionado con ‘this’ y las funciones flechas. Comentar además que éstas no se pueden utilizar cuando usamos esta sintaxis reducida; lo comenté en alguna de las 3 partes que les dediqué recientemente.
Cualquiera de las dos estructuras siguientes dan un error del intérprete: