Table of Contents
En esta ocasión, te vengo a hablar de los objetos en Javascript ejemplos, como ya sabes, Javascript cuenta con diferentes tipos de datos, dentro de los que se encuentran los Strings, Los Integers y los Floats, por mencionar algunos
Si tienes alguna duda, te invito a revisar mis publicaciones anteriores de fundamentos de Javascript o si eres de las personas que aprenden viendo, te dejo el enlace a mis videos en el canal:
Sin embargo, también existen tipos de datos un poco más complejos porque logran almacenar colecciones de datos, por ejemplo un arreglo o array y los objetos en Javascript.
¡Hola de nuevo!, Espero que esta serie de artículos te esten ayudando a mejorar tus habilidades dentro del desarrollo web, adicional, ya sabes que siempre puedes complementar estos artículos con las listas de reproducción que tengo en mi canal sobre cursos de Javascript, PHP y otras tecnologías.
En este punto nos centraremos exclusivamente a hablar de los objetos en Javascript, los cuales son colecciones de datos que se representan mediante la asociación de una clave, es decir, el nombre del atributo del objeto y un valor, que puede ser de cualquier tipo, incluso una función.
1. ¿Qué son los Objetos en Javascript?
Imagina que un objeto es como un librero, en donde tienes libros almacenados y se identifican mediante su nombre (key del objeto) y al momento de leer toda la información, justo es su valor (value del objeto).
Eso quiere decir que el total de libros dentro del librero, básicamente serían como una lista de objetos en javascript
2. ¿Como se declaran los objetos en Javascript?
Podemos ocupar 2 sintaxis, que son las más comunes y conocidas.
La primera es mediante la palabra reservada new (new es utilizado en varios lenguajes para poder definir clases).
La segunda es mediante los cochetes({}) que nos permiten una sintaxis más sencilla sin estar escribiendo tanto, entonces, prácticamente podríamos hacer algo como esto:
const objeto = new Object()
const otro_objeto = {}Como puedes observar, en la primera sintaxis, estamos instanciando un nuevo objeto mediante la clase Object (La O es mayúscula)
Mientras que en el otro_objeto, ocupamos la sintaxis de un objeto literal, y más sencillo.
En cualquiera de los dos casos, hemos creados dos objetos en javascript vacíos, sin embargo, podemos ir añadiendo atributos mediante la asociación `key: value`
const person = {
name: "8dev",
role: "Developer",
zipcode: 77500:
}Observa que en este caso estamos definiendo un objeto que cuenta con 3 propiedades, la primera es el nombre, la segunda el rol y la tercera el zipcode.
Lo interesante de esto es que tanto nombre como rol son de tipo string, mientras que zipcode es de tipo Integer.
También podemos escribir más de 1 palabra como nombre de la propiedad, sin embargo, comúnmente utilizamos tipos de notación como Camel Case o Snake Case para definir las propiedades de los objetos en javascript, es decir, podemos hacer algo como esto:
const person = {
name: "8dev",
role: "Developer",
zipcode: 77500,
"fecha-de-nacimiento": "20-10-2000"
}Pero es más conveniente hacer cualquier de estas dos opciones:
const person = {
name: "8dev",
role: "Developer",
zipcode: 77500,
fecha_de_nacimiento: "20-10-2000"
}
const person = {
name: "8dev",
role: "Developer",
zipcode: 77500,
fechaDeNacimiento: "20-10-2000"
}3. ¿Como acceder a los valores de las propiedades de los objetos en javascript?
Para poder acceder a los valores de las propiedades de los objetos en javascript, simplemente tenemos que anteponer el nombre del objeto, seguido de un punto (.) y después el nombre de la propiedad, por lo que podemos hacer algo como esto:
alert(`Hola soy ${person.name}, Bienvenidos a mi sitio`)En dado caso de que hayas agregado una propiedad de dos valores, Javascript generará un error si queremos acceder con la notación del punto, ejemplo, esté código nos daría un error:
const person = {
name: "8dev",
role: "Developer",
zipcode: 77500,
"fecha nacimiento": "20-10-2000"
}
alert(person.fecha nacimiento)Ya que Javascript piensa que estás intentando acceder a la propiedad fecha de person, que no existe y adicional, no encuentra la palabra nacimiento, es por ello que se recomienda utilizar otro tipo de notación para la escritura de las propiedades, sin embargo, existe una forma de poder acceder y es mediante corchetes, es decir, podemos acceder a esa propiedad mediante:
person["fecha nacimiento"]4. Eliminar propiedades de Objetos en Javascript
Ahora, si lo que queremos es eliminar una propiedad de los objetos en javascript, podemos hacer uso de la palabra reservada delete, agregando el nombre del objeto y su propiedad, separados por un punto.
delete person.zipcodeAhora bien, comúnmente los objetos los vamos manipulando respecto a variables que ya tenemos definidas en el flujo del código, es decir, comúnmente hacemos algo como esto:
const name = "8dev"
const role = "Developer"
const zipcode = 77500
const birthdate = "20-10-2000"
const person = {
name: name,
role: role,
zipcode: zipcode,
fecha_nacimiento: birthdate
}Por lo que, si queremos acortar un poco la escritura y las variables se llaman exactamente como se llama la propiedad del objeto, podemos hacer algo como esto:
const person = {
name,
role,
zipcode,
fecha_nacimiento: birthdate
}Observa que en este caso: name, role y zipcode se repetian, por lo que los asignamos sin necesidad de escribir clave: valor, sin embargo, cuando no se repiten, podemos trabajar como lo hacemos normalmente.
5. Validar que existe una propiedad del objeto en Javascript
Algo que podemos hacer que me parece bastante útil con los Objetos, es la habilidad de revisar si existe o no una propiedad dentro del objeto, es decir, buscar dentro de un objeto javascript, para hacer eso, utilizamos la palabra reservada in.
Imaginemos que queremos saber si existe la propiedad address dentro de person, entonces, podemos hacer algo como esto:
"address" in personEs importante que para poderlo validar, la propiedad debe de ser una cadena de texto, es decir, debe de estar entre comillas, y esto nos devolvera true o false según sea el caso.
¿Qué crees que pasa si ponemos address sin comillas? Exacto, Javascript interpretará que lo que estamos comparando es una variable, por lo que dicha variable deberá almacenar el nombre completo de la propiedad para poder hacer la comparación.
6. ¿Ahora como lo recorro?
Es importante mencionarte que vamos a aprender como recorrer objetos en javascript, sin embargo, muchas veces estoy vienen dentro de un array de objetos javascript, por lo que primero tendríamos que recorrer el arreglo, para después recorrer el objeto.
La última parte de las actividades más comunes que realizamos con objetos, es recorrer un objeto javascript, y como ya sabemos, hay muchas formas de recorrerlos, sin embargo, una de las más usadas es el bucle for in, en este ejemplo, podemos hacer algo como esto:
for(let data in person){
console.log(data)
}¿Qué crees que suceda? Justo eso!, si ejecutamos este código, lo que estamos haciendo es recorrer cada key del objeto, por lo que nos aparecerán el nombre de las propiedades, name, role, zipcode, fecha_nacimiento.
Si lo que queremos es acceder al valor de dichas propiedades, entonces, la sintaxis cambia un poco, simplemente y como ya te estarás imaginando, podemos hacer uso de la sintaxis de corchetes.
for(let data in person){
console.log(person[data])
}En resumen, podemos concluir que los objetos en javascript son un tipo de datos de los más usados actualmente y por su gran extensibilidad, nos ayudan a definir grandes lógicas de datos.
Ahora, ya sabes como declarar un objeto en javascript, como asignarle propiedades, como eliminar una propiedad de objeto en javascript, como verificar si existe una propiedad en un objeto en javascript y como recorrer un objeto en javascript mediante el bucle for in.
En las siguientes entregas, te explicaré un poco más acerca de esto y su aplicación práctica.
¡Nos vemos la próxima!
