{"id":655,"date":"2024-07-30T19:48:49","date_gmt":"2024-07-30T17:48:49","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=655"},"modified":"2024-07-30T19:48:50","modified_gmt":"2024-07-30T17:48:50","slug":"010-objetos-en-javascript","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/03-tipos-de-datos-en-javascript\/010-objetos-en-javascript\/","title":{"rendered":"010. Objetos en Javascript"},"content":{"rendered":"\n

Los objetos<\/strong> son una parte muy importante de Javascript<\/strong>. Hay una frase entre los desarrolladores Javascript<\/strong> de que En Javascript todo es un objeto<\/em>. <\/strong>A d\u00eda de hoy tenemos bases de datos<\/strong> basadas en notaci\u00f3n de objetos javascript<\/strong>, como Firebase<\/strong>, MongoDB<\/strong>… que son bases de datos muy poderosas y utilizadas actualmente.<\/p>\n\n\n\n\n\n\n\n

Crear un objeto<\/h2>\n\n\n\n

La sintaxis es la siguiente.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

const a = {};\nconsole.log(a);\n\n\/\/ No es recomendado\nconst b = new Object();\nconsole.log(b);<\/pre>\n\n\n\n
Qu\u00e9 es un objeto<\/h2>\n\n\n\n
Un objeto<\/strong> es una colecci\u00f3n de llaves: valores<\/strong>. Si hemos trabajado con CSS<\/strong>, es parecido a una regla CSS<\/strong>, hay que definir una llave<\/strong>, dos puntos, y el valor que asignemos a la llave<\/strong> de un objeto<\/strong>, separado por comas. Un objeto<\/strong> puede tener diferentes propiedades<\/strong> o valores<\/strong>, y se pueden pasar funciones<\/strong> como datos.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
const fran = {\n   nombre: \"Francisco\",\n   apellido: \"Paredes\",\n   edad: 51\n   pasatiempos: [\"Correr\", \"Ejercicio\"],\n   soltero: false,\n   contacto: {\n      email: \"francisco@franciscoparedesparralejo.eu\",\n      twitter: \"@franwebsite\"\n   },\n   saludar: function(){\n      console.log(\"Hola\");\n   }\n};\n\nconsole.log(fran);<\/pre>\n\n\n\n
Acceder a los valores del objeto<\/h2>\n\n\n\n
Cuando en su momento hablamos de los tipos de datos compuestos, dijimos que no acced\u00edamos al valor directamente, sino a la referencia del mismo. Mientras que en los arrays<\/strong> utiliz\u00e1bamos la notaci\u00f3n del corchete<\/strong> para acceder a los valores, con los objetos<\/strong> utilizamos la notaci\u00f3n del punto (.), aunque tambi\u00e9n se podr\u00eda utilizar la notaci\u00f3n del corchete, pero no es lo habitual.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log(fran.nombre); \/\/ Forma m\u00e1s aceptada\nconsole.log(fran[\"nombre\"]; \/\/ No se suele utilizar esta sintaxis\nfran.saludar();\nconsole.log(fran.pasatiempos[1]);\nconsole.log(fran.contacto.twitter);<\/pre>\n\n\n\n
En los objetos<\/strong>, las propiedades<\/strong> son denominadas atributos<\/strong>, que no son m\u00e1s que variables<\/strong> que tienen dentro un objeto<\/strong>. Las funciones<\/strong> dentro de los objetos son denominadas m\u00e9todos<\/strong>.<\/p>\n\n\n\n
\n
Nota<\/strong>: Dentro de un objeto a las variables<\/strong> se las llaman atributos<\/strong>, y a las funciones<\/strong> se las denomina m\u00e9todos<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
En nuestro objeto fran<\/em> vamos a crear otra funci\u00f3n<\/strong> con la siguiente sintaxis.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
            decirMiNombre: function(){\n                console.log(`Hola, me llamo ${this.nombre} ${this.apellido}\n                y me puedes seguir como ${this.contacto.twitter}`);\n            }<\/pre>\n\n\n\n
La palabra this<\/em> <\/strong>hace referencia al mismo objeto.<\/p>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n
Como podemos ver, los objetos<\/strong> pueden tener cualquier valor, sean cadenas<\/strong>, n\u00fameros<\/strong>, arrays,<\/strong> funciones<\/strong>, otros objetos<\/strong>, booleans<\/strong>… pr\u00e1cticamente cualquier tipo de dato de los que hemos visto. M\u00e1s adelante, cuando lleguemos a la parte de paradigmas de programaci\u00f3n<\/strong>, y hablemos de programaci\u00f3n orientada a objetos<\/strong>, ah\u00ed vamos a entender porque en Javascript<\/strong> los objetos<\/strong> lo son todo.<\/p>\n\n\n\n
M\u00e9todos importantes de los objetos<\/h2>\n\n\n\n
Algunos m\u00e9todos<\/strong> importantes son:<\/p>\n\n\n\n