Los objetos son una parte muy importante de Javascript. Hay una frase entre los desarrolladores Javascript de que En Javascript todo es un objeto. A día de hoy tenemos bases de datos basadas en notación de objetos javascript, como Firebase, MongoDB… que son bases de datos muy poderosas y utilizadas actualmente.
Crear un objeto
La sintaxis es la siguiente.
Ejm
const a = {};
console.log(a);
// No es recomendado
const b = new Object();
console.log(b);Qué es un objeto
Un objeto es una colección de llaves: valores. Si hemos trabajado con CSS, es parecido a una regla CSS, hay que definir una llave, dos puntos, y el valor que asignemos a la llave de un objeto, separado por comas. Un objeto puede tener diferentes propiedades o valores, y se pueden pasar funciones como datos.
Ejm
const fran = {
nombre: "Francisco",
apellido: "Paredes",
edad: 51
pasatiempos: ["Correr", "Ejercicio"],
soltero: false,
contacto: {
email: "francisco@franciscoparedesparralejo.eu",
twitter: "@franwebsite"
},
saludar: function(){
console.log("Hola");
}
};
console.log(fran);Acceder a los valores del objeto
Cuando en su momento hablamos de los tipos de datos compuestos, dijimos que no accedíamos al valor directamente, sino a la referencia del mismo. Mientras que en los arrays utilizábamos la notación del corchete para acceder a los valores, con los objetos utilizamos la notación del punto (.), aunque también se podría utilizar la notación del corchete, pero no es lo habitual.
Ejm
console.log(fran.nombre); // Forma más aceptada console.log(fran["nombre"]; // No se suele utilizar esta sintaxis fran.saludar(); console.log(fran.pasatiempos[1]); console.log(fran.contacto.twitter);
En los objetos, las propiedades son denominadas atributos, que no son más que variables que tienen dentro un objeto. Las funciones dentro de los objetos son denominadas métodos.
Nota: Dentro de un objeto a las variables se las llaman atributos, y a las funciones se las denomina métodos.
En nuestro objeto fran vamos a crear otra función con la siguiente sintaxis.
Ejm
decirMiNombre: function(){
console.log(`Hola, me llamo ${this.nombre} ${this.apellido}
y me puedes seguir como ${this.contacto.twitter}`);
}La palabra this hace referencia al mismo objeto.
Conclusión
Como podemos ver, los objetos pueden tener cualquier valor, sean cadenas, números, arrays, funciones, otros objetos, booleans… prácticamente cualquier tipo de dato de los que hemos visto. Más adelante, cuando lleguemos a la parte de paradigmas de programación, y hablemos de programación orientada a objetos, ahí vamos a entender porque en Javascript los objetos lo son todo.
Métodos importantes de los objetos
Algunos métodos importantes son:
- keys(objeto): recibe como parámetro un objeto, es un método que tiene el prototipo object, y que permite listar todas las llaves del objeto.
- values(objeto): forma un array con los valores del objeto que le pasamos como parámetro.
- objeto.hasOwnProperty(«propiedad»): este método permite saber si un objeto tiene una propiedad. Devolverá true o false dependiendo de si existe o no dicha propiedad pasada como parámetro. Primero se pone el objeto en cuestión, el método, y como parámetro el nombre de la propiedad.
Los objetos tienen muchas propiedades, las cuales podemos encontrar en MDN.
Ejm completo
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Objetos Javascript</title>
</head>
<body>
<h1>Objetos Javascript</h1>
<script>
const fran = {
nombre: "Francisco",
apellido: "Paredes",
edad: 51,
soltero: false,
pasatiempos: ["Correr","Tocar el bajo"],
contacto: {
email: "francisco@franciscoparedesparralejo.eu",
twitter: "@franwebsite"
},
saludar: function(){
console.log("Hola");
},
decirMiNombre: function(){
console.log(`Hola, me llamo ${this.nombre} ${this.apellido}
y me puedes seguir como ${this.contacto.twitter} en Twitter`);
}
};
fran.decirMiNombre();
</script>
</body>
</html>