Eliminar una columna de console.table en JavaScript

Autor: | Última modificación: 10 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

En este post, te enseñaremos cómo eliminar una columna de console.table en JavaScript. El momento en el que un proyecto de programación es realmente testeado es cuando lo pintamos en la pantalla. Para ello, existen algunos comandos que nos permiten acceder a los métodos de la consola y definir cómo se pintan nuestros elementos. El comando console.table, a diferencia del console.log, nos permite pintar los elementos de un array o un objeto en formato de tabla.

¿Cómo funciona console.table en JavaScript?

En nuestro post sobre console.table en JavaScript te explicamos que este método pinta de manera automática los elementos de un array u objeto en una tabla. Esta tabla se organiza con los elementos en uno de los ejes (filas) y sus propiedades en otro (columnas). Ten presente que la primera propiedad y columna que tendrá esta tabla será el index del objeto pintado. Si este es un array, lo que veremos será la progresión de números que define el índice de un array. Esta es la única propiedad que siempre estará presente en la tabla y no podremos eliminar.

Ahora, puede que haya otras propiedades en tu objeto que no quieres pintar en pantalla, sea porque son cálculos que no necesitan verse o porque simplemente no es relevante para el proyecto. Para solucionar esto, deberemos eliminar una columna de console.table en JavaScript. A continuación te mostramos cómo.

¿Cómo eliminar una columna de console.table en JavaScript?

Para eliminar una columna de console.table en JavaScript debemos pensar primero en el elemento que estamos pintando en pantalla y sus características. Piensa que tenemos un array con distintos equipos A, B, C. Cada uno de estos equipos, además de tener un índice, tiene las propiedades que ves en la tabla a continuación:

(Index)namematchesWonmatchesDrawmatchesLostpoints goalsForgoalsAgainst
0‘A’002015
1‘B’2006117
2‘C’101377
Ejemplo de tabla: resultado de pasar un array por console.table

Teniendo en cuenta que el elemento pintado es un array, la mejor manera de transformar sus datos y eliminar una columna de console.table en JavaScript será aplicar un método para manipular los elementos del array. Uno de los métodos que podríamos usar sería el método map, que nos devuelve un nuevo array con los elementos originales transformados.

Entonces, suponiendo que la tabla anterior se basa en el array teams, podemos escribir las siguientes líneas de código. En estas, creamos una constante en la que guardamos el nuevo array que queremos crear usando el método map. Supongamos que lo que queremos es obtener el mismo array, pero sin la columna matchesDraw, pues no cambia nada en el resultado.

Para ello, insertaremos en el método map únicamente las propiedades que queremos tener en la tabla. Así, se puede eliminar una columna de console.table en JavaScript, dado que la propiedad que no insertemos en el método se elimina. En este proceso, podemos aprovechar para modificar los nombres de las columnas que sí queremos mantener:

const modifiedArr = teams.map [elem => {

return {

nombre: elem.name,

partidos ganados: elem.matchesWon,

partidos perdidos: elem.matchesLost,

puntos: elem.points,

goles a favor: elem.goalsFor,

goles en contra: elem.goalsAgainst,

}

}

Ahora, insertando la línea de código console.table (modifiedArr) pintaremos en pantalla la misma tabla anterior, sin la columna de matchesDraw y con los nombres de las propiedades en español.

¿Cuál es el siguiente paso?

Ahora que sabes cómo eliminar una columna de console.table en JavaScript, el siguiente paso en tu camino a dominar este lenguaje es dedicarte a aprender no solo su teoría, sino también su práctica. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde en pocos meses aprenderás todo lo necesario para ser un experto en desarrollo web, dominando lenguajes de programación como JavaScript, CSS y HTML. ¡Anímate a inscribirte!

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado