Objetos en JavaScript: Guía básica

Introducción a los objetos

Los objetos son un tipo de datos (en inglés, data types) de JavaScript, al igual que un number o un string. Con la diferencia de que son un data type con una estructura más compleja. Se dice que "todo en JavaScript es un objeto", porque los objetos son el núcleo duro de JavaScript (en adelante, JS). 

Los objetos en JS son el equivalente a los objetos en la vida real: un objeto tiene propiedades y funcionalidades.

  Por ejemplo, una cámara de fotos:

Como decimos, el concepto de "objeto" en JS no es distinto al concepto de la vida real. Sólo que las "funcionalidades" se llaman métodos, que en realidad son funciones asociadas a un data type. Por ejemplo, podemos tener un user object: 

JS tiene varios built-in objects muy útiles que veremos posteriormente, como el Math object o el Date object. Pero también nos permite crear nuestros propios objetos, como el user object del ejemplo de arriba. Para esto hacemos uso de una técnica llamada object literal notation. Uy, esto empieza a sonar complicado... así que vamos a verlo desde una perspectiva práctica.

Nuestro primer object literal

Vamos a trabajar con un sencillo archivo HTML como este:

Y también con un archivo .js (llamado sandbox.js, por ejemplo), que por el momento es un archivo en blanco.

1. En el archivo sandbox.js nos creamos una variable para guardar nuestro objeto, llamada user, por seguir con el ejemplo de arriba. La estructura de un objeto de este tipo es esta:

Añadimos esas dos propiedades y un par más. Si ahora hacemos un console.log, veremos que en la consola de chrome se imprime nuestro objeto con todas sus propiedades.

Accediendo a las propiedades de un objeto mediante el dot notation

Podemos acceder a las propiedades de nuestro objeto de manera muy sencilla, utilizando la herramienta del dot notation (el punto, vaya). Es decir, si quisiéramos acceder al nombre del objeto user, haríamos: 

user.name

Y al imprimirlo (console.log(user.name)) verías en la consola la propiedad name del user, es decir, "Mike".

También podemos cambiar las propiedades de nuestro objeto, simplemente asignándole una nueva: 

user.age = 15;

console.log(user.age) // 15

Accediendo a las propiedades de un objeto mediante square brackets notation

Esta es otra manera (menos usada) de acceder a las propiedades de un objeto: mediante corchetes y comillas. Es decir, estos dos console.log nos darían el mismo resultado. 

console.log(user.age)

console.log(user["age"]

También podríamos cambiar una propiedad usando el square brackets notation.  Si ahora usamos el typeof operator para ver qué tipo de dato es nuestro user, verás que la consola nos devuelve que es un objeto

console.log(typeof user) // "object"

Añadiendo métodos a nuestro objeto

Podemos añadir métodos a un objeto como una propiedad más, cumpliendo los mismos requisitos: 

    myKey (name of the function): myValue (function)

};

Recordamos que los métodos son "cosas que el user puede hacer", funcionalidades como "log in" o "delete", por ejemplo.

Vamos a añadirle un par de métodos a nuestro user llamados login y logout, que por el momento sólo imprimen algo en la consola. Para que un método funcione, tenemos que llamarlo.

  Los métodos se llaman añadiéndoles paréntesis al final ( )

Al llamar a los métodos, verás que en tu consola se imprime:

// the user logged in! 🙂

// the user logged out 🙁

La keyword this

1. Ahora, queremos acceder a e imprimir el value de la propiedad quotes. Para ello, debemos crear otro método, al que llamaremos logQuotes, por ejemplo. Para acceder a quotes dentro del método logQuotes, no podemos simplemente referirnos a él como quotes, porque JS nos devolvería un error. 

// sandbox.js:14 Uncaught ReferenceError: quotes is not defined

Lo que tenemos que hacer es acceder a la propiedad mediante la palabra reservada this.  En el ámbito de la función logQuotes, this se refiere al user. Pero esto no es siempre así.

La keyword this es un objeto contextual, es decir, representa una cosa distinta siempre, dependiendo del contexto en el que se encuentre.

Así dependiendo dónde la usemos, su valor será diferente. Por ejemplo, en el caso de utilizarla dentro del método logQuotes, this representará al user. Es decir, adquiere el valor del objeto user. Compruébalo haciendo un console.log de this y verás lo que se imprime. 

Exactamente: el user object. Si por el contrario, usamos this en la raíz del documento, this adquirirá el valor del Window object, que representa un contexto global. Sólo tienes que hacer un console.log del this fuera del objeto para ver cómo te imprime el Window object. 

// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Lo que a nosotros nos interesa es que this represente al user object para poder tener acceso a una de sus propiedades (quotes). Así que utilizando this dentro de la función logQuotes: 

logQuotes: function(){

  console.log(this.quotes);

}

ya tendríamos acceso a dicha propiedad (comprueba tu consola para ver cómo aparecen los valores de quotes). 

2. Lo que hemos hecho hasta ahora es comprobar el acceso a la propiedad haciendo console.log. Pero lo que queremos es imprimir en la consola todas las quotes de nuestro user. Para ello, utilizamos el método forEach.

Funciones comunes vs. arrow functions

Fijémonos en que, para definir nuestro método, hemos usado una función común, y no una arrow function. Las arrow functions tratan de manera distinta la palabra clave this, así que si hubiésemos escrito este código:

Ahora tendríamos un error en la consola:

// Uncaught TypeError: Cannot read property 'forEach' of undefined

 Recordemos que cuando usamos la keyword "this" dentro de una función común, JS interpretará que "this" se refiere al objeto dentro del cual está la función que utiliza "this". Lo que ocurre cuando utilizamos arrow functions y la keyword "this" dentro de ellas, es que JS asignará el valor de "this" al Window object.

Sí, es lo mismo que sucede si hacemos un console.log de this directamente en el contexto global, como hemos hecho en el punto 1 de esta sección.

Para más detalles sobre cómo se comporta la keyword this en las arrow functions, este curso de JS es uno de mis favoritos para tratar el tema.

En cualquier caso, editores de código como VS Code vienen con la funcionalidad de hacer ctrl+clic izquierdo sobre un this de tu código, y te llevará automáticamente al valor al que está asignada esta keyword en ese caso concreto, disipando así toda duda sobre a qué puñetas se refiere ese dichoso this.

2.1. Existe un atajo para escribir funciones comunes dentro de un objeto, y es sencillamente quitando los paréntesis y la palabra function cuando definimos el método dentro del objeto. Es decir, en lugar de así:

logQuotes: function() {

   this.quotes.forEach(quote => {

   console.log(quote);

  });

}

así:

logQuotes() {

   this.quotes.forEach(quote => {

   console.log(quote);

  });

}

Así que ¡vamos a adaptar nuestros métodos con este atajo! 

Objetos dentro arrays

Existe una estructura muy común en programación, sobre todo para almacenar listas de cosas: escribir objetos dentro de arrays. Un ejemplo sería para almacenar una lista de películas. La estructura sería la siguiente:

1. Sabiendo esto, vamos a cambiar un poco nuestra propiedad quotes para convertirla en un array de objetos. Vamos a cambiarle el nombre para imaginar que son artículos de un blog (blogPosts). Por definición, un blog post tiene características como "autor", "fecha", "contenido", "likes", etc. 

Cambiamos también el nombre logQuotes por logBlogPosts para ser consistentes. 

2. Configuramos nuestro método logBlogPosts para que vuelva a funcionar. Queremos imprimir todos nuestros blog posts, incluyendo el título y los likes. Para ello no tenemos más que sustituir el array por el nuevo (blogPosts) y pasarle una nueva variable. A través de esta variable ya podemos acceder a todos los valores de nuestros objetos del array blogPosts. 

No olvidemos llamar a la función correcta ( user.logBlogPosts() )

Built-in objects: Math object

Los built-in objects son objetos que vienen con JS por defecto. Uno de ellos es Math, un objeto muy útil que nos sirve para trabajar con números, sacar decimales, redondear, generar números aleatorios y mucho más. Para ver todos los métodos de este objeto, haz un sencillo console.log (console.log(Math)) (o escribe Math en la consola directamente) y mira todo lo que te devuelve la consola.

Aquí un esquemita no exhaustivo sobre el Math object:

1. Si hacemos un console.log de Math.PI verás que la consola nos devuelve el número PI.

// 3.141592653589793

2. Vamos a probar algún método de Math para ver lo que hacen. Para eso, nos creamos una variable sobre la que poder trabajar.

3. Podemos hacer mil cosas más con métodos del Math object, pero uno de los más utilizados es el random. Usando este método podemos generar fácilmente números aleatorios. Para eso, nos creamos una variable (llamada randomNum, por ejemplo), y le asignamos el valor de Math.random. 

Esto genera un número decimal entre 0 y 1. Si ahora quisiéramos generar números aleatorios entre 0 y 10, podríamos combinar los métodos Math.random (para generar un número aleatorio)  y Math.round (para redondear ese número y eliminar así el decimal). Con esto, si lo multiplicamos por 10, ya tenemos nuestro generador de números aleatorios entre 0 y 10.  Recarga el navegador varias veces para ver cómo cambia.