Los objetos en Javascript son una colección de datos y/o funcionalidades relacionados. Estos suelen tener variables y funciones. A las variables se le llaman propiedades y a sus funciones se le llaman métodos.
Video Explicativo
Código al que hago referencia en el vídeo
En una publicación anterior hice referencia a los métodos más comunes para recorrer un array y se les llama métodos por que el array funge como un objeto de javascript, cuando le ponemos a los arreglos por ejemplo un forEach este está definido como una función del objeto Array, para realizar un proceso específico.
Si deseas más información sobre el método forEach puedes ingresar en el siguiente enlace donde lo explico a nivel general:
Como recorrer un Array con el método ForEach en Javascript
Ahora bien, hablamos de objetos, desde el paradigma de Programación Orientada a Objetos, si deseas más información sobre este paradigma puedes acceder al siguiente enlace de mdn Mozilla:
JavaScript orientado a objetos para principiantes
Ejemplo de Objetos en Javascript
El siguiente tramo de código es un Objeto en Javascript:
const vaso = {
Material: 'Vidrio',
Estado: 'Vacío'
};Explicación del código
En este caso el objeto vaso tiene dos propieadades, Material y Estado, con sus valores correspondientes, la cadena ‘Vidrio’ y la cadena ‘Vacío’
Como acceder a las propiedades de un Objeto
En el tramo de código del ejemplo, para acceder por ejemplo al Material del Objeto vaso, se debe hacer de la siguiente forma:
vaso.MaterialSi quisieramos imprimir el Material del Objeto vaso en consola escribiamos lo siguiente:
console.log(vaso.Material);En este caso se imprimiría en consola, la cadena de texto ‘Vidrio’. Si quisieramos imprimir en consola el Estado del objeto vaso el proceso sería el mismo con la diferencia de que en vez de escribir vaso.Material, escribiriamos vaso.Estado.
Diferencias entre un Array y un Objeto en Javascript
Ya había dicho que un Array era también un objeto, especialmente porque podía implementar métodos para realizar funciones especificas para ingresar registros en un arreglo, eliminar registros, recorrer un array entre un sin fin de opciones.
Sin embargo un array en la práctica es un tipo de variable, que permite almacenar de manera ordenada registros, en la que se puede acceder a los datos mediante un índice numérico, los objetos en cambio almacenan un índice tipo llave, esta llave tiene un nombre, luego esta llave debe tener asociado un valor.
En el ejemplo del objeto vaso que enunciaba al comienzo, había dos llaves, la llave Material y la llave Estado, estas llaves a su vez tienen los valores asignados de Vidrio y Vacío.
Como recorrer un objeto en Javascript
Existen tres métodos del objeto Object que permiten trabajar sencilla y efectivamente con los objetos, estos métodos se explican a continuación.
Como acceder a las llaves de un objeto
Ya se ha explicado que un objeto es una versión avanzada de un arreglo, donde el índice en vez de un número como en los arrays es una llave que es un nombre es específico, ahora bien en Javascript existe una forma específica de acceder a las llaves de un objeto, a continuación se muestra el código para mostrar las llaves del objeto vaso del ejemplo inicial.
console.log(Object.keys(vaso));La salida del presente código sería la siguiente:
[ 'Material', 'Estado' ]Como acceder a los valores de un objeto
Los valores son los registros asociados a las llaves de un objeto y la forma de extraer estos valores de un objeto es por medio del método values el código para mostrar en consola los valores del objeto sería el siguiente:
console.log(Object.values(vaso));La salida para esta línea de código sería la siguiente:
[ 'Vidrio', 'Vacío' ]Como mostrar todas las llaves y valores respectivos de un Objeto
En este punto es fácil deducir que si usamos el método keys y el método values del objeto Object podríamos extraer en conjunto las llaves y valores juntos de un objeto, sin embargo existe otro método llamado entries, que junta las llaves y valores en una sola salida, el código respectivo sería el siguiente:
console.log(Object.entries(vaso));La salida para esta línea de código sobre el objeto vaso, sería la siguiente:
[ [ 'Material', 'Vidrio' ], [ 'Estado', 'Vacío' ] ]Como pueden ver, se imprime un array que dentro tiene dos array, el primero tiene todas las llaves y el segundo tiene todos los valores.
Como asignarle un objeto a otro
Es posible fusionar objetos en Javascript, para esto existe un método del objeto Object llamado assign, en el ejemplo a continuación crearé un objeto llamado medidasVaso, este objeto tendrá como llaves un tamaño un color y un precio:
const medidasVaso = {
tamano : 'Grande',
Color: 'Azul',
Precio: 100
}Ahora con la siguiente línea de código le asignaré las llaves y valores del objeto medidasVaso al objeto vaso:
Object.assign(vaso, medidasVaso);
El objeto vaso, ahora está fusionado con medidasVaso, si lo imprimo por consola con el código console.log(vaso); el sistema mostraría el siguiente resultado:
{
Material: 'Vidrio',
Estado: 'Vacío',
tamano: 'Grande',
Color: 'Azul',
Precio: 100
}Como recorrer un array de Objetos en Javascript
Los array pueden trabajar en conjunto con los objetos en Javascript, un objeto puede contener la cantidad de arrays que se deseen crear y cualquier array puede contener la cantidad de objetos que se requieran.
Un array puede contener cualquier tipo de dato en sus registros, lo más común es que el array tenga registros con el mismo tipo de dato y que los objetos si tengan variedad en los tipos de registros que almacenan, pero para javascript todo está abierto a lo que se requiera desarrollar.
En el ejemplo a continuación se creará el array estudiantes y dentro de este array se crearan objetos con nombreCompleto, correoElectrónido y edad:
const estudiantes = [
{
nombreCompleto: 'Mauricio Sevilla',
correoElectronico: 'hola@configuroweb.com',
edad: 40,
},
{
nombreCompleto: 'Juan Usuario',
correoElectronico: 'jusuario@cweb.com',
edad: 25,
},
{
nombreCompleto: 'Pedro Perez',
correoElectronico: 'pperez@cweb.com',
edad: 17,
},
{
nombreCompleto: 'Daniel Gomez',
correoElectronico: 'dgomez@cweb.com',
edad: 22,
},
];Utilización del Método forEach
A continuación vamos a recorrer el arreglo con un método forEach, para mostrar el nombre y el correo de los objetos del array estudiantes:
estudiantes.forEach(estudiante => {
console.log(`El estudiante ${estudiante.nombreCompleto} tiene el correo electrónico ${estudiante.correoElectronico}`);
});La salida de este código sería la siguiente:
El estudiante Mauricio Sevilla tiene el correo electrónico hola@configuroweb.com
El estudiante Juan Usuario tiene el correo electrónico jusuario@cweb.com
El estudiante Pedro Perez tiene el correo electrónico pperez@cweb.com
El estudiante Daniel Gomez tiene el correo electrónico dgomez@cweb.comUtilización del Método map
En el siguiente ejemplo voy a actualizar el nombre del objeto del Array estudiantes por mayúscula sostenida:
estudiantes.map((estudiante) => {
const nombreCompleto = estudiante.nombreCompleto.toUpperCase();
console.log(nombreCompleto);
});La salida de este código sería la siguiente:
MAURICIO SEVILLA
JUAN USUARIO
PEDRO PEREZ
DANIEL GOMEZCualquier duda estará al pendiente, te invito a recorrer este blog que está lleno de aplicaciones gratuitas de libre distribución, tutoriales y aplicaciones premium, te invito me sigas en mi canal de youtube allí constatemente subo video tutoriales relacionados con el desarrollo web.
