portada objetos en javascript

Objetos en JavaScript: Guía básica

Última actualización:

NOTA: IDIOMAS, QUERIDA.

Verás que uso los términos de programación directamente en inglés o hago una traducción la primera vez que aparecen. Por eso, es muy recomendable que sepas inglés, ya que es el lenguaje universal y el idioma en el que están escritos los lenguajes de programación que aquí nos ocupan.

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:

propiedades

funcionalidades

color

hacer fotos

tamaño

grabar vídeos

modelo

borrar 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: 

propiedades

MÉTODOS

nombre

iniciar sesión

edad

cerrar sesión

email

publicar contenido

JS tiene varios built-in objects muy útiles que veremos posteriormente, como el Math object o el Date objectPero 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 notationUy, 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:

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Objetos en JavaScript</title> </head> <body> <h3>Objetos en JavaScript</h3> <hr> <script src="sandbox.js"></script> </body> </html>

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:

estructura object literal notation

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.

let user = { name: 'Mike', age: 13, email: 'mike_hawkins@gmail.com', location: 'Indiana', quotes: ['Dungeons & Dragons rules', '5 things to do in Indiana'] }; console.log(user);
objeto user

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: 

let myObject = {

    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 logoutque 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 ( )
let user = { name: "Mike", age: 13, email: "mike_hawkins@gmail.com", location: "Indiana", quotes: ["Dungeons & Dragons rules", "5 things to do in Indiana"], login: function() { console.log("the user logged in! :)"); }, logout: function() { console.log("the user logged out :("); } }; // console.log(user); user.login(); user.logout();

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 quotesporque 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. 

let user = { name: "Mike", age: 13, email: "mike_hawkins@gmail.com", location: "Indiana", quotes: ["Dungeons & Dragons rules", "5 things to do in Indiana"], login: function() { console.log("the user logged in! :)"); }, logout: function() { console.log("the user logged out :("); }, logQuotes: function() { console.log(this); } }; // user.login(); // user.logout(); user.logQuotes();

Exactamente: el user object. Si por el contrario, usamos this en la raíz del documento, this adquirirá el valor del Window objectque 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.

¡PSST! ¿NO SABES LO QUE ES EL MÉTODO forEach?  🤷‍♀️

En una sección de este artículo te lo explico en detalle

let user = { name: "Mike", age: 13, email: "mike_hawkins@gmail.com", location: "Indiana", quotes: ["Dungeons & Dragons rules", "5 things to do in Indiana"], login: function() { console.log("the user logged in! :)"); }, logout: function() { console.log("the user logged out :("); }, logQuotes: function() { // console.log(this.quotes); this.quotes.forEach(quote => { console.log(quote); }); } }; // user.login(); // user.logout(); user.logQuotes();

Y con esto, verás cómo en tus dev tools se imprimen las quotes como strings:

👏

quotes como strings

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:

logQuotes: () => { // console.log(this.quotes); this.quotes.forEach(quote => { console.log(quote); }); }

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.

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! 🚊

let user = { name: "Mike", age: 13, email: "mike_hawkins@gmail.com", location: "Indiana", quotes: ["Dungeons & Dragons rules", "5 things to do in Indiana"], login() { console.log("the user logged in! :)"); }, logout() { console.log("the user logged out :("); }, logQuotes() { // console.log(this.quotes); this.quotes.forEach(quote => { console.log(quote); }); } }; // user.login(); // user.logout(); user.logQuotes();

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:

let myMovies = [ { movieName: 'movieNameHere', director: 'directorNameHere' }, { movieName: 'movieNameHere', director: 'directorNameHere' }, etc... ];

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

let user = { name: "Mike", age: 13, email: "mike_hawkins@gmail.com", location: "Indiana", blogPosts: [ { title: "Dungeons & Dragons rules", likes: 57 }, { title: "5 things to do in Indiana", likes: 247 } ], login() { console.log("the user logged in! :)"); }, logout() { console.log("the user logged out :("); }, logBlogPosts() { // console.log(this.quotes); this.quotes.forEach(quote => { console.log(quote); }); } }; // user.login(); // user.logout(); user.logQuotes();

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() ) 😉

let user = { name: "Mike", age: 13, email: "mike_hawkins@gmail.com", location: "Indiana", blogPosts: [ { title: "Dungeons & Dragons rules", likes: 57 }, { title: "5 things to do in Indiana", likes: 247 } ], login() { console.log("the user logged in! :)"); }, logout() { console.log("the user logged out :("); }, logBlogPosts() { this.blogPosts.forEach(blogPost => { console.log(blogPost.title, blogPost.likes); }); } }; // user.login(); // user.logout(); user.logBlogPosts();

Y ahora, en tu consola del navegador deberías ver impresos todos los blog posts seguidos de sus likes. 👏

objetos en arrays

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:

propiedades

métodos

constantes math

Aquí encontramos propiedades como el número PI.

metodos math

Funciones con las que podemos trabajar fácilmente con números

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.

let myNumber = 1.8; console.log(Math.floor(myNumber)); // 1 console.log(Math.round(myNumber)); // 2

3. Podemos hacer mil cosas más con métodos del Math object, pero uno de los más utilizados es el randomUsando 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.

const randomNum = Math.random(); console.log(Math.round(randomNum * 10));

THE END!

¡Y con esto terminamos nuestro repaso a los objetos en JavaScript! Espero que hayas aprendido algo nuevo 😊.  Si te queda alguna duda, ¡nos vemos en los comentarios! 

Si quieres seguir aprendiendo, echa un vistazo a esta guía sobre Programación orientada a objetos.

Y si crees que este post puede serle útil a alguien, ¡compártelo!

Otros artículos que pueden interesarte

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Construye Minioland: Tu primera aplicación con Angular | Parte #1
¿Qué vamos a construir?Minioland, o así he decidido llamar a esta sencilla app, totalmente responsive y de tipo Single Page[...]
Angular: Entendiendo la Directiva ngModel
Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar