{"id":7497,"date":"2019-11-21T12:58:41","date_gmt":"2019-11-21T12:58:41","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7497"},"modified":"2019-11-21T13:02:29","modified_gmt":"2019-11-21T13:02:29","slug":"como-crear-y-usar-un-objeto-en-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/","title":{"rendered":"Como crear y usar un objeto en JavaScript"},"content":{"rendered":"

La programaci\u00f3n orientada a objetos est\u00e1 en auge y es muy com\u00fan recurrir a ella para crear proyectos peque\u00f1os y grandes.<\/p>\n

El principal beneficio es que el c\u00f3digo queda m\u00e1s claro y reunido que usando funciones independientes.<\/p>\n

La programaci\u00f3n orientada a objetos es una paradigma que viene a innovar la forma de obtener resultados. Los objetos manipulan datos de entrada para obtener datos de salida.<\/p>\n

En la actualidad, existe una gran variedad de lenguajes de programaci\u00f3n que soportan la orientaci\u00f3n a objetos.<\/p>\n

El lenguaje JavaScript<\/strong> es uno de ellos y en este tutorial vas a descubrir como crear un objeto sobre la marcha y como crear una clase con su instancia y llamada a sus m\u00e9todos.<\/p>\n

Como crear un objeto sobre la marcha con JavaScript<\/h2>\n

En JavaScript<\/strong> puedes crear una variable o constante que puede ser directamente un objeto usando las clasves {} como su representaci\u00f3n.<\/p>\n

Por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
const<\/span> cliente =<\/span> {<\/span>\n    nombre:<\/span> 'Jose'<\/span>,<\/span>\n    apellido:<\/span> 'Aguilar'<\/span>,<\/span>\n    profesion:<\/span> 'Programador'<\/span>,<\/span>\n    email:<\/span> 'blog@jose-aguilar.com'<\/span>,<\/span>\n    nacimiento:<\/span> 1984<\/span>,<\/span>\n    musica:<\/span> [<\/span>'Dance'<\/span>,<\/span> 'Techno'<\/span>,<\/span> 'Pop'<\/span>]<\/span>,<\/span>\n    lugar:<\/span> {<\/span>\n        poblacion:<\/span> 'Santa Perpetua de Moguda'<\/span>,<\/span>\n        ciudad:<\/span> 'Barcelona'<\/span>,<\/span>\n        pais:<\/span> 'Espa\u00f1a'<\/span>\n    }<\/span>,<\/span>\n    getEdad:<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        return<\/span> new<\/span> Date(<\/span>)<\/span>.getUTCFullYear<\/span>(<\/span>)<\/span> -<\/span> this<\/span>.nacimiento<\/span>;<\/span>\n    }<\/span>\n}<\/span><\/pre><\/div><\/div>\n
El c\u00f3digo anterior es un objeto guardado como constante que tiene una serie de informaci\u00f3n: nombre, apellidos, profesi\u00f3n, email, nacimiento, m\u00fasica, lugar y todo lo que se pueda ocurrir.<\/p>\n
Adem\u00e1s, tambi\u00e9n tiene un m\u00e9todo que con la fecha de nacimiento retorna la edad actual.<\/p>\n
Como usar este objeto<\/h2>\n
Por ejemplo, si quieres obtener la fecha de nacimiento, para mostrarla en consola puedes hacer lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>cliente.nacimiento<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Si quieres obtener el pa\u00eds, puedes hacer lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>cliente.lugar<\/span>.pais<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Y, para obtener la edad es posible llamar al m\u00e9todo que he creado getEdad():<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>cliente.getEdad<\/span>(<\/span>)<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Como crear una clase en JavaScript<\/h2>\n
Siguiendo el mismo ejemplo, a continuaci\u00f3n vas a ver como crear la clase Cliente de forma m\u00e1s simplificada:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
class<\/span> Cliente {<\/span>\n    constructor(<\/span>nombre,<\/span> nacimiento)<\/span> {<\/span>\n        this<\/span>.nombre<\/span> =<\/span> nombre;<\/span>\n        this<\/span>.nacimiento<\/span> =<\/span> nacimiento;<\/span>\n    }<\/span>\n \n    getInformation(<\/span>)<\/span> {<\/span>\n        return<\/span> `Nombre:<\/span> ${<\/span>this<\/span>.nombre<\/span>}<\/span>,<\/span> nacimiento:<\/span> ${<\/span>this<\/span>.nacimiento<\/span>}<\/span>`;<\/span>\n    }<\/span>\n \n    getEdad(<\/span>)<\/span> {<\/span>\n        return<\/span> new<\/span> Date(<\/span>)<\/span>.getUTCFullYear<\/span>(<\/span>)<\/span> -<\/span> this<\/span>.nacimiento<\/span>;<\/span>\n    }<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Ahora tengo la clase Cliente con su constructor que permite registrar los datos de entrada y, adem\u00e1s, he creado 2 m\u00e9todos. Uno de ellos retorna la informaci\u00f3n del objeto en s\u00ed y el otro m\u00e9todo retorna el c\u00e1lculo de la edad en funci\u00f3n a su fecha de nacimiento.<\/p>\n
Como crear una instancia de esta clase y usar sus datos y m\u00e9todos<\/h2>\n
F\u00edjate en el siguiente c\u00f3digo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
const<\/span> jose =<\/span> new<\/span> Cliente(<\/span>'Jose Aguilar'<\/span>,<\/span> 1984)<\/span>;<\/span><\/pre><\/div><\/div>\n
Sabiendo que hay un constructor que recibe los datos, creo el objeto \u00abjose\u00bb como nuevo objeto de la clase Cliente pasando como par\u00e1metros el nombre y el a\u00f1o de nacimiento.<\/p>\n
Con esta declaraci\u00f3n, ahora puedo acceder a todo el objeto con:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>jose)<\/span>;<\/span><\/pre><\/div><\/div>\n
Puedo acceder al nombre de la instancia o objeto con:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>jose.nombre<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Tambi\u00e9n puedo llamar al m\u00e9todo que retorna la edad de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>jose.getEdad<\/span>(<\/span>)<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Importante: Para los que no conocen la funci\u00f3n console.log(), esta lo que hace es mostrar en la consola del navegador los resultados. Puedes ver m\u00e1s informaci\u00f3n en Consola del navegador para JavaScript<\/a>.<\/p>\n
\u00bfTodav\u00eda no usas las clases y objetos? Com\u00e9ntanos cual es tu metodolog\u00eda de trabajo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.<\/p>\n","protected":false},"author":1,"featured_media":7498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[63],"class_list":["post-7497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-clases"],"yoast_head":"\nComo crear y usar un objeto en JavaScript - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como crear y usar un objeto en JavaScript - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-21T12:58:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-21T13:02:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/\",\"name\":\"Como crear y usar un objeto en JavaScript - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png\",\"datePublished\":\"2019-11-21T12:58:41+00:00\",\"dateModified\":\"2019-11-21T13:02:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png\",\"width\":250,\"height\":250,\"caption\":\"Crear objeto con JavasCript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como crear y usar un objeto en JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como crear y usar un objeto en JavaScript - Jose Aguilar Blog","description":"Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como crear y usar un objeto en JavaScript - Jose Aguilar Blog","og_description":"Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-11-21T12:58:41+00:00","article_modified_time":"2019-11-21T13:02:29+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/","name":"Como crear y usar un objeto en JavaScript - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png","datePublished":"2019-11-21T12:58:41+00:00","dateModified":"2019-11-21T13:02:29+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como crear y usar un objeto con JavaScript. Instaciar una clase y usar sus atributos y m\u00e9todos. Programaci\u00f3n orientada a objetos.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/11\/crear-objeto-javascript.png","width":250,"height":250,"caption":"Crear objeto con JavasCript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-y-usar-un-objeto-en-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como crear y usar un objeto en JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7497"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7497\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7498"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}