- Otro de los tipos base que tenemos en ECMAScript son los object, es decir que tenemos objetos
- Los objetos nos ayudan a representar valores de una manera más fácil y agrupada
- Los objetos literales se escriben entre {}
Ejemplo:
{
} // objeto literal
const miObjeto = {}; // objeto asignado a una variable- Un objeto puede tener propiedades
- Las propiedades se definen con un nombre como si fueran variables
- A las propiedades se les puede asignar un valor utilizando dos puntos
- Las propiedades se separan con comas
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
console.log(persona);- Podemos acceder a la propiedad de un objeto utilizando el nombre del objeto, punto y el nombre de la propiedad
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
console.log(persona.nombre);
console.log(persona.edad);-
Si accedemos a una propiedad que no existe vamos a obtener undefined
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
console.log(persona.dni); // undefined- Para asignar un valor a una propiedad lo hacemos de la misma forma que lo hacemos con una variable
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
persona.nombre = "Martín";
persona.edad = 20;
console.log(persona);
// { nombre: 'Martín', edad: 20 }- Las propiedades de un objeto terminan siendo variables de las cuales podemos obtener o asignar valores
- Un tema importante con los objetos de ECMAScript es que son dinámicos
- Podemos crear propiedades que no fueron definidas en el objeto
- Si bien es un gran beneficio tener esta flexibilidad nos puede dar un dolor de cabeza si no tenemos cuidado
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
console.log(persona.dni); // undefined
persona.nombre = "Martín";
persona.edad = 20;
persona.dni = 20202123;
console.log(persona);
// { nombre: 'Martín', edad: 20, dni: 20202123 }
console.log(persona.dni); // 20202123- Podemos caer en el error de escribir mal una propiedad o por ahí utilizar mayúscula y no encontrar la propiedad buscada o eventualmente terminar creando nuevas propiedades
- De nuevo, por las dudas... tener cuidado con las propiedades de los objetos de ECMAScript
- Los objetos pueden tener métodos
- Un método es una propiedad que tiene una función
Ejemplo:
const persona = {
nombre: "Nico",
saludar: function () {
console.log("Hola, cómo estan?");
},
};- Como podemos ver nombre y saludar son dos propiedades iguales
- Nombre tiene asinado un string
- Saludar tiene asignado una función como vimos antes
Ejemplo:
const saludar = function () {
console.log("Hola, cómo estan?");
};
saludar();- Para ejecutar un método de un objeto lo hacemos de la misma forma casi:
Ejemplo:
const persona = {
nombre: "Nico",
saludar: function () {
console.log("Hola, cómo estan?");
},
};
persona.saludar(); // Hola, cómo estan?-
Cuando utilizamos métodos de string, number o arrays estabamos utilizando funciones propias de cada uno de estos tipos.
-
ECMAScript transforma los strings, numbers y arrays a objetos para poder utilizar métodos sobre estos tipos de datos
-
Un método también puede aceptar parámetros:
Ejemplo:
const persona = {
nombre: "Nico",
saludar: function (nombre) {
console.log("Hola, " + nombre + " cómo estas?");
},
};
persona.saludar("Marta"); // Hola, Marta cómo estas?- Vemos que utilizar un método es muy similar a simplemente utilizar una función
- Esto se da porque un método es una función dentro de un objeto
- Dentro de los métodos también podemos acceder a las propiedades del objeto por medio de la palabra reservada this
- Por ahora podemos decir que this es una referencia al objeto que creamos
Ejemplo:
const persona = {
nombre: "Nico",
saludar: function () {
console.log("Hola, mi nombre es " + this.nombre);
},
};
persona.saludar(); // Hola, mi nombre es Nico-
También dentro de un método podemos modificar una propiedad de un objeto
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
saludar: function () {
console.log("Hola, mi nombre es " + this.nombre);
},
cumpleanios: function () {
this.edad++;
},
};
console.log(persona.edad); // 38
persona.cumpleanios();
console.log(persona.edad); // 39- Puede pasar que no sabemos el nombre de una propiedad y necesitemos acceder de forma dinámica
- Podemos acceder a las propiedades utilizando los corchetes como si fueran array pero en lugar de pasarle un ídince numérico le pasamos el nombre de la propiedad
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
saludar: function () {
console.log("Hola, mi nombre es " + this.nombre);
},
cumpleanios: function () {
this.edad++;
},
};
console.log(persona["nombre"]); // nico
console.log(persona["edad"]); // 38- Podemos hacer esto utilizando variables
Ejemplo:
const nombre = "nombre";
const edad = "edad";
const persona = {
nombre: "Nico",
edad: 38,
saludar: function () {
console.log("Hola, mi nombre es " + this.nombre);
},
cumpleanios: function () {
this.edad++;
},
};
console.log(persona[nombre]); // nico
console.log(persona[edad]); // 38-
De esta forma podemos acceder a propiedades de un objeto de forma dinámica
-
Esto es útil si lo usamos con
Object.keys -
Object.keysretorna todas las propiedades de un objeto -
El método keys acepta un objeto como parámetro
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
const propiedades = Object.keys(persona);
propiedades.forEach(function (propiedad) {
console.log(persona[propiedad]);
});- Si agregamos más propiedades el código sigue pudiendo acceder a las propiedades de forma dinámica
Ejemplo:
const persona = {
nombre: "Nico",
edad: 38,
};
persona.dni = 20202138;
persona.calle = "arcos 220";
const propiedades = Object.keys(persona);
propiedades.forEach(function (propiedad) {
console.log(persona[propiedad]);
});
/*
Nico
38
20202138
arcos 220
*/- Podes leer más sobre
Object.keysen el sitio del MDN