Trabajando con Objetos en JavaScript

Última actualización: 01 - 11 - 2023

¿Qué es un objeto en JavaScript?

Un objeto es una agrupación de datos que tienen propiedades comunes que definen a un ente o elemento. También se puede definir como un tipo de dato no primitivo capaz de almacenar diferentes datos abstraídos de ese elemento. ¿No se entiende? Veamos un ejemplo de un objeto común, un teléfono móvil.

Un teléfono movil posee algunas propiedades como una marca, un modelo, un número asignado (según el país), color, batería o sistema operativo; se puede decir que las propiedades de un objeto son las características que lo definen. 🙂

Ahora el mismo ejemplo pero en código:

let telefonoMovil = {
  marca:"Zamzun",//Con Z porque no me pagan por hacerles publicidad
  modelo:"Z-10",
  numero:0666123456789,
  color:"black",
  bateria:"3500 mA",
  os:"Robot 5.3",//...
}

¿Cómo crear un objeto en JavaScript?

Sintaxis de un objeto

Los objetos son variables capaces de almacenar otras variables. La forma en que estos valores son almacenados siguen las mismas reglas de una variable primitiva salvo unas pequeñas diferencias.

  1. La declaración de un objeto literal y la asignación es igual que una variable
  2. Las propiedades que se van a almacenar en ese objeto son guardados dentro de signos de corchetes o llaves ( { } )
  3. Las propiedades y los valores son separados por dos puntos ( : ) y no por un signo de igualdad ( = )
  4. Cada propiedad va separada por un signo de coma ( , )
let nombreDelObjeto = {
propiedad:"Valor que se le quiera asignar",
}

Ya que tenemos las reglas claras para crear un objeto en JavaScript hagamos un objeto Pokémon para ir viendo cuáles métodos podemos utilizar para modificar las propiedades un objeto y porque en la portada de este artículo no está una Pokédex de gratis. 😆

⭕AQUÍ VIENE LO GEEK⭕

La analogía con una Pokédex es perfecta porque este funciona como una enciclopedia donde guarda la información de las criaturas (los pokemones) que usan los jugadores (o entrenadores) para eliminar o capturar la fauna de la región de turno.

La información de estas criaturas es mostrada en pantalla por este aparato donde indica diferentes características del Pokémon capturado.

Tyranitar
Información de Tyranitar

La información que vemos de este Pokémon la podemos escribir como un objeto literal de la siguiente manera:

let pokemon385 = {
  number:385,
  name:"Tyranitar",
  description:"Armor Pokémon",
  img:"/src/imgs/pokemon-385.jpg",
  type1:"Rock",
  type2:"Dark",
  height:`6´7"`,
  weight:"445.3lbs",
  numberBattled:999,
  info:"Its body can´t be harmed by any sort of attack, so it is very eager to make challenges against enemies.",
}

Utilizar objetos o clases de JavaScript (Que veremos en un artículo posterior) es una manera muy útil y dinámica de mostrar información por pantalla.

¿Cómo podemos acceder a la propiedad de un objeto de JavaScript?

La manera de ver una información específica en un objeto literal sigue una regla sencilla, usando la sintaxis del punto ( . )

Si queremos que se muestre una propiedad en concreto, en este caso la info de Tyranitar, accedemos a el de la siguiente forma:

console.log(pokemon385.info);

Se imprime la información requerida. También esta información se puede renderizar en pantalla manipulando el DOM pero para hacer los ejemplos sencillos se usarán las funciones de la consola. 😁

Todo esto está muy bien porque sabemos cuáles son las propiedades que posee ese objeto. ¿Qué pasaría si tenemos que manipularlo sin saber qué propiedades tiene? 🤔

¿Cómo obtener las propiedades de un objeto en JavaScript?

Es posible que como programadores nos toque trabajar en proyectos que ya están construidos y no sabemos cuál es la lógica o comportamiento de X componente, normal (supongo 😂), en el caso de los objetos la función getOwnPropertyNames nos retornará un array con las propiedades del objeto.

console.log(Object.getOwnPropertyNames(pokemon385));

Métodos para los objetos de JavaScript

Modificar una propiedad de un objeto

Para ello debemos acceder a la propiedad que queremos modificar y luego reasignarle el nuevo valor deseado.

pokemon385.img = "/src/imgs/new-pokemon-385-img.jpg";

Agregar una propiedad a un objeto

La sintaxis del punto ( . ) se va a repetir en diferentes métodos para los objetos de JavaScript. En este caso se puede agregar una nueva propiedad de la siguiente forma:

pokemon385.moves = [
  "Earthquake",
  "Dragon Dance",
  "Iron Head",
  "Crunch",
];

Eliminar propiedades de un objeto

Para hacerlo debemos usar la palabra reservada delete antes de acceder a la propiedad que queremos eliminar.

//Eliminando la propiedad info del objeto

delete pokemon385.info;

Object.freeze

Este método no permite que un objeto sea modificado. A pesar de que en el código manipulemos el objeto el resultado de ello no será mostrado.

//Congelando las propiedades de un objeto

Object.freeze(pokemon385);
pokemon385.type3 = "Sinister";

//El type3 no se mostrará

Object.seal

El método seal permitirá modificar los valores ya existentes en el objeto pero no dejará que se agreguen o quiten más parámetros.

//Sellando las propiedades de un objeto

Object.seal(pokemon385);
pokemon385.description = "Real Badass Pokémon";
console.log(pokemon385);

//El resultado es true 🤣

Spread Operator o Rest Operator

El Spread Operator permite unir dos objetos en uno solo creando un objeto nuevo. Veamos un ejemplo:

//Creando un objeto nuevo

let steroids = {
equipment:"Tyranitarite",
newName:"Mega Tyranitar",
}

//Uniendo el objeto nuevo con pokemon385

let upgradePokemon385 = {...pokemon385,...steroids}

console.log(upgradePokemon385);

Para usar el Rest Operator se colocan tres puntos seguidos antes del nombre del objeto seguido del siguiente objeto que se quiere fusionar.

Transformar un objeto a un arreglo

Para realizar esto usamos el método Object.entries, esto nos devolverá un array con las propiedades que tenga el objeto que hayamos convertido. Una vez el objeto es transformado podemos utilizar los métodos para los arrays y manipularlos de esa forma.

//Transformando un objeto a un array

let arrayPokemon385 = Object.entries(upgradePokemon385);
console.log(arrayPokemon385[1]);
console.log(arrayPokemon385.length);
console.log(arrayPokemon385.sort);
Volver