3 métodos que siempre tengo en utils.js

Métodos de ayuda que añado a todos mis proyectos.

3 min readJan 29, 2021

Tools in utils.js — Photo by Barn Images on Unsplash

Todas esa funciones que no tienen que ver con la lógica de negocio de nuestra aplicación (y que usaremos a menudo en diferentes sitios) las deberíamos guardar en un archivo utils.js.

Bueno, en uno o varios, dependiendo de la cantidad de funciones que tengamos y de si queremos agrupar las que tengan un contexto común: array.utils.js, currency.utils.js, locale.utils.js,…

La estructura de estos archivos, sus carpetas o sus contextos pueden variar según nuestros gustos, pero hay ciertas funciones que siempre necesito en todos mis proyectos.

Aquí os dejo 3 de ellas:

Formatear fechas

Este es uno de los más habituales en cualquier proyecto: Mostrar fechas y horas según la localización del usuario.

Lo mejor es guardar fechas como timestamp (en milisegundos) para poder tener su valor absoluto sin preocuparnos de franjas horarias y además convertirlas fácilmente con new Date().

const formatDateFull = (date) => new Date(date).toLocaleString();
// "29/1/2021 9:57:51"const formatDate = (date) => new Date(date).toLocaleDateString();
// "29/1/2021"const formatTime = (date) => new Date(date).toLocaleTimeString();
// "9:57:51"

Por defecto, los números de una cifra se muestran sin un cero delante (leading zero), pero podemos configurar esto pasándole un objeto de opciones a cualquiera de estas 3 funciones:

const locale = navigator.language;
const options = {day: '2-digit', month: '2-digit', year: '2-digit'};const formatDate = (date) => {
  return new Date(date).toLocaleDateString(locale, options);
};
// "29/01/21"

+info de Date aquí.

Extra: obtener el timestamp de fecha y hora actuales.

const now = () => Date.now();

Clonar arrays y objetos

Duplicar objetos y arrays en JavaScript puede ser complicado y no funcionar como esperamos, ya sea porque los pasamos por referencia o porque solo conseguimos un clonado superficial (shallow).

Por eso me gusta tener esta simple función para conseguir un clonado total (deep clone).

const clone = (obj) => JSON.parse(JSON.stringify(obj));

Cuidado: si el objeto que le pasemos tiene alguna función, no se copiará.
Ya sea un método del objeto o un elemento del array, no nos servirá esta forma de clonado.

+info de clonado de objetos aquí.

Formatear números

Al igual que con las fechas, nos interesa convertir los números según dónde se encuentren nuestros usuarios. Así, podremos mostrar separadores de miles y de decimales con puntos o comas sin preocuparnos.

const formatNum = (num) => Intl.NumberFormat().format(num);
// 12345.6789 --> "12.345,678"

Por defecto cogerá el idioma del navegador para elegir separadores de miles y decimales, y dejará hasta 3 decimales en el número formateado.

Pero también acepta un locale y un objeto de opciones, como pasaba con las fechas:

const locale = 'en';
const options = { style: 'currency', currency: 'GBP', maximumFractionDigits: 2};const formatNum = (num) => {
  return Intl.NumberFormat(locale, options).format(num);
};
// 12345.6789 --> "£12,345.68

También podemos utilizar Intl para las fechas, pero me parece más corto y cómodo utilizar Date para esos casos.

Seguro que hay muchas más funciones que podemos tener en nuestro fichero de utils, pero para mí estas no pueden faltar. 😊

Esto ha sido todo, ¡gracias por leer hasta aquí!

📖 Sigue leyendo…

Te dejo por aquí otros artículos de JavaScript que he escrito:

Cuándo usar Debounce y Throttle en JavaScript

Limitar llamadas y ejecuciones para mejorar el rendimiento de nuestra aplicación.

jorgecaster.medium.com

¿Cómo omitir propiedades en un objeto JavaScript?

Muchas veces necesitaremos usar nuestros objetos JavaScript con alguna modificación: hacer llamadas a endpoints…