Truco: Obtener un objeto de una función flecha en JavaScript

Las funciones flecha de JavaScript son una herramienta fantástica para hacer más sencillo y compacto el código. Además de ser clave para que el código sea más legible cuando se trabaja con programación funcional. Aún así, obtener como respuesta un objeto de una función flecha puede ser algo complicado, especialmente si se desea dejar la función solamente en una línea. Veamos a continuación las diferentes formas que existen para obtener un objeto de una función flecha.

Obtener un objeto con sintaxis formato largo

La forma más común y estándar de devolver un objeto desde una función de flecha es usar la sintaxis de formato largo. Esto es, escribiendo el cuerpo de la función.

const makeObj = (name, value) => {
	return {
		name: name,
		value: value
	};
};

En el caso de que la función sea compleja, requiere varios pasos para obtener el resultado, esta es la mejor opción. Pero no el caso de funciones sencillas en las que la operación a realizar no es demasiado compleja y se podría escribir en una línea.

Devolver el objeto tal cual

En el caso de que intentemos devolver un objeto tal cual el intérprete de JavaScript nos dará un error ya que espera encontrar el cuerpo de una función. Por ejemplo, si se intenta crear la función como

En Analytics Lane

Nuevo simulador FIRE en el laboratorio de aplicaciones de Analytics Lane

const makeObj = (name, value) => { name: name, value: value };

El intérprete nos dará el siguiente error SyntaxError: Unexpected token ':'.

Para solucionar este problema y devolver el objeto tal cual lo que se tiene que hacer es envolver el objeto entre paréntesis para que lo interprete tal como nos interesa.

const makeObj = (name, value) => ({ name: name, value: value });

Truco con el que se puede hacer más compacto código sencillo para la creación de objetos. Pudiendo incluso simplificar más el código si tenemos en cuenta que no es necesario repetir el nombre de la propiedad del objeto.

const makeObj = (name, value) => ({ name , value });

Conclusiones

En este truco se ha visto cómo se pueden conseguir un objeto de una función flecha en JavaScript. Una operación sencilla, pero que una vez se compren la sintaxis, es bastante útil para simplificar y hacer más compacto el código. Obteniendo de este modo un código más legible.

Imagen de Theodor Moise en Pixabay