Codoritmo nace de ahí, no como reemplazo, sino como una forma de llevar esa misma idea a un entorno distinto.

PSeInt, creado por Pablo Novara, ha sido durante años una de las herramientas más utilizadas para enseñar programación básica en español. Si nunca lo has usado, puedes ver el proyecto aquí: PSeInt (sitio oficial).

Recuerdo que en mis primeros años en la universidad, ya hace más de una década, se convirtió en una forma de plasmar mis pensamientos. Me ayudaba a ordenar ideas y a traducir lógica en algo tangible, sin tener que preocuparme todavía por un lenguaje específico. Y eso es algo que se queda contigo.

A partir de ahí nace Codoritmo. Puedes ver el proyecto aquí: Codoritmo.

Qué hace Codoritmo (por ahora)

• Escribes pseudocódigo directamente en el navegador

• Generas diagramas de flujo automáticamente

• Exportas tu lógica a JavaScript (por ahora, con idea de expandirlo)

• Mantiene compatibilidad con el dialecto de PSeInt

Todo sin instalación y sin cambiar de contexto.

Pero más allá de las funcionalidades, la idea es simple: tener un entorno donde la lógica se pueda entender, visualizar y eventualmente llevar a código real.

Gran parte de esto viene de una intención clara: mantener el aprendizaje accesible, sin fricción y centrado en lo importante .

El navegador juega un papel clave aquí. Permite iterar rápido, construir con feedback real y, con el tiempo, abrir la puerta a experiencias más colaborativas.

Por eso estoy construyendo esto en público. No como un producto terminado, sino como algo que va tomando forma con el tiempo.

El proyecto es totalmente codigo abierto y puede correrse localmente. Lo puedes econtrar en este repositorio. Cualquier contribución para arreglar bugs or mejorar la funcionalidad es mas que bienvenida.

Después de una década en desarrollo de software, he aprendido algo simple: el razonamiento lógico sigue siendo una habilidad fundamental para cualquier programador, independientemente de las herramientas que use. Por eso este proyecto mantiene el espíritu original de PSeInt, enfocado en el pensamiento lógico, mientras también abraza nuevas formas de construir y experimentar.

Este es un espacio abierto para construir juntos, sin importar cómo programes. Ya sea que estés empezando y usando herramientas como IA para ayudarte, o tengas años de experiencia escribiendo todo desde cero, lo importante aquí es aprender, crear y mejorar. Las herramientas evolucionan, y la idea es disfrutar ese proceso. Si ves algo que se puede mejorar, no dudes en abrir un PR.

Codoritmo existe gracias a PSeInt. Es una forma de reconocer ese impacto y seguir explorando nuevas maneras de aprender dentro de la web.

Y si todo sale bien, quiza logremos ayudar a más personas a dar sus primeros pasos en el nundo de la lógica de la programación.

¿Qué es .filter()?

La función .filter() es como un colador mágico en la programación. Te permite seleccionar los elementos de un array que cumplan con una condición específica. Digamos que tienes una caja de donas, pero solo quieres las de chocolate (buen gusto). Usas .filter() para quedarte solo con esas delicias chocolatosas y olvidarte del resto.

Sintaxis básica

javascriptCopy codeconst nuevoArray = arrayOriginal.filter(function(elemento) {
  // condición que debe cumplir
  return condición;
});

Ejemplo sencillo: Filtrando números pares

Imagina que tienes una lista de números y solo te interesan los números pares (porque te gustan las cosas simétricas).

javascriptCopy codeconst numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const pares = numeros.filter(num => num % 2 === 0);

console.log(pares); // [2, 4, 6, 8, 10]

Aquí, num % 2 === 0 es la condición: si el número es divisible entre 2 sin residuo, ¡es un número par!

Ejemplo 2: Filtrando objetos en un array

No solo puedes filtrar números o strings, ¡también puedes hacerlo con objetos! Imagina que tienes una lista de personas y solo te interesan los que tienen más de 18 años para un club exclusivo (nada de menores aquí).

javascriptCopy codeconst personas = [
  { nombre: 'Ana', edad: 15 },
  { nombre: 'Juan', edad: 22 },
  { nombre: 'Luis', edad: 17 },
  { nombre: 'Marta', edad: 25 }
];

const mayoresDeEdad = personas.filter(persona => persona.edad >= 18);

console.log(mayoresDeEdad);
// [{ nombre: 'Juan', edad: 22 }, { nombre: 'Marta', edad: 25 }]

¿Por qué usar .filter()?

1. Es elegante: Con una sola línea de código puedes obtener los elementos que necesitas.

2. Es fácil de leer: Incluso si alguien más ve tu código, será fácil entender qué está haciendo.

3. No modifica el array original: Te devuelve uno nuevo con los resultados, pero tu array original queda intacto.

Bonus Tip: Filtrando con múltiples condiciones

Puedes ser aún más selectivo si lo necesitas. Por ejemplo, digamos que solo quieres las personas mayores de 18 que además se llaman "Juan" (porque eres fan de ese nombre):

javascriptCopy codeconst juanesMayores = personas.filter(persona => persona.edad >= 18 && persona.nombre === 'Juan');

console.log(juanesMayores);
// [{ nombre: 'Juan', edad: 22 }]

Conclusión

El método .filter() es súper útil y te ahorra muchas líneas de código cuando necesitas filtrar elementos de un array. Ya sea para números, strings, o incluso objetos, con .filter() puedes hacer que tu código sea más limpio, legible y eficiente. ¡Es como un súper poder para los arrays!

¿Qué es un espacio en blanco?

Primero lo primero, ¿qué cuenta como espacio en blanco? En JavaScript, los espacios en blanco no son solo los espacios normales, sino también:

• Saltos de línea (\n)

• Tabulaciones (\t)

• Retornos de carro (\r)

• Espacios de diferentes tipos, como los que aparecen por un maldito "copiar y pegar" que nos vuelve locos.

Sintaxis básica para encontrar espacios en blanco

En regex, el patrón \s se utiliza para encontrar cualquier carácter de espacio en blanco. Es como el "detective" de los espacios en tu texto. Mira este ejemplo básico:

javascriptCopy codeconst texto = "Hola    Mundo!";
const regex = /\s/g;
const espacios = texto.match(regex);

console.log(espacios); // Output: [" ", " ", " ", " "]

En este caso, \s busca cualquier espacio en blanco, y la bandera g asegura que busca en toda la cadena, no solo en el primer lugar donde aparece. En el ejemplo, encuentra cuatro espacios entre "Hola" y "Mundo".

¿Cómo reemplazar o eliminar espacios en blanco?

Si lo que quieres es deshacerte de esos molestos espacios o reemplazarlos, también es muy fácil con regex. Por ejemplo, podemos usar el método replace de JavaScript para quitar todos los espacios en blanco:

javascriptCopy codeconst sinEspacios = texto.replace(/\s/g, "");
console.log(sinEspacios); // Output: "HolaMundo!"

¡Adiós espacios! Ahora el texto está completamente "pegado".

¿Y si solo quiero los espacios al principio o al final?

Para esos casos donde los espacios se acumulan al principio o al final (como después de un "copiar y pegar"), puedes usar los siguientes patrones:

• ^\s+ para encontrar los espacios al inicio de la cadena.

• \s+$ para encontrar los espacios al final.

javascriptCopy codeconst textoConEspacios = "   Hola Mundo!   ";
const sinEspaciosInicio = textoConEspacios.replace(/^\s+/, "");
const sinEspaciosFinal = sinEspaciosInicio.replace(/\s+$/, "");

console.log(sinEspaciosFinal); // Output: "Hola Mundo!"

Conclusión

Usar regex en JavaScript para encontrar espacios en blanco es súper fácil y útil. Con el patrón \s, puedes identificar y manipular cualquier tipo de espacio, desde el más obvio hasta el que te deja rascándote la cabeza. Ya sea que quieras eliminar espacios al principio, al final o en cualquier parte, ¡regex te tiene cubierto!

const cadena = “Hola Mundo”;
let array = cadena.split(“”); // => [“H”,”o”,”l”,”a”,” ”,”M”,”u”,”n”,”d”,”o”]

Si lo que quieres es obtener un array de las palabras que conforman una cadena puedes usar el carácter espacio(” ”) como argumento del método split().

const cadena = “Hola Mundo”;
let array = cadena.split(“ ”); // => [“Hola”, “Mundo”]

Puedes pasar otros caracteres o incluso palabras completas como argumento al método split().

const cadena = “123-456-789”;
let array = cadena.split(“-”); // => [“123”,”456”,”789”]

Con el método some() podemos recorrer todo los elementos de un array y determinar si al menos uno de los elementos cumple con la condición deseada.

Digamos que tienes el siguiente arreglo:

const numeros = [1,3,4,5,7,9,0];

Si deseamos realizar una acción solo si arreglo contiene un número par, que en este caso es el número 4, podemos hacer uso del método some() de la siguiente manera:

const contieneNumeroPar = numeros.some(numero => numero % 2 === 0);
if(contieneNumeroPar) {
console.log(“El arreglo contiene un numero par”);
}

A como podrás imaginar, el método some() puede llegar a ser muy útil ya que te permite evaluar si alguno de los elementos del array cumple con cualquier condición que necesites verificar.

Saber si una variable es de tipo Array puede llegar a ser muy útil para implementar lógica condicional más compleja dentro de una función.

Para saber si una variable es de tipo Array, puedes hacer uso del método estático isArray() que forma parte del objeto nativo de JavaScript. El método se puede utilizar de la siguiente manera:

const números = [1, 2, 3]
console.log(Array.isArray(números)) //true

Este método regresara un valor booleano que puede ser evaluado en una condicional.

const frutas = [“manzana”,”naranja”,”sandia”];
if(Array.isArray(frutas)){
   //…lógica condicional
}

Si la lógica de tu código depende de que una variable tenga el tipo correcto, puedes hacer uso de la palabra reservada typeof, la cual regresa un string correspondiente al tipo de la variable de la siguiente forma:

console.log(typeof 42);
// salida: "number"

console.log(typeof 'blubber');
// salida: "string"

console.log(typeof true);
// salida: "boolean"

console.log(typeof variableSinDeclarar);
// salida: "undefined"

Puedes utilizar este método en una condicional para asegurarte que una variable es del tipo que esperas.

let edad = 20;

if(typeof edad === “number”) {
    console.log(“El usuario tiene ”+edad+” años”);
} else {
    console.log(“La variable no es un numero”);
}

Por naturaleza JavaScript es un lenguaje sincrono, pero una de sus principales caracteristicas es que es capaz de ejecutar código de manera asíncrona gracias a la funcionalidad de las Web API de cada navegador. Esto permite que mientras tu estes en una pagina web, multiples tareas se puedan ejecutar simultaneamente, esto hace posible que, por ejemplo, puedas ver un video en Youtube y ver los comentarios en tiempo real sin que una tarea interfiera con la otra.

Por mucho tiempo la manera en que se trabajaba con codigo asíncrono en JavaScript era por medio de funciones que ejecutaban el codigo dentro de ellas y que al final pasaban el resultado de esa operación a otra función conocida como "callback", que era pasada como segundo argumento a dicha función. En el siguiente ejemplo, utilizo setTimeout para simular el codigo asíncrono pero esto bien pordría ser una llamada a una API o la lectura de una base de datos.

function cuadrado(numero, callback) {

  setTimeout(function(){
      var resultado = numero * numero;
      calback(resultado);
  },5000);

}

function cubo(numero, callback) {
   setTimeout(function(){
       var resultado = numero * numero * numero;
      calback(resultado);
  },3000);
}

function duplicar(numero, callback){
    setTimeout(function(){
        var resultado = numero * 2;
      calback(resultado);
  },4000);
}

cuadrado(2,function (numeroCuadrado){
    cubo(numeroCuadrado,function(numeroAlCubo){
        duplicar(numeroAlCubo,function(numeroDuplicado){
            console.log(numeroDuplicado);//128
        });
    });
});

Quiza este ejemplo no muestre la totalidad del problema ya que son operaciones sincronas, pero puedes ver como cada funcion pasa el resultado de su operación a la función callback, y al final tenemos 3 funciones anidadas. Te imaginas si necesitaras realizar aun mas operaciones. Seria muy dificil de leer y de mantener. A este problema se le ha conocido como "callback hell😈"

Las promesas surgen para dar una solucion a este problema y facilitar la vida de los programadores.

Promesas

Las promesas son una manera de trabajar con código asíncrono y reducir el numero de funciones callbacks. Esta son creadas por medio de la instanciación de la clase Promise.

    const promesa = new Promise();

Una promesa es usualmente definidad como la representació de un valor que eventualmente estara disponible para su uso.

A pesar de que han existido por algun tiempo, se convirtieron en parte estandar de JavaScript en su version ES2015.

¿Cómo funcionan las promesas?

Una vez que una promesa a sido invocada, esta entrara en estado "pendiente". Esto significa que el resto del codigo que invoco continuara la ejecución de manera normal hasta que la promesa resuelva un valor o sea rechazada debido a un error.

Al instanciar, o crear una nueva promesa, el constructor puede tomar dos argumentos. Los argumentos resolve y reject sirven para controlar el estado de una promesa despues de que entra en estado "pendiente".

El metodo resolve sirve para pasar el valor que fue resultado de la operación que ocurrio dentro de la promesa, si todo ocurrio correctamente.

El metodo reject sirve para pasar un valor que represente una excepción o error occurrido dentro de la promesa.

Utilizando promesas podemos escribir el ejemplo anterior de la siguiente manera:

function cuadrado(numero) {
    return new Promise((resolve, reject)=>{
          setTimeout(function(){
              var resultado = numero * numero;
              resolve(resultado);
          },5000);
    });
}

function cubo(numero) {
    return new Promise((resolve, reject)=>{
         setTimeout(function(){
          var resultado = numero * numero * numero;
          resolve(resultado);
      },3000);
    });
}

function duplicar(numero){
  return new Promise((resolve, reject)=>{
         setTimeout(function(){
             var resultado = numero * 2;
              resolve(resultado);
          },4000);
   }); 
}

cuadrado(2)
.then(cubo)
.then(duplicar)
.then((numero)=>{
    console.log("Cualquier otra operacion con un callback");
    return numero;
})
.then(console.log) //128

A primera instancia, pareciera que el codigo se vuelve más complejo, pero si lo lees poco a poco entederas la lógica. Cada función en lugar de regresar un valor en especifico, regresa una "Promesa" de que eventualmente resolvera un valor. Al momento de invocar la primera función que regresa una promesa, podemos capturar su resultado utilizando el metodo then al cual le tenemos que pasar una funcion para utilizar el valor que la promesa resuelva. A como vez esto hace que el código sea más facil de leer.

Las promesas tambien nos permiten manejar excepciones o errores por medio del metodo catch este metodo es invocado cuando algo falla dentro de una promesa o cuando esta pasa a estado "rejected". Aqui te dejo un ejemplo:

function validarNumero(valor) {
    return new Promise((resolve, reject)=>{
        isNaN(valor) ? reject(`${valor} no es un numero`) : resolve(valor);
    });
}

function cuadrado(numero) {
    return new Promise((resolve, reject)=>{
          setTimeout(function(){
              var resultado = numero * numero;
              resolve(resultado);
          },5000);
    });
}

function cubo(numero) {
    return new Promise((resolve, reject)=>{
         setTimeout(function(){
          var resultado = numero * numero * numero;
          resolve(resultado);
      },3000);
    });
}

function duplicar(numero){
  return new Promise((resolve, reject)=>{
         setTimeout(function(){
             var resultado = numero * 2;
              resolve(resultado);
          },4000);
   }); 
}

validarNumero(2)
.then(cuadrado)
.then(cubo)
.then(duplicar)
.then(console.log) //128

validarNumero("Hola")
.then(cuadrado)
.then(cubo)
.then(duplicar)
.then(console.log)
.catch(console.log)// "Hola no es un numero"

Cuando se genera una excepción, el resto de funciones encadenadas con el metodo then no seran ejecutadas y el codigo se saltara directamente al metodo catch.

Esta ejemplo te parecera un poco extraño, pero esto bien podria servir para validar si un usuario existe en una base de datos y ejectutar una acción distinta si el usuario no existe o seguir con el resto del codigo en caso de que si exista.

Las promesas son muy utiles para hacer tu codigo mas facil de leer y de mantener, sin contar que muchos de los modulos de JavaScript que trabajan con funciones asincronas, hacen uso de promesas. Asi que es muy importante que conoscas como funcionan.

Espero que hayas entendido los fundamentos de las promesas en JavaScript, pero si tienes alguna pregunta, no dudes en escribirme y seguirme en mi cuenta de Instagram .

La propiedad length regresa un número entero que representa el numero de elementos que forman parte de un arreglo.

const colores = ["verde","amarillo","azul"];
cosole.log(colores.length); //  3

Esta propiedad puede resultar util de muchas formas. Como por ejemplo para obtener el ultmimo elemento de un arrego.

Si quires recordar como funcionan los arreglos en JavaScript puedes visitar el siguiente link: trabajando con arrays

const personas = ["Luis","Maria","Andres","Ana","Maria"]; //Maria esta repetida

Existen diversas formas para remover los nombres duplicados y aqui primero te mostrare una forma complicada pero que puede llegar a ser muy flexible y útil.

Array.prototype.reduce()

El metodo reduce puede ser un poco dificil de entender al principio pero es un metodo muy poderoso.

Todo arreglo en JavaScript tiene acceso a este método el cual funciona muy similar al metodo map() con una distintiva diferencia. El primer argumento de este metodo es una funcion la cual a su vez recibe dos argumentos el primero conocido como el "acumulador" y sera el resultado que el metodo regresa al final de la ejecución y el segundo argumento de la funcion "callback" es el valor actual de cada elemento del arreglo dentro del ciclo.

El segundo argumento del método reduce() es es el valor inicial del acumulador. En nuestro caso como queremos construir un nuevo array con elementos únicos el valor inicial del método sera un arreglo vacío [ ].

Para este propósito podemos utilizar este metodo para generar un array con elementos unicos de la siguiente manera:

const personas = ["Luis","Maria","Andres","Ana","Maria"]; //Maria esta repetida

const personasUnicas = personas.reduce((acumulador,persona)=>{
    return !acumulador.includes(persona) ? acumulador.concat(persona) : acumulador;

},[]);

console.log(personasUnicas);// ["Luis","Maria","Andres","Ana"];

El código anterior parece más complicado de lo que es, pero si lo analizamos le encontraras la lógica.

Invocamos el método reduce sobre el arreglo original "personas" el método toma una función y el valor inicial de nuestro acumulador que es un array vacio donde pondremos a las personas únicas.

Dentro del callback en esta linea con la ayuda de un operador ternario verificamos si el nombre ya existe en el array regresamos el mismo array y no actualizamos el valor del acumulador pero si el nombre no existe en la nueva lista, regresamos una copia del acumulador y le agregamos el nombre.

//........
return !acumulador.includes(persona) ? acumulador.concat(persona) : acumulador;
//.........

Y al final obtendras una copia del arreglo con nombres únicos.

Esta forma te parecera algo complicada, pero puede llegar a ser muy flexible ya que la puedes usar para comparar propiedades de objetos.

Clase Set

Y ahora te muestro una manera muy facil:

const personas = ["Luis","Maria","Andres","Ana","Maria"]; //Maria esta repetida
const personasUnicas = [...new Set(personas)];

Asi de sencillo! La clase set es un nuevo tipo de dato introducido en ES6, y se parece mucho a un array pero su principal característica es que no puede tener elementos repetidos.

Al inicializar set con un arreglo como parametro, este automaticamente remueve los valores duplicados. Y regresa un valor del tipo Set el cual podemos destructurar con el operador ... para crear un nuevo array con valores únicos. Este método funciona con cualquier tipo de arreglo de valores primitivos.

Si necesitas un recordatorio o no estas muy familiarizado con el funcionamiento y la sintaxis de los arreglos en JavaScript puedes visitar el siguiente enlace: trabajando con arreglos.

Para poder insertar un elemento en una posición específica de un array haremos uso del método splice(). Este metodo puede ser muy util, pero hay que usarlo con cuidado ya que tambien puede servir para borrar elementos.

El metodo splice() toma tres argumentos. El primero es el índice inicial: el lugar donde insertaremos el elemento. El segundo es el numero de elemento que quieres borrar, pero en este caso estamos añadiendo entonces pasaremos el número 0 en todos los ejemplos.

Digamos que tienes este array:

const frutas = ['naranja','mango'];

Puedes agregar un elemento despues de "naranja" de la siguiente forma:

frutas.splice(1,0,'fresa');
//frutas === ['naranja','fresa','mango']

Y no estamos limitados a insertar un solo elemento a la vez, sino que también puedes insertar multiples elementos de la siguiente manera:

frutas.splice(1,0,'fresa','mandarina');
//frutas === ['naranja','fresa','mandarina','mango']

Para insertar un elemento en la primera posición podemos hacer lo siguiente:

frutas.splice(0,0,'fresa');
//frutas === ['fresa','naranja','mango']

Tambien podemos utilizar el metodo join() si quieres usar cualquier otro caracter o cadena como separador de los elementos del array.

const myArray = [2,3,4,5,6];
myArray.join("-"); // "2-3-4-5-6"

A veces, son los pequeños detalles los que hacen una gran diferencia. Una de las cosas que siempre me parecía un poco molesta a la hora de programar era lo dificil que es reconocer ciertas letras o encontrar ciertor errores de sintaxis debido al tipo de fuente que viene por defector en algunos editores. Es por eso que hoy te comparto 4 de las mejores fuentes para programar que haran de tu experiencia algo completamente diferente.

Algo que caracteriza a algunas de estas fuentes es el uso de ligaduras que permiten al combinar ciertos caracteres obtengamos una presentacion más reconocible de lo que representan.

Fira Code

Esta ha sido una de mis fuentes favoritas por mucho tiempo y una de las mas utilizadas por programadores de todos los niveles. Esta fuente esta basada en Fira Mono de Mozilla. Esta es la fuente que cuenta con el mayor numeros de ligaduras comparada al resto de esta lista. Definitivamente tienes que probarla.

Es una fuente que no es demasiado grande ni muy pequeña lo cual la hace perfecta para la mayoria de resoluciones de monitores sin necesidad tener que ajustar el tamaño en tu editor.

Uno de los puntos fuertes de esta fuente es su legibilidad ya que caracteres como el número 0 y la letra O se ven completamente distintos, asi tambien como el número 1 comparado con las letra I y L.

Descargar Fira Code

JetBrains Mono

Absolutamente debo de contarte sobre esta fuenta ya que es mi nueva favorita y la que uso diariamente. Algo que me gusta mucho es la simpleza del diseño pero a la vez la gran atención al detalle que le pusieron.

Los caracteres minúsculos tiene una altura ligeramente mayor comparados a Fira Code y esto hace que las lineas de codigo se vean de alguna manera más uniformes. Esta fuente incluye 138 ligaduras que son mas que suficientes para hacer que los operadores lógicos, aritméticos y demás sean facilmente reconocibles. Esto te puede ahorrar valioso tiempo depurando errores de sintaxis.

Descargar JetBrains Mono

Monoid

La siguiente fuente en la lista también es muy popular. Esta cuenta con un menor numero de ligaduras pero aun asi cubre los principales caracteres y expresiones de los lenguajes de programación mas populares.

La principal característica de esta fuente, es que es que los caracteres son relativamente más altos comparados al resto de fuentes de esta lista. Esta facilita mucho la legibilitad.

El diseño de esta fuente es semi-condensado lo que hace que los caracteres parezcan estar un poco mas "apretados" entre si: Lo cual puede llegar a ser util ya que ocupan menos espacio horizontal y por ende puede llegar a caber mas codigo en una sola linea. Supongo que es cuestion de gustos, puedes probarla para ver que tal te parece.

Descargar Monoid

Hasklig

Esta es la ultima fuente de está lista pero no por eso significa que es mala. De hecho si te dedícas a programar en Haskell esta puede ser la fuente de tus sueños. Ya que cuenta con espacios balanceados para resaltar los glifos y representarlos más vividamente.

En lo que respecta al diseño de esta fuente, a pesar de ser monoespaciada tiene la apariencia de san-serif lo cual hace que se vea muy limpia en el editor.

Descargar Hasklig

Estas son algunas de mis fuentes favoritas. Pruebalas a vel cual te gusta más y si tienes alguna otra que te gustaria que otros conozcan, escribeme a contact@kervin.tech😎 para agregarla a la lista.

Supongamos que tenemos el siguiente arreglo:

const nombres = ["Juan","Maria","Yolanda","Roberto"];

Sabemos que podemos acceder a cada elemento del array nombres por medio de su indice. Es decir que el primer nombre se puede obtener con nombres[0], el segundo con nombres[1] y asi sucesivamente. Si no sabias esto puedes darte una vuelta en el articulo sobre como trabajar con arreglos.

Entonces, para obtener el ultimo elemento solo necesitas saber cual es su indice el cual se puede calcular facilmente al saber el tamaño del arreglo por medio de la propiedad length. Usando esa propiedad podemos aplicar la siguiente formular .length - 1.

Y asi lograremos acceder al ultimo elemento del arreglo.

const ultimoElemento = nombres[nombres.length - 1]

Por ejemplo en el caso de un usuario que sube una image llamada "Mi nueva foto.jpg", y por motivos de funcionalidad es necesario guardarla en el servidor con el nombre "Mi-nueva-foto.jpg".

Para sustituir los espacios en blanco por cualquier otro caracter, o inclusive para remover los espacios en blanco, podemos hacer uso de expresiones regulares .

Aqui un ejemplo:

const nombreImagen = 'Mi nueva foto.jpg'
nombreImage.replace(/\s/g, '') //Mi-nueva-foto.jpg

El meta caracter \s sirve para encontrar cualquier espacio en blanco por medio de una expresion regular. Y la bandera g le dice a JavaScript no solo actuar sobre el primer caracter que encuentre sino todos los que existan en la cadena de caracteres.

El valor de la variable original no cambia. Entonces, si quieres usar el nuevo valor en alguna otra parte de tu codigo, debes almacenarlo en otra variable.

const nombreImagen = 'Mi nueva foto.jpg'
const nuevoNombreImage = nombreImagen.replace(/\s/g, '') //Mi-nueva-foto.jpg