Compartir
Publicidad

Javascript Objetos y Literales

Javascript Objetos y Literales
0 Comentarios
Publicidad
Publicidad

Cada día usamos más Javascript y cada día nos damos más cuenta de las lagunas que tenemos. Una de las tareas más habituales que realizamos con Javascript es la creación de objetos. La forma más sencilla de crear objetos en Javascript es usando literales, vamos ver un primer ejemplo:

<html>
<head>
<script type="text/javascript">

var persona= {nombre:"pedro",apellidos:"gomez"};

console.log(persona.nombre);
console.log(persona.apellidos);

</script>
</head>
<body>
</body>
</html>

En este caso nos hemos creado un objeto persona que incluye nombre y apellidos. Para acceder a las propiedades utilizamos el operador ".". En este caso simplemente imprimimos los valores por la consola.

consola.png

Es aquí donde comienzan los problemas ya que podemos declarar el objeto también utilizando comillas en nombre y apellidos de tal forma que el código fuera el siguiente:

<html>
<head>
<script type="text/javascript">

var persona= {"nombre":"pedro","apellidos":"gomez"};

console.log(persona.nombre);
console.log(persona.apellidos);

</script>
</head>
<body>
</body>
</html>

Ambas expresiones son completamente válidas. Sin embargo a veces uno se pregunta ¿Para qué tener dos opciones?. Bueno podemos cambiar el código inicial por algo parecido pero que ayuda a aclarar las cosas:

 <html>
 <head>
 <script type="text/javascript">


 var persona= {nombre-persona:"pedro",apellidos-persona:"gomez"};

 console.log(nombre-persona.nombre);
 console.log(apellidos-persona.apellidos);

 </script>
 </head>
 <body>
 </body>
 </html>

Hemos cambiado las variables nombre y apellidos por nombre-persona y apellidos-persona. Esto nos generará un error ya que no son nombres válidos de variables de Javascript.

errorjavascript.png

Recordemos que el caracter que sí está soportado es el de guión bajo "_". ¿Como podemos solventar este problema?. Muy sencillo usaremos comillas en la declaración de las variables.

var persona= {"nombre-persona":"pedro","apellidos-persona":"gomez"};

De esta forma el código vuelve a ser válido.Las comillas aportan flexibilidad. Ahora bien si queremos acceder a los datos e imprimirlos por consola volveremos a tener problemas.

console.log(persona.nombre-persona);

Anotación de Array

Una solución rápida a esta problemática es acceder al objeto como si se tratara de un Array.

<html>
 <head>
 <script type="text/javascript">


 var persona= {"nombre-persona":"pedro","apellidos-persona":"gomez"};

 console.log(persona["nombre-persona"]);
 console.log(persona["apellidos-persona"]);

 </script>
 </head>
 <body>
 </body>
 </html>

De igual manera que podemos acceder a la información podemos modificarla usando la notación de Array.

persona["nombre-persona"]="olga";

Así pues tanto la notación de tipo Array como la notación de tipo "." están soportadas por Javascript a nivel de objetos. Se recomienda utilizar la notación "." siempre que sea posible y dejar la notación de tipo Array para situaciones comprometidas como la que acabamos de abordar.

En GenbetaDev : Depurando en Javascript, JQuery DOM

Temas
Publicidad
Comentarios cerrados
Publicidad
Publicidad
Inicio