Seleccionar página
En el interesante artículo La función que no lo era, de Javier Vélez Reyes, se hace patente una singular e importante diferencia entre la tradicionales function y las arrow function. Sin duda Javier ha dado en el clavo sobre una de las principales diferencias entre ambos modelos y pone de manifiesto la importancia de conocer que ambos modelos no son equivalentes e intercambiables, ya que el uso de uno u otro tiene consecuencias muy significativas en la contextualización de this.

Veamos cómo es posible saber si una función ha sido construida por medio de la instrucción function o como una arrow function. Es primer lugar debemos descartar algunas estrategias, que aunque parezcan evidentes, no van a funcionar en ningún caso:

var f = function () { return 1; };
var g = () => 1;

console.log (
    f === g,
    typeof (f) === typeof (g),
    f instanceof Function,
    g instanceof Function
);

Todos estos intentos de comparar una función tradicional y una función flecha no ofrecen una solución válida. Tenemos dos métodos para conocer si una función ha sido construida de la forma tradicional o como función flecha:

Prototype

El primer método es preguntar por el prototipo de la función en cuestión. Las arrow function no tienen prototipo y por lo tanto typeof de esta propiedad devuelve el undefined. Podemos aprovechar esta característica para escribir una breve y sencilla función isArrowFunction:

function isArrowFunction(x) {
    return typeof x.prototype === 'undefined';
}

var f = function () { return 1; };
var g = () => 1;

console.log('isArrowFunction(f) = ', isArrowFunction(f));
console.log('isArrowFunction(g) = ', isArrowFunction(g));

Actualización: hemos visto que esta aproximación tiene un problema en varios casos: con las funciones nativas de los objetos Javascript y con los métodos de las clases, ya que estas tampoco tienen un prototipo y por lo tanto se confunden con las arrow function si usamos esta función.

class C {
  m() {}
}
const c = new C();

console.log('isArrowFunction(Object.create) = ', isArrowFunction(Object.create));
console.log('isArrowFunction([].splice)     = ', isArrowFunction([].splice));
console.log('isArrowFunction(c.m)           = ', isArrowFunction(c.m));

toString

El segundo método es analizar el código de la función por medio del método toString() que tienen todos los objetos en Javascript y, cómo las funciones también son objetos, podemos utilizar para las funciones y funciones flecha. Las funciones tradicionales empiezan siempre con el texto 'function' y las funciones flecha no. Podemos aprovechar esta característica para rescribir nuestra función isArrowFunction:

function isArrowFunction(x) {
    return x.toString().indexOf('function') !== 0;
}

var f = function () { return 1; };
var g = () => 1;

console.log('isArrowFunction(f) = ', isArrowFunction(f));
console.log('isArrowFunction(g) = ', isArrowFunction(g));

Aunque no son evidentes, tenemos dos formas de conocer si una función ha sido construida de la forma tradicional o como función flecha, por lo que nuestras librerías o framework pueden establecer algún tipo de medida defensiva ante los comportamientos no deseados del uso de funciones flecha al no tener en cuenta el funcionamiento de this en este tipo de funciones.

Novedades

Datos inmutables en Javascript

Datos inmutables en Javascript

En Javascript todo parece mutable, es decir, que se puede cambiar, pero lo cierto es que también nos ofrece varios mecanismos para conseguir que los datos que manejamos, especialmente los objetos, sean inmutables. Te invitamos a descubrir cómo…

Copiar objetos en Javascript

Copiar objetos en Javascript

Copiar objetos no es algo sencillo, incluso se podría decir que en si mismo no es posible, ya que el concepto «copiar» no entra dentro del paradigma de los objetos. No obstante, por medio de instrucciones como Object.assign() hemos aprendido como obtener objetos con las mismas propiedades, pero está técnica no se puede aplicar a todos los tipos de objetos disponibles en Javascript. Vamos a ver cómo podemos copiar cualquier tipo de objeto…

Descubre los Javascript Array Internals

Descubre los Javascript Array Internals

El Array es una de las estructuras más utilizadas en Javascript y no siempre bien comprendida. Hoy os invitamos a analizar el comportamiento interno de este objeto y descubrir cómo Javascript implementa las diferente acciones con los Array y que operaciones internas se realizan en cada caso.

Web Components: pasado, presente y futuro

Web Components: pasado, presente y futuro

Los Web Components aparecieron en el panorama de desarrollo hace ya bastante tiempo. Desde su presentación se les ha prestado mucha atención, pero lo cierto es que no han sido acogidos de forma generalizada, quizás por la difusión de nuevos y potentes frameworks. Nos preguntamos qué ha pasado con este estándar y, sobre todo, que puede pasar de aquí en adelante con el uso práctico de los componentes web.