JavaScript es un lenguaje de programación complejo que nos permite desarrollar para el backend y el frontend de la web. Como todo lenguaje de programación, JavaScript nos permite establecer comunicación con las máquinas por medio de reglas y lógicas internas. Dentro de la sintaxis de JavaScript, los objetos y sus propiedades son importantes para desarrollar una página web. Por ello, en este post, te enseñaremos cómo acceder a las propiedades de los objetos en JavaScript para que las puedas modificar y utilizar en tu página web.
¿Qué es un objeto en JavaScript?
Acceder a las propiedades de los objetos en JavaScript es una función básica a la hora de escribir nuestro código. Por ello, y porque estamos iniciando en nuestro camino de la programación en JavaScript, primero debemos entender qué es un objeto u objetos JavaScript.
Al igual que en la vida real existen objetos que tienen determinadas características, como una silla tiene un ancho, un alto, un grosor y un color, los objetos en JavaScript son elementos que tienen determinadas propiedades. Un objeto puede tener una sola propiedad o puede tener decenas de propiedades, dependiendo de lo que necesitemos determinar. La diferencia entre estas propiedades y una variable en JavaScript es que las propiedades están enlazadas al objeto u objetos JavaScript específicos. Sin embargo, funcionan de una manera muy similar, pues ambas nos permiten insertar valores a distintas palabras clave o keywords.
En JavaScript, llamamos objetos literales a aquellos objetos que definen sus características usando el conjunto de clave y valor dentro del mismo, asignando un valor textual a cada propiedad. A continuación, te explicamos cómo escribir un objeto de este tipo, para que después te sientas motivado a aprender a recorrer un array de objetos.
¿Cómo escribimos un objeto en JavaScript?
Antes de enseñarte cómo acceder a las propiedades de los objetos en JavaScript, debemos aprender cómo crear objetos con propiedades en este lenguaje de programación. En JavaScript, un objeto literal se debe escribir usando los símbolos de las llaves { }. Dentro de estas llaves insertamos conjuntos de clave y valor. En un objeto literal, puedes insertar uno o más de estos conjuntos, separándolos siempre por comas.
A continuación, te mostramos un ejemplo de cómo escribir un objeto literal con conjuntos que definen su nombre, precio e idioma:
//Acceder a las propiedades de los objetos en JavaScript
let myObj = {
name: 'keyboard',
price: 32.99
ISOCode: 'ES'
}En las líneas de código anteriores hemos definido una variable usando la palabra clave let y le hemos dado el nombre myObj. Hemos escrito el nombre de esta manera siguiendo la nomenclatura camelCase, caracterizada por separar las palabras de un nombre a partir de mayúsculas en vez de por espacios.
Recuerda que separar las palabras con espacios en JavaScript puede hacer que se creen más variables de las necesarias. Por ello, muchos usan esta nomenclatura o separan las palabras usando un guion bajo en vez de un espacio.
Luego, hemos creado el objeto literal abriendo y cerrando las llaves, dentro de las que hemos definido sus propiedades de JavaScript textualmente. Entonces, ahora que tenemos un objeto, es el momento de acceder a las propiedades de los objetos en JavaScript.
¿Cómo acceder a las propiedades de los objetos en JavaScript?
Todos los lenguajes de programación nos permiten acceder a las propiedades de sus objetos. Algunos lenguajes nos permiten acceder a propiedades usando símbolos como flechas. Para acceder a las propiedades de los objetos en JavaScript, debemos escribir el nombre del objeto y el nombre de la propiedad separados por un punto.
Entonces, lo que debes hacer es empezar una línea de código con el nombre que le has dado a tu objeto, en nuestro caso myObj, y luego poner un punto. Una vez hagas esto, tu software te sugerirá las propiedades de JavaScript disponibles, que has definido anteriormente. Siguiendo el ejemplo de nuestro objeto, si quisiéramos acceder a la información del ISOCode de myObj, lo escribiríamos de la siguiente manera:
//Acceder a las propiedades de los objetos en JavaScript
myObj.ISOCodeAcceder a las propiedades de los objetos en JavaScript nos permite cambiar las propiedades de una manera sencilla, ya sea cambiando su contenido directamente o añadiéndole factores que lo cambian. Después, hay que recorrer un array de objetos. Entonces podemos, por ejemplo, cambiar el valor de ISOCode de myObj a inglés escribiendo la siguiente asignación:
//Acceder a las propiedades de los objetos en JavaScript
myObj.ISOCode = 'EN'La asignación anterior hace que ahora la propiedad ISOCode valga ‘EN’. Usando esto, también podemos cambiar la variable de precio de nuestro objeto. Digamos que queremos alterar el valor de esta propiedad sumando 10 al precio actual; entonces, lo escribiríamos de la siguiente manera:
//Acceder a las propiedades de los objetos en JavaScript
myObj.price = myObj.price + 10¿Quieres seguir aprendiendo?
Después de leer este post sabes cómo acceder a las propiedades de lo objetos en JavaScript para modificar las propiedades de JavaScript o insertar nuevas directamente. Con esto, has dado uno de los primeros pasos en tu camino para programar en JavaScript y ¡estamos seguros de que quieres seguir aprendiendo!
Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, donde no solo aprenderás todo lo necesario para desarrollar una página web en JavaScript, sino también otros lenguajes de programación para la web. Así, al cabo de unos pocos meses, serás un experto en desarrollo web y tendrás como comprobarlo con tus propias líneas de código. ¿A qué esperas para unirte y cumplir tu sueño de ser un desarrollador web? ¡No lo dudes más e inscríbete!
