Atajos (shortcuts) en la definición de métodos con ES6

19 Jul 2016

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!

Más:

{2} Comentarios.

  1. ifedu

    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.

    • Carlos Benítez

      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:

      var foo = {
          bar () => console.info ( 'Hello World' )
      };
      
      var bar = {
          foo () => { console.info( 'Hello World' ); }
      }
      

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *