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 undata 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 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:
Objetos en JavaScript
Objetos en JavaScript
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.
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);
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 operatorpara 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 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 ( )
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 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.
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 object, que representa un contexto global. Sólo tienes que hacer un console.log del thisfuera del objeto para ver cómo te imprime el Window object.
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:
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:
// 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!
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:
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.
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
Aquí encontramos propiedades como el número PI.
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 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étodosMath.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.
¡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!
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:
2 comentarios en «Objetos en JavaScript: Guía básica»
Gracias a ti, Lourdes! Me alegro de que te haya servido. Te invito a explorar el blog, donde encontrarás más material como este, gratuito y una sección premium https://www.acontracorrientech.com/club-actech/
Muchas gracias por compartir esta informaciòn, me sirvio mucho
Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información
Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.
Gracias a ti, Lourdes! Me alegro de que te haya servido. Te invito a explorar el blog, donde encontrarás más material como este, gratuito y una sección premium https://www.acontracorrientech.com/club-actech/
Muchas gracias por compartir esta informaciòn, me sirvio mucho