Guías de Make it Real
Search…
Objetos literales
Los objetos en JavaScript nos ayudan agrupar información. Un objeto no es más que un conjunto de propiedades en donde cada propiedad está compuesta de una llave y un valor. Veamos un ejemplo:
1
var persona = {
2
nombre: "Germán",
3
apellido: "Escobar",
4
edad: 35,
5
estatura: 1.8
6
}
Copied!
Con este código estamos creando un objeto y lo estamos almacenando en la variable
persona. Un objeto se define utilizando corchetes {}. Las propiedades se separan con coma (,) y las llaves y valores se separan con dos puntos (:).En este objeto estamos almacenando la información de una persona, pero en un objeto podemos almacenar cualquier tipo de información que requiera esa asociación llave-valor.
El valor de una propiedad puede ser cualquier tipo de datos en JavaScript: números, cadenas de texto, booleanos, arreglos e incluso funciones y otros objetos.
Obteniendo valores de un objeto
Para obtener el nombre de la persona en el objeto que definimos previamente lo haríamos utilizando
persona.nombre. Por ejemplo:1
console.log(persona.nombre);
Copied!
Para obtener el valor de una llave en un objeto utilizamos la notación punto (
.): el nombre de la variable, seguido de punto, seguido del nombre de la llave:1
console.log(persona.nombre); // imprime Germán
2
console.log(persona.apellido); // imprime Escobar
3
console.log(persona.edad); // imprime 35
4
console.log(persona.estatura); // imprime 1.8
Copied!
Existe otra forma equivalente de obtener el valor de una llave utilizando corchetes cuadrados (
[]):1
persona["nombre"]
Copied!
Esta notación es útil para obtener los valores de forma dinámica. Por ejemplo:
1
var llave = "nombre";
2
console.log(persona[llave]);
Copied!
Primero definimos una variable
llave, a la que le asignamos el valor "nombre" y utilizamos esa variable para obtener el valor. Esto va a ser útil más adelante cuando estemos recorriendo las propiedades de un objeto.Como ejercicio intenta cambiar el valor de la variable por cualquier otra llave del objeto y verifica el resultado. ¿Qué pasa si utilizamos una llave que no existe? ¡Inténtalo!
Agregando nuevas propiedades al objeto
Es posible agregar más propiedades a un objeto después de que ha sido creado. Por ejemplo, podríamos agregar una propiedad con llave
peso y valor 70 de la siguiente forma:1
persona.peso = 70;
Copied!
Modificando propiedades del objeto
Es también posible modificar los valores de las propiedades de un objeto. Por ejemplo, si queremos cambiar el valor de la llave
peso lo podemos hacer de la siguiente forma:1
persona.peso = 65;
Copied!
Eliminando propiedades de un objeto
Para eliminar una propiedad de un objeto utiliza el operador
delete:1
delete person.peso;
Copied!
Recorriendo las propiedades de un objeto
Existen varias formas de recorrer las propiedades de un objeto en JavaScript. Veamos las dos principales:
1
for (var llave in persona) {
2
if (persona.hasOwnProperty(llave)) {
3
console.log(persona[llave])
4
}
5
}
Copied!
La razón por la que tenemos que agregar la condición es que los objetos pueden heredar propiedades de otros objetos, pero esa explicación está fuera del alcance de este libro. Por ahora asegúrate de agregar el condicional si vas a utilizar esa forma de iterar.
La otra forma de recorrer las propiedades de un objeto es utilizando
Object.keys:1
var llaves = Object.keys(persona);
2
for (var i=0; i < llaves.length; i++) {
3
var llave = llaves[i];
4
console.log(persona[llave]);
5
}
Copied!
Object.keys retorna un arreglo con las llaves del objeto que almacenamos en la variable llaves. Después iteramos por todas las llaves y utilizamos cada llave para obtener, de forma dinámica, el valor de esa llave en el objeto.Métodos
El valor de una propiedad de un objeto puede ser una función.
1
var person = {
2
name: "Pedro",
3
sayHi: function() {
4
console.log("Hola!");
5
}
6
}
Copied!
A una función de un objeto se le llama método.
Los métodos pueden utilizar otras propiedades del objeto utilizando la palabra clave
this:1
var person = {
2
name: "Pedro",
3
sayHi: function() {
4
console.log("Hola, me llamo " + this.name);
5
}
6
}
7
8
person.sayHi() // "Hola, me llamo Pedro"
Copied!
Mezclando arreglos y objetos
Es posible mezclar arreglos y objetos para crear estructuras complejas. Crea un archivo llamado
products.js y transcribe lo siguiente:1
var products = [
2
{ id: 1, name: "Leche", price: 120, categories: ["familiar", "comida"] },
3
{ id: 2, name: "Arroz", price: 80, categories: ["familiar", "comida"] },
4
{ id: 3, name: "Lavadora", price: 7800, categories: ["electrodomésticos"] }
5
];
Copied!
En este ejemplo hemos creado un arreglo de objetos. Cada objeto representa un producto y una de sus llaves (
categories) contiene a su vez un arreglo. Modifiquemos el programa para imprimir los productos en la consola:1
var products = [
2
{ id: 1, name: "Leche", price: 120, categories: ["familiar", "comida"] },
3
{ id: 2, name: "Arroz", price: 80, categories: ["familiar", "comida"] },
4
{ id: 3, name: "Lavadora", price: 7800, categories: ["electrodomésticos"] }
5
];
6
7
for (var i=0; i < products.length; i++) {
8
var product = products[i];
9
console.log(product.name);
10
console.log(" Id: " + product.id);
11
console.log(" Precio: " + product.price);
12
console.log(" Categorías: " + product.categories.join(", "));
13
}
Copied!
Lo primero que estamos haciendo es iterando por el arreglo de productos. Por cada uno de los productos (recuerda que cada producto es un objeto) vamos a mostrar el nombre (la llave
nombre), después el identificador (la llave id), el precio (la llave price) y las categorías (la llave categories). Como las categorías están en un arreglo debemos utilizar el método join para convertirlas en una cadena.Last modified 2yr ago