JS: Objetos

Teoría: Objetos en acción

En esta lección, vamos a explorar cómo construir y manipular objetos en JavaScript de forma clara y práctica. Para ello, trabajaremos con información de archivos, usando rutas de archivos como datos de entrada.

Extraer información de un archivo

Supongamos que tenemos la ruta de un archivo y queremos extraer su nombre y su extensión en un objeto.

const filepath = '/path/to/index.js';
const fileinfo = getFileInfo(filepath);
// {
//     filename: 'index.js',
//     extension: 'js'
// }

En Node.js, podríamos usar el módulo path para esto, pero aquí nos enfocaremos en cómo construir el objeto sin usar herramientas externas.

Paso 1: Obtener el nombre del archivo

Podemos dividir la ruta en sus partes y extraer el último elemento, que es el nombre del archivo. Para esto, utilizaremos el método split() junto con _.last() de la librería Lodash.

import _ from 'lodash';

const parts = filepath.split('/'); // Dividimos la ruta en partes
const filename = _.last(parts); // Tomamos el último elemento (el archivo)

Si filepath es '/path/to/index.js', obtendremos:

console.log(filename); // 'index.js'

Paso 2: Extraer la extensión del archivo

De forma similar, podemos separar el nombre del archivo en partes dividiendo por el punto (.) y tomar el último elemento:

const extension = _.last(filename.split('.'));

Si filename es 'index.js', será:

console.log(extension); // 'js'

Paso 3: Crear el objeto con la información

Ahora podemos reunir estos valores en un objeto y devolverlo:

const getFileInfo = (filepath) => {
  const parts = filepath.split('/');
  const filename = _.last(parts);
  const extension = _.last(filename.split('.'));

  return { filename, extension }; // Creación del objeto
}

Este enfoque es claro y directo: calcula todo primero y luego crea el objeto con los resultados.

Alternativa: Construcción progresiva del objeto

Otra opción es inicializar el objeto vacío al principio e ir agregando propiedades:

const getFileInfo = (filepath) => {
  const info = {}; // Inicializar objeto vacío

  const parts = filepath.split('/');
  const filename = _.last(parts);
  info.filename = filename;

  const extension = _.last(filename.split('.'));
  info.extension = extension;

  return info;
}

Este método es útil cuando algunas propiedades solo deben añadirse si cumplen ciertas condiciones. Por ejemplo, si quisiéramos agregar la extensión solo si existe:

if (extension) {
  info.extension = extension;
}

Aunque en la mayoría de los casos es preferible el primer método, esta alternativa es útil cuando los valores dependen de condiciones.

Sintaxis más corta para la creación de objetos

Cuando el nombre de las variables coincide con el nombre de las propiedades, JavaScript permite una sintaxis más corta y clara.

En lugar de hacer:

const info = { filename: filename, extension: extension };

Podemos simplemente escribir:

const info = { filename, extension };

Esto hace el código más limpio y fácil de leer. Además, si utilizamos nombres de variables diferentes, podemos combinar ambos estilos:

const filename = 'códica';
const ext = 'jpg';

const info = { filename, extension: ext };

El resultado sigue siendo un objeto con las propiedades correctas:

console.log(info); // { filename: 'códica', extension: 'jpg' }

Resumen

  • Podemos extraer información de un archivo dividiendo su ruta usando split().
  • Para simplificar la extracción del último elemento de un arreglo, usamos _.last() de Lodash.
  • Los objetos se pueden crear de dos formas:
    • Directamente con todas las propiedades.
    • Inicializándolos vacíos y agregando propiedades luego.
  • Siempre que los nombres de variables y propiedades sean iguales, podemos usar la sintaxis corta { variable } en lugar de { propiedad: variable }.
  • En la mayoría de los casos, es preferible definir el objeto directamente en lugar de llenarlo progresivamente.

Este método es una base fundamental para trabajar con objetos en JavaScript de manera eficiente y ordenada.

Completado

0 / 13