path: root/files/es/learn/javascript/objects/basics/index.html

---
title: Conceptos básicos de los objetos JavaScript
slug: Learn/JavaScript/Objects/Basics
tags:
  - API
  - Aprender
  - Artículo
  - JavaScript
  - Novato
  - Object
  - Objeto
  - Principiante
  - Sintaxis
  - instancia
  - 'l10n:priority'
  - notación de corchetes
  - notación de punto
  - objeto literal
  - tehoría
  - this
translation_of: Learn/JavaScript/Objects/Basics
---
<div><font><font>{{LearnSidebar}}</font></font></div>

<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>

<p class="summary"><font><font>En éste artículo, veremos fundamentos de sintaxis de los objetos de JavaScript y revisaremos algunas características de JavaScript que ya hemos analizado anteriormente en el curso, reiterando el hecho de que muchas de las funciones con las que ya has tratado de hecho son objetos.</font></font></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row"><font><font>Prerrequisitos:</font></font></th>
   <td><font><font>Conocimientos básicos de informática, conocimientos básicos de HTML y CSS, familiaridad con los principios básicos de JavaScript (consulta </font></font><a href="/es/docs/Learn/JavaScript/First_steps"><font><font>Primeros pasos</font></font></a><font><font> y </font></font><a href="/es/docs/Learn/JavaScript/Building_blocks"><font><font>Bloques de construcción</font></font></a><font><font>).</font></font></td>
  </tr>
  <tr>
   <th scope="row"><font><font>Objetivo:</font></font></th>
   <td><font><font>Para comprender la teoría básica detrás de la programación orientada a objetos, cómo esto se relaciona con JavaScript ("la mayoría de las cosas son objetos") y cómo empezar a trabajar con objetos de JavaScript.</font></font></td>
  </tr>
 </tbody>
</table>

<h2 id="Conceptos_básicos_de_objeto"><font><font>Conceptos básicos de objeto</font></font></h2>

<p><font><font>Un objeto es una colección de datos relacionados y/o funcionalidad (que generalmente consta de algunas variables y funciones, que se denominan propiedades y métodos cuando están dentro de objetos). Vamos a trabajar a través de un ejemplo para mostrate cómo son.</font></font></p>

<p><font><font>Para empezar, haz una copia local de nuestro </font><font>archivo </font></font><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html"><font><font>oojs.html</font></font></a><font><font> . </font><font>Esto contiene muy poco: un elemento {{HTMLElement ("script")}} para que escribas tu código fuente en él. Lo </font><font>usaremos como base para explorar la sintaxis básica de los objetos.</font></font></p>

<p><font><font>Al igual que con muchas cosas en JavaScript, la creación de un objeto a menudo comienza con la definición e iniciación de una variable. </font><font>Intenta ingresar lo siguiente debajo del código JavaScript que ya está en tu archivo, luego guarda y actualiza:</font></font></p>

<pre class="brush: js notranslate"><font><font>var persona = {};</font></font></pre>

<p><font><font>Si ingresas </font></font><code>persona</code><font><font> en tu entrada de texto y presionas el botón, debes obtener el siguiente resultado:</font></font></p>

<pre class="brush: js notranslate"><font><font>[objeto Objeto]</font></font></pre>

<p><font><font>¡Felicidades!, acabas de crear tu primer objeto. </font><font>¡Trabajo realizado! </font><font>Pero este es un objeto vacío, por lo que realmente no podemos hacer mucho con él. </font><font>Actualicemos nuestro objeto para que se vea así:</font></font></p>

<pre class="brush: js notranslate"><font><font>var persona = {
  nombre: ['Bob', 'Smith'],
  edad: 32,
  genero: 'masculino',
  intereses: ['música', 'esquí'],
  bio: function () {
    alert(this.nombre[0] + '' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.');
  },
  saludo: function() {
    alert('Hola, Soy '+ this.nombre[0] + '. ');
  }
};</font></font>
</pre>

<p><font><font>Después de guardar y actualizar, intenta ingresar algunos de los siguientes en tu entrada de texto:</font></font></p>

<pre class="brush: js notranslate"><font><font>persona.nombre
persona.nombre[0]
persona.edad
persona.intereses[1]</font></font><font><font>
persona.bio()
persona.saludo()</font></font></pre>

<p><font><font>¡Ahora tienes algunos datos y funcionalidades dentro de tu objeto, y ahora puedes acceder a ellos con una sintaxis simple y agradable!</font></font></p>

<div class="note">
<p><strong>Nota</strong>: Si tienes problemas para hacer que esto funcione, intenta comparar tu código con nuestra versión - ve <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (también <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">ve que se ejecuta en vivo</a>). La versión en vivo te dará una pantalla en blanco, pero eso está bien. De nuevo, abre tu devtools e intenta escribir los comandos anteriores para ver la estructura del objeto.</p>
</div>

<p>Entonces, ¿qué está pasando aquí? Bien, un objeto se compone de varios miembros, cada uno de los cuales tiene un nombre (por ejemplo, <code>nombre</code> y <code>edad</code>) y un valor (por ejemplo, <code>['Bob', 'Smith']</code> y <code>32</code>). Cada par nombre/valor debe estar separado por una coma, y el nombre y el valor en cada caso están separados por dos puntos. La sintaxis siempre sigue este patrón:</p>

<pre class="brush: js notranslate">var nombreObjeto = {
  miembro1Nombre: miembro1Valor,
  miembro2Nombre: miembro2Valor,
  miembro3Nombre: miembro3Valor
}</pre>

<p>El valor de un miembro de un objeto puede ser prácticamente cualquier cosa: en nuestro objeto <code>persona </code>tenemos una cadena de texto, un número, dos arreglos y dos funciones. Los primeros cuatro elementos son elementos de datos y se denominan <strong>propiedades</strong> del objeto. Los dos últimos elementos son funciones que le permiten al objeto hacer algo con esos datos, y se les denomina <strong>métodos</strong> del objeto.</p>

<p>Un objeto como este se conoce como un <strong>objeto literal </strong>— literalmente hemos escrito el contenido del objeto tal como lo fuimos creando. Esto está en contraste con los objetos instanciados de las clases, que veremos más adelante.</p>

<p>Es muy común crear un objeto utilizando un objeto literal cuando deseas transferir una serie de elementos de datos relacionados y estructurados de alguna manera, por ejemplo, enviando una solicitud al servidor para ponerla en una base de datos. Enviar un solo objeto es mucho más eficiente que enviar varios elementos individualmente, y es más fácil de procesar que con un arreglo, cuando deseas identificar elementos individuales por nombre.</p>

<h2 id="Notación_de_punto">Notación de punto</h2>

<p>Arriba, accediste a las propiedades y métodos del objeto usando <strong>notación de punto (dot notation)</strong>. El nombre del objeto (<code>persona</code>) actúa como el <strong>espacio de nombre (namespace)</strong>; al cual se debe ingresar primero para acceder a cualquier elemento <strong>encapsulado</strong> dentro del objeto. A continuación, escribe un punto y luego el elemento al que deseas acceder: puede ser el nombre de una simple propiedad, un elemento de una propiedad de arreglo o una llamada a uno de los métodos del objeto, por ejemplo:</p>

<pre class="brush: js notranslate">persona.edad
persona.<font><font>intereses</font></font>[1]
persona.bio()</pre>

<h3 id="Espacios_de_nombres_secundarios">Espacios de nombres secundarios</h3>

<p>Incluso es posible hacer que el valor de un miembro del objeto sea otro objeto. Por ejemplo, intenta cambiar el miembro nombre de</p>

<pre class="brush: js notranslate">nombre: ['Bob', 'Smith'],</pre>

<p>a</p>

<pre class="brush: js notranslate">nombre : {
  pila: 'Bob',
  apellido: 'Smith'
},</pre>

<p>Aquí estamos creando efectivamente un <strong>espacio de nombre secundario (sub-namespace)</strong>. Esto suena complejo, pero en realidad no es así: para acceder a estos elementos solo necesitas un paso adicional que es encadenar con otro punto al final. Prueba estos:</p>

<pre class="brush: js notranslate">persona.nombre.pila
persona.nombre.apellido</pre>

<p><strong>Importante</strong>: en este punto, también deberás revisar tu código y cambiar cualquier instancia de</p>

<pre class="brush: js notranslate">nombre[0]
nombre[1]</pre>

<p>a</p>

<pre class="brush: js notranslate">nombre.pila
nombre.apellido</pre>

<p>De lo contrario, sus métodos ya no funcionarán.</p>

<h2 id="Notación_de_corchetes">Notación de corchetes</h2>

<p>Hay otra manera de acceder a las propiedades del objeto, usando la notación de corchetes. En lugar de usar estos:</p>

<pre class="brush: js notranslate">persona.edad
persona.nombre.pila</pre>

<p>Puedes usar</p>

<pre class="brush: js notranslate">persona['edad']
persona['nombre']['pila']</pre>

<p>Esto se ve muy similar a cómo se accede a los elementos en un arreglo, y básicamente es lo mismo: en lugar de usar un número de índice para seleccionar un elemento, se esta utilizando el nombre asociado con el valor de cada miembro. No es de extrañar que los objetos a veces se denominen <strong>arreglos asociativos</strong>: asocian cadenas de texto a valores de la misma manera que las arreglos asocian números a valores.</p>

<h2 id="Establecer_miembros_de_objetos">Establecer miembros de objetos</h2>

<p>Hasta ahora solo hemos buscado recuperar (u <strong>obtener</strong>) miembros del objeto: también puede <strong>establecer</strong> (actualizar) el valor de los miembros del objeto simplemente declarando el miembro que deseas establecer (usando la notación de puntos o corchetes), de esta manera:</p>

<pre class="brush: js notranslate">persona.edad = 45;
persona['nombre']['apellido'] = 'Cratchit';</pre>

<p>Intenta ingresar estas líneas y luego vuelve a ver a los miembros para ver cómo han cambiado:</p>

<pre class="brush: js notranslate">persona.edad
persona['nombre']['apellido']</pre>

<p>Establecer miembros no solo es actualizar los valores de las propiedades y métodos existentes; también puedes crear miembros completamente nuevos. Prueba estos:</p>

<pre class="brush: js notranslate">persona['ojos'] = 'avellana';
persona.despedida = function() { alert("¡Adiós a todos!"); }</pre>

<p>Ahora puedes probar a los nuevos miembros:</p>

<pre class="brush: js notranslate">persona['ojos']
person.despedida()</pre>

<p>Un aspecto útil de la notación de corchetes es que se puede usar para establecer dinámicamente no solo los valores de los miembros, sino también los nombres de los miembros. Digamos que queremos que los usuarios puedan almacenar tipos de valores personalizados en sus datos personales, escribiendo el nombre y el valor del miembro en dos entradas de texto. Podríamos obtener esos valores de esta manera:</p>

<pre class="brush: js notranslate">var nombrePerzonalizado = entradaNombre.value;
var valorPerzonalizado = entradaValor.value;</pre>

<p>entonces podríamos agregar este nuevo miembro nombre y valor al objeto <code>persona</code> de esta manera:</p>

<pre class="brush: js notranslate">persona[nombrePerzonalizado] = valorPerzonalizado;</pre>

<p>Para probar esto, intenta agregar las siguientes líneas en tu código, justo debajo de la llave de cierre del objeto <code>persona</code>:</p>

<pre class="brush: js notranslate">var nombrePerzonalizado = 'altura';
var valorPerzonalizado = '1.75m';
persona[nombrePerzonalizado] = valorPerzonalizado;</pre>

<p>Ahora intenta guardar y actualizar, e ingresa lo siguiente en tu entrada de texto:</p>

<pre class="brush: js notranslate">persona.altura</pre>

<p>Agregar una propiedad a un objeto no es posible con la notación de puntos, que solo puede aceptar un nombre de miembro literal, no un valor variable que apunte a un nombre.</p>

<h2 id="¿Qué_es_this_este">¿Qué es "this" (este)?</h2>

<p>Es posible que hayas notado algo un poco extraño en nuestros métodos. Mira esto, por ejemplo:</p>

<pre class="brush: js notranslate"><font><font>saludo</font></font>: function() {
  alert(<font><font>'¡Hola!, Soy '+ </font></font>this.nombre.pila + '.');
}</pre>

<p>Probablemente te estés preguntando qué es <code>"this"</code>. La palabra clave <code>this</code> se refiere al objeto actual en el que se está escribiendo el código, por lo que en este caso <code>this</code> es equivalente a la <code>persona</code>. Entonces, ¿por qué no escribir <code>persona</code> en su lugar? Como verás en el artículo <a href="/es/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orientado a objetos para principiantes</a> cuando comenzaremos a crear constructores, etc., <code>this</code> es muy útil: siempre asegurará que se usen los valores correctos cuando cambie el contexto de un miembro (por ejemplo, dos diferentes instancias de objetos <code>persona</code>) pueden tener diferentes nombres, pero querráx usar su propio nombre al decir su saludo).</p>

<p>Vamos a ilustrar lo que queremos decir con un par de objetos persona simplificados:</p>

<pre class="brush: js notranslate">var persona1 = {
  nombre: 'Chris',
  saludo: function() {
    alert(<font><font>'¡Hola!, Soy '+ </font></font>this.nombre + '.');
  }
}

var persona2 = {
  nombre: 'Brian',
  saludo: function() {
    alert(<font><font>'¡Hola!, Soy '+ </font></font>this.nombre + '.');
  }
}</pre>

<p>En este caso, <code>persona1.saludo()</code> mostrará "<font><font>¡Hola!</font></font>, Soy Chris"; <code>persona2.saludo()</code> por otro lado mostrará "<font><font>¡Hola!</font></font>, Soy Brian", aunque el código del método es exactamente el mismo en cada caso. Como dijimos antes, <code>this</code> es igual al objeto en el que está el código; esto no es muy útil cuando se escriben objetos literales a mano, pero realmente se vuelve útil cuando se generan objetos dinámicamente (por ejemplo, usando constructores) Todo se aclarará más adelante.</p>

<h2 id="Has_estado_usando_objetos_todo_el_tiempo">Has estado usando objetos todo el tiempo</h2>

<p>A medida que has estado repasando estos ejemplos, probablemente hayas pensando que la notación de puntos que has usando es muy familiar. ¡Eso es porque la has estado usando a lo largo del curso! Cada vez que hemos estado trabajando en un ejemplo que utiliza una API de navegador incorporada o un objeto JavaScript, hemos estado usando objetos, porque tales características se crean usando exactamente el mismo tipo de estructuras de objetos que hemos estado viendo aquí, aunque más complejos que nuestros propios ejemplos personalizados.</p>

<p>Entonces cuando usaste métodos de cadenas de texto como:</p>

<pre class="brush: js notranslate">myCadena.split(',');</pre>

<p>Estabas usando un método disponible en una instancia de la clase <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Cada vez que creas una cadena en tu código, esa cadena se crea automáticamente como una instancia de String, y por lo tanto tiene varios métodos/propiedades comunes disponibles en ella.</p>

<p>Cuando accediste al modelo de objetos del documento (document object model) usando líneas como esta:</p>

<pre class="brush: js notranslate">var miDiv = document.createElement('div');
var miVideo = document.querySelector('video');</pre>

<p>Estaba usando métodos disponibles en una instancia de la clase <code><a href="/es/docs/Web/API/Document">Document</a></code>. Para cada página web cargada, se crea una instancia de <code>Document</code>, llamada <code>document</code>, que representa la estructura, el contenido y otras características de la página entera, como su URL. De nuevo, esto significa que tiene varios métodos/propiedades comunes disponibles en él.</p>

<p>Lo mismo puede decirse de prácticamente cualquier otro Objeto/API incorporado que hayad estado utilizando: <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p>

<p>Ten en cuenta que los Objetos/API incorporados no siempre crean instancias de objetos automáticamente. Como ejemplo, la <a href="/es/docs/Web/API/Notifications_API">API de Notificaciones</a>, que permite que los navegadores modernos activen las notificaciones del sistema, requiere que crees una instancia de un nuevo objeto para cada notificación que desees disparar. Intenta ingresar lo siguiente en tu consola de JavaScript:</p>

<pre class="brush: js notranslate">var miNotificacion = new Notification('¡Hola!');</pre>

<p>De nuevo, veremos qué son los constructores en un artículo posterior.</p>

<div class="note">
<p><strong>Nota</strong>: Es útil pensar en la forma en que los objetos se comunican como <strong>paso de mensajes</strong> — cuando un objeto necesita otro objeto para realizar algún tipo de acción a menudo enviará un mensaje a otro objeto a través de uno de sus métodos, y esperará una respuesta, que conocemos como un valor de retorno.</p>
</div>

<h2 id="Resumen">Resumen</h2>

<p><font><font>Enhorabuena, has llegado al final de nuestro primer artículo sobre objetos JS: ahora debes tener una buena idea de cómo trabajar con objetos en JavaScript, incluida la creación de tus propios objetos simples. </font><font>También debes apreciar que los objetos son muy útiles como estructuras para almacenar datos y funcionalidades relacionadas; si trataras de hacer un seguimiento de todas las propiedades y métodos en nuestro </font></font><font><font>objeto </font></font><code>persona</code><font><font> como variables y funciones separadas, sería ineficiente y frustrante, y tendríamos el riesgo de chocar con otras variables y funciones que tienen los mismos nombres. </font><font>Los objetos nos permiten mantener la información segura y protegida en su propio paquete, fuera del peligro.</font></font></p>

<p><font><font>En el próximo artículo comenzaremos a ver la teoría de programación orientada a objetos (OOP) y cómo se pueden usar dichas técnicas en JavaScript.</font></font></p>

<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>