Objetos en Javascript
Objetos en Javascript. En este tutorial te enseñamos a crear, modificar y eliminar las propiedad de los objetos que se componen por los nombres, claves y valores. Muy Fácil y Rápido.
Introducción
Un objeto en JavaScript es un tipo de datos que se compone de una colección de nombres o claves y valores , representados en nombre: pares de valores . Los pares nombre: valor pueden constar de propiedades que pueden contener cualquier tipo de datos, incluidas cadenas, números y booleanos, así como métodos , que son funciones que se encuentran dentro de un objeto.
Los objetos en JavaScript son entidades independientes que se pueden comparar con objetos en la vida real. Por ejemplo, un libro podría ser un objeto que describiría por título, autor, número de páginas y género. Del mismo modo, un automóvil podría ser un objeto que describiría por el color, la marca, el modelo y la potencia. Las matrices de JavaScript también son un tipo de objeto.
Los objetos son un aspecto integral y fundamental de la mayoría de los programas de JavaScript. Por ejemplo, un objeto de cuenta de usuario puede contener datos tales como nombres de usuario, contraseñas y direcciones de correo electrónico. Otro caso de uso común es el carrito de la compra de una plataforma de compras web que podría consistir en una serie de muchos objetos que contienen toda la información pertinente para cada artículo, como el nombre, el precio y el peso de la información de envío. Una lista de tareas pendientes es otra aplicación común que puede consistir en objetos.
En este tutorial, repasaremos cómo crear un objeto, qué propiedades y métodos del objeto son, y cómo acceder, agregar, eliminar, modificar y recorrer las propiedades del objeto.
Creando un Objeto
Un objeto es un tipo de datos de JavaScript , del mismo modo que un número o una cadena también es un tipo de datos. Como tipo de datos, un objeto puede estar contenido en una variable.
Hay dos formas de construir un objeto en JavaScript:
- El objeto literal , que usa llaves:
{} - El constructor de objetos , que usa la
newpalabra clave
Podemos hacer un ejemplo de objeto vacío utilizando ambos métodos para fines de demostración.
Primero, el objeto literal.
// Initialize object literal with curly brackets
const objectLiteral = {};
El objeto literal inicializa el objeto con llaves.
En este próximo ejemplo, usaremos el constructor de objetos.
// Initialize object constructor with new Object
const objectConstructor = new Object();
Se crearon los mismos datos utilizando el método constructor de objetos que se inicializó con el new Object() .
Ambos enfoques crearán un objeto vacío. El uso de literales de objeto es el método más común y preferido, ya que tiene menos posibilidades de incoherencias y resultados inesperados.
Podemos crear un objeto de ejemplo, contenido en la variable gimli , para describir un personaje.
// Initialize gimli object
const gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
greet: function() {
return `Hi, my name is ${this.name}!`;
},
};
Nuestro nuevo objeto es gimli , que tiene tres propiedades. Cada propiedad consta de un nombre: par de valores , también conocido como clave: par de valores . weapon es uno de los nombres de propiedad, que está vinculado al valor de la propiedad "axe" , una cadena. Tiene un método, con un nombre de método de greet y el valor del método que consiste en el contenido de la función.
Dentro de greet , puede notar la palabra clave this . Al usar this dentro de un objeto, se refiere al objeto actual, en este caso gimli .
Al enviar gimli a la consola se imprimirá el objeto completo.
gimli;
Output
{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}
Esta salida puede representarse de manera diferente según la consola que esté utilizando, pero debe observar que todos los valores pasados al objeto se muestran en la salida.
A continuación, revisaremos las propiedades y métodos de un objeto JavaScript.
Propiedades y métodos
Los objetos pueden tener propiedades y métodos .
Una propiedad es la asociación entre un nombre (clave) y un valor dentro de un objeto, y puede contener cualquier tipo de datos. Una propiedad generalmente se refiere a la característica de un objeto.
Un método es una función que es el valor de una propiedad de objeto y, por lo tanto, una tarea que un objeto puede realizar.
Una forma fácil de recordar la diferencia entre las propiedades del objeto y los métodos es pensar en una propiedad como sustantivo y un método como verbo. name , race y weapon son todos los nombres asociados con un objeto, y son propiedades. fight() o talk() son verbos que pueden usarse como una definición de función de método.
Acceso a las propiedades del objeto
Hay dos formas de acceder a las propiedades de un objeto.
- Dot notación:
. - Notación de paréntesis:
[]
Revisemos nuestro objeto de ejemplo original, gimli .
const gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
greet: function() {
return `Hi, my name is ${this.name}!`;
},
};
Si queremos recuperar el valor de la propiedad del weapon , podemos hacerlo con la notación de puntos del objeto escribiendo el nombre de la variable del objeto, seguido de un punto ( . ) Y la propiedad o el nombre del método.
// Retrieve the value of the weapon property
gimli.weapon;
Output
"axe"
gimli.weapon genera el valor de la propiedad, que es "axe" . También podemos recuperar los mismos datos con notación de corchetes de objetos. Similar a la forma en que puede indexar y acceder a una cadena , la sintaxis para la notación de corchetes es dos corchetes ( [] ) que incluyen el nombre de la propiedad.
// Retrieve the value of the weapon property
gimli["weapon"];
Output
"axe"
Tanto la notación de puntos como la notación de corchetes se usan regularmente. La notación de puntos es más rápida y legible, pero tiene más limitaciones. La notación de paréntesis permite el acceso a los nombres de propiedad almacenados en una variable, y se debe usar si la propiedad de un objeto contiene algún tipo de carácter especial.
Para recuperar un método de objeto, lo llamarías mucho de la misma manera que llamarías a una función normal, solo adjunta a la variable de objeto.
gimli.greet();
Output
"Hi, my name is Gimli!"
En el ejemplo anterior, vemos que se devuelve el valor de cadena para el método de objeto greet() .
Ahora podemos pasar a modificar las propiedades del objeto mediante la adición de pares de nombre: valor o la modificación de los existentes.
Agregar y modificar propiedades de objeto
Para agregar una nueva propiedad a un objeto, asignaría un nuevo valor a una propiedad con el operador de asignación ( = ).
Por ejemplo, podemos agregar un tipo de datos numéricos al objeto gimli como la propiedad nueva age . Tanto la notación de punto como la de paréntesis se pueden usar para agregar una nueva propiedad de objeto.
// Add new age property to gimli
gimli.age = 139;
// Add new age property to gimli
gimli["age"] = 139;
Podemos acceder a ese valor igual que arriba, ya sea con la notación de puntos o la notación de corchetes.
gimli.age;
Output
139
También se puede agregar un método al objeto usando el mismo proceso.
// Add new fight method to gimli
gimli.fight = function() {
return `Gimli attacks with an ${this.weapon}.`;
}
Una vez que hemos creado este nuevo método de objeto, podemos llamarlo como lo hicimos anteriormente.
gimli.fight();
Output
"Gimli attacks with an axe."
Usando el mismo método, la propiedad de un objeto se puede modificar asignando un nuevo valor a una propiedad existente.
// Update weapon from axe to battle axe
gimli.weapon = "battle axe";
En este punto, si llamamos al objeto, veremos todas nuestras adiciones y modificaciones.
gimli;
Output
{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}
Mediante la operación de asignación, podemos modificar las propiedades y métodos de un objeto JavaScript.
Eliminar propiedades de objeto
Para eliminar una propiedad de un objeto, utilizará la palabra clave delete . delete es un operador que elimina una propiedad de un objeto.
En el siguiente ejemplo, eliminaremos la propiedad del weapon de gimli utilizando delete .
// Remove weapon from gimli
delete gimli.weapon;
Output
true
La operación de delete evalúa como true si la propiedad se eliminó correctamente o si se utilizó en una propiedad que no existe.
Podemos probar la salida de gimli para ver si tuvo éxito.
gimli;
Output
{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}
En el resultado anterior, el nombre del weapon y su valor asociado ya no están disponibles, lo que demuestra que hemos eliminado correctamente la propiedad.
En la siguiente sección, veremos formas de iterar a través de objetos en JavaScript.
Looping Through Object Properties
JavaScript tiene un tipo incorporado de bucle for que está específicamente diseñado para iterar sobre las propiedades de un objeto. Esto se conoce como el bucle for...in .
Aquí hay una versión simplificada de nuestro ejemplo de objeto principal, gimli .
const gimli = {
name: "Gimli",
race: "dwarf",
weapon: "battle axe",
};
Podemos usar for...in atravesar todas las propiedades de gimli e imprimirlas en la consola. Usando la notación de corchetes, podemos recuperar el valor de la propiedad como una variable, en este caso key .
// Iterate through properties of gimli
for (let key in gimli) {
console.log(gimli[key]);
}
Output
Gimli
dwarf
battle axe
También podemos recuperar el nombre de propiedad utilizando solo la primera variable en el ciclo for...in . Hemos utilizado un método de cadena para convertir los valores clave a mayúsculas .
// Get keys and values of gimli properties
for (let key in gimli) {
console.log(key.toUpperCase() + ':', gimli[key]);
}
Output
NAME: Gimli
RACE: dwarf
WEAPON: battle axe
El bucle for...in no se debe confundir con el bucle for...of , que se usa exclusivamente en el tipo de objeto Array. Puede obtener más información sobre la iteración a través de matrices en el tutorial " Comprender matrices en JavaScript ".
Otro método de enumeración útil es el método Object.keys() , que devolverá una matriz de las claves del objeto.
// Initialize method on gimli object to return property keys
Object.keys(gimli);
Output
["name", "race", "weapon"]
Este método nos permite trabajar con las claves o los nombres de un objeto como una matriz, para que pueda aprovechar todos los métodos disponibles para las matrices de JavaScript.
Conclusión
Los objetos son una característica extremadamente útil y versátil del lenguaje de programación JavaScript. Son algunos de los componentes básicos de la escritura de código en JavaScript, y son una forma práctica de organizar los datos relacionados y la funcionalidad. Las listas de tareas pendientes, los carritos de compras, las cuentas de usuario y las ubicaciones en un mapa web son algunos de los muchos ejemplos de objetos de JavaScript del mundo real que puede encontrar.
En este tutorial, aprendimos la diferencia entre las propiedades y los métodos, cómo crear objetos y cómo agregar, eliminar, modificar y recorrer las propiedades de los objetos. Para obtener más información sobre los objetos de JavaScript, lea sobre Trabajar con objetos en Mozilla Developer Network.
Fuente. Artículo traducido y con muy ligeras modificaciones de: https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript
