"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Propiedades de un objeto en Javascript

Exiten varias maneras de trabajar con las propiedades de un objeto en Javascript, según como tratemos de recorrerlas tendremos que usar una forma u otra.
No es lo mismo por ejemplo acceder directamente a las propiedades de un objeto en Javascript que tratar de iterar sobre un número de ellos y acceder a cierta propiedad, o recorrerlas en base a un índice.

Lo veremos mejor con los ejemplos que luego pondremos, en primer lugar enumeramos las distintas maneras de acceder a las propiedades de un objeto en Javascript.

Pensemos en que tenemos este objeto…

Notación de puntos

Esta es la manera más común y la que mejor legibilidad tiene además de ser la más sencilla de escribir, es por ello que, salvo que no sea posible utilizarla por una casuistica concreta, es las más recomendable.
Vamos a usar este método para acceder a un par de propiedades a distintos niveles.

Notación de corchetes

La notación de corchetes es otra manera de referenciar una propiedad de un objeto, no nos proporciona nada a mayores de la notación de puntos
Personalmente me gusta más usar los puntos ya que te ahorras tener que escribir corchetes y comillas para hacer lo mismo, pero cada uno escoge.
Volvemos a acceder igual que antes pero ahora con esta notación.

Notación de corchetes mediante una variable

Lo que si podemos hacer con la notación de corchetes que con la notación de puntos no podemos es usar una variable para contruir el nombre de la propiedad que queremos usar.
Esto sí que nos da un control mayor y nos permite hacer cosas que antes no podíamos, pensemos en que al contruirla podemos hacer uso de indices para acceder de forma dinámica, es importante que tengamos en cuenta las posibilidades que nos ofrece este método.

Podemos hacer lo mismo que antes

O podemos hacer cosas más complejas que de otra manera no podriamos, por ejemplo, imaginemos que queremos que el usuario pueda introducir un numero desde un input, y que en base a el de forma dinámica mostremos un alert con el lenguaje que corresponda.
En nuestro caso tenemos 4 lenguajes, independientemente de los controles que hagamos para permitir que el input solo acepte números y que el valor sea entre 1 y 4, la única manera que tenemos para que dinámicamente se pueda acceder es hacer algo así.

Como se aprecia usamos la notación de corchetes dos veces pero en el segundo caso apuntamos a una variable que no deja de ser un string que hemos construido de forma dinámica usando el valor de ese input.

Además de trabajar con los valores de un Objeto ya declarado, podemos añadirle propiedades o borrarlas, y tambien iterar sobre él.

Añadir una propiedad

Añadir una nueva propiedad es tan sencillo como nombrarla y darle el valor que queramos, si pensamos en el objeto anterior y quisieramos añadir un nuevo lenguaje de programación, por ejemplo «Python», solo tendría que hacer esto.

Borrar una propiedad

Tan sencillo es añadir como borrar, solo tenemos que usar la palabra reservada delete. Ahora vamos a borrar la propiedad que acabamos de añadir.

Comprobar una propiedad

Cuando trabajamos con las propiedades de un objeto en Javascript puede darse el caso de que estemos asignandolas dinámicamente durante el ciclo de vida de nuestras web, y llegados a un punto ese objeto pueda tener o no tener cierta propiedad.

Si nos vemos en un caso como este necesitamos antes de continuar comprobar la exitencia de la propiedad en cuestión.

Volvamos al caso anterior, tenemos nuestro objeto y queremos recuperar el valor de cierta propiedad que no existe.

Ahora mismo el valor de esa propiedad es Oscar undefined ya que no tengo el parametro apellido dentro del objeto.
Una manera de comprobarlo seria preguntarle si es distinto de undefined, pero los objetos ya tienen un método para comprobar la exitencia de cierta propiedad, es hasOwnProperty().

Podríamos comprobarlo de esta manera.

Ahora la variable nombreCompleto no será creada, pues el método ‘hasOwnProperty’ devuelve false porque no existe tal propiedad.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)