Curso desde cero de JavaScript Capítulo 15 - Objetos

Los objetos de los lenguajes de programación se pueden comparar a los objetos de la vida real, por ejemplo, un ordenador. Cada ordenador tiene una serie de atributos, como son la memoria RAM, el espacio de almacenamiento, la tarjeta gráfica, el procesador, etc.

En la POO (Programación Orientada a Objetos) se ha querido hacer un acercamiento a la realidad para facilitar la interpretación y creación de código.

Veamos un ejemplo típico de objeto, que podría ser un usuario. Este usuario se ha registrado en nuestro sitio web con un nombre, unos apellidos, una edad...

Cómo crear un objeto en JavaScript

De esta sencilla manera se crea un objeto en JavaScript. Le puedes poner el nombre que quieras (siguiendo las normas de sintaxis de JavaScript).

<script> 
    
NombreObjeto = {};

</script>

Este es un objeto con atributos, puede contener cuantos necesites.

<script> 
    
danielle98 = {
 nombre: "Danielle",
 apellido: "Trevino",
 nombreCompleto: "Danielle Trevino",
 edad: 19,
 ciudad: "Los ángeles",
 pais: "USA", 
 };

</script>

Una vez creado nuestro objeto, podemos llamar a cualquiera de sus atributos de cualquier manera que se nos ocurra.
Puedes llamar a un solo atributo del objeto o a los que quieras.

<script> 
    
document.write(
  "Nombre completo: ", danielle98.nombreCompleto, "<br>",
  "Apellido: ",danielle98.apellido, "<br>",
  "Nombre: ", danielle98.nombre, "<br>",
  "Edad: ", danielle98.edad, "<br>",
  "Ciudad: " , danielle98.ciudad, "<br>", 
  "País: ", danielle98.pais
              );

</script>

Resultado

Como he explicado antes, si quieres trabajar con un solo atributo (uno o los que quieras) en un momento determinado, lo puedes hacer.

<script> 
    
alert(danielle98.nombre);

</script>

Resultado

Curso desde cero de JavaScript Capítulo 8 - Tipos de datos II - POO - OOP - Programación orientada a objetos

Curso desde cero de JavaScript Capítulo 8 - Tipos de datos II - POO - OOP - Programación orientada a objetos I

En esta segunda parte vamos a ver el resto de tipos de datos en JavaScript.

Comencemos por los objetos.

Los objetos se escriben como los arrays, solo que se cambian los corchetes por llaves.

Los objetos se diferencian de los array, por tener la capacidad de tener atributos para cada uno de sus valores. Es decir, por ejemplo, un objeto llamado usuario podría contener un atributo para el nombre de usuario, otro para la edad, otro para el correo electrónico, otro para el sexo, etc.

Los array, además almacenan los diferentes datos sin atributos. En el array puedes poner var usuario [ "Javier", "30", "javimorales@gmail.com", "Masculino" ]; .Lo que no podrás es indicar que por ejemplo, "Javier" pertenece al atributo nombre de usuario.

Veamos un ejemplo práctico para que quede más claro.

Ejemplo práctico con objetos en JavaScript

Aquí tenemos un objeto que describe un mueble:

<script>
  
var mueble = {tipoMueble:"mesa", numeroPatas:4, material:"contrachapado", color:"negro"};
  
</script>

El objeto se ha declarado como una variable. En él se describen 4 atributos de un mueble, podrían ser todos los que quieras, no tienen porqué ser solo 4, el objeto, podrá ir cambiando de atributos a lo largo de tu código, pero eso lo iremos viendo, de momento lo importante es que veas la diferencia entre un objeto y un array.

    <script>
  
 var mueble = {tipoMueble:"mesa", numeroPatas:4, material:"contrachapado", color:"negro"};

 document.write("Se ha añadido su " + mueble.tipoMueble + " al carrito de compra." + "<br>" + "<br>");
  
 document.write("<strong>" + "Características de su " + mueble.tipoMueble + "</strong>" + "<br>");
  
 document.write("Número de patas: " + mueble.numeroPatas + "<br>" + "Material: " + mueble.material + "<br>" + "Color: " + mueble.color);
        
    </script>

Resultado

Es importante que pruebes y ejecutes el código y lo revises detenidamente para entenderlo. En realidad es mucho más sencillo de lo que parece.
en la primera línea se inicia el objeto. En él, se definen cuatro atributos.
Los tres document.write() lo único que hacen es utilizar HTML, strings (cadenas de texto) y llamadas al objeto, como puede ser "mueble.tipoMueble".

En el próximo capítulo veremos el condicional if.