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!