10. JS, Objetos básicosObjetos básicos en JavaScript

Los objetos son estructuras de información que contienen propiedades (variables) y métodos (funciones). Al tener variables y funciones son mini programas independientes que realizan tareas concretas.

Motivación de los objetos

En informática, siempre se ha buscado encontrar un símil de la vida real para ilustrar procesos o herramientas con el objetivo de facilitar su compresión. De la misma forma, la creación de los objetos sigue el mismo objetivo.

Un objeto en la vida real, tiene propiedades y realiza acciones. Como ejemplo que ilustre este hecho, tenemos un coche. Un coche tiene propiedades, como el color, el número de ruedas, la cilindrada, entre otras muchas. Un coche también realiza acciones, pude girar, puede acelerar, frenar, ir marcha atrás, y un largo etcétera.

La gracia de los objetos es que puedes crear una unidad de procesamiento independiente capaz de hacer tareas y que tiene toda la información que necesita para llevarlas a acabo.

Declarando mi objeto JavaScript

Hay varias formas de declarar un objeto en JavaScript, pero la forma más sencilla es utilizando la notación literal:

 var coche = {
   marca: "Mercedes-Benz", // Separa propiedad con una coma
   modelo: "180d Sedán 7G-DCT",
   color: "blanco",
   peso: 1000,
   combustible: "diesel" //Coma no necesaria, es la última
};

Como puedes ver se declara igual que cualquier variable, con la palabra reservada var, seguido del nombre del objeto y entre llaves el nombre de la propiedad o subvariable. La cual, se escribe como pares de valores nombre : valor separados con dos puntos. Cada una de las propiedades (variables), se separa con una coma respecto a las otras.

Accediendo a las propiedades del objeto

Para poder acceder a las propiedades creadas anteriormente en el objeto coche, utilizarás o bien la notación de puntos o los corchetes.

Notación puntos:

var cadenaTexto = "Tengo un " + coche.marca + " modelo "
                 + coche.modelo + " de color " + coche.color;
alert( cadenaTexto );

Con corchetes:

var cadenaTexto = "Tengo un " + coche["marca"] + " modelo "
                 + coche["modelo"] + " de color " + coche["color"];
alert( cadenaTexto );

Como ves, es más sencillo utilizar notación de puntos, pero la desventaja de utilizar notación de puntos es que no podemos acceder a propiedades declaradas con varias palabras o que empiecen por número.

Si tuvieras el objeto:

 var persona = {
   nombre: "Raül",
   edad: 45,
   'color pelo': "moreno",
   genero: "masculino"
};

No podrías acceder a su propiedad 'color pelo' con:

persona.color pelo; // Daría error

Tendrías que hacerlo con corchetes, así:

persona["color pelo"];

Cambiar o actualizar propiedades de los objetos

También puedes cambiar el valor de las propiedades de forma fácil de la siguiente manera:

Volvemos al ejemplo del objeto coche.

coche.marca = "BMW";
coche.modelo = "X6 xDrive30d";
coche.color = "negro";
coche.peso = "1200";
coche.combustible = "gasolina";
// También podrías hacerlo con corchetes
coche["color"] = "negro";

Objetos que contienen otros objetos

También puedes crear objetos dentro de un objeto. La sintaxis sería la siguiente:

 var persona = {
   nombre: "Raül",
   edad: 45,
   'color pelo': "moreno",
   genero: "masculino",
   jersey: {
          color : "azul",
          mangas : true
   }          
};

Para leer:

alert(persona.jersey.color);

Para actualizar:

persona.jersey.mangas = false;

Los métodos en los objetos JavaScript

Al igual que las propiedades, los métodos se declaran dentro del objeto de la siguiente forma:

 var persona = {
   nombre: "Raül",
   edad: 45,
   'color pelo': "moreno",
   genero: "masculino",
   andar : function() {
      alert ("Estoy andando");
   },
   correr : function() {
      alert ("Estoy corriendo");
   }
};

Como las propiedades, los métodos se declaran igual, nombre del método seguido de dos puntos y una coma para separar cada declaración. La diferencia con las propiedades es que el valor es una función anónima. Esta función puede tener parámetros o no.

Para acceder a los métodos de los objetos lo hacemos muy parecido a como accedemos a sus propiedades:

persona.andar();

La única diferencia es que tenemos que poner los paréntesis al final del nombre del método. Si el método recibiera parámetros, se los pondrás dentro del paréntesis.

Nota: ¡Recuerda! Cuando hablamos de objetos, las propiedades son variables y los métodos son funciones. El concepto es exactamente el mismo.

Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!