Literales de objeto en Javascript

  • Por
Cómo podemos crear objetos en Javascript a partir de un literal, operaciones típicas que puedes realizar con esos objetos.

Voy a comenzar una serie de artículos que me sirven como apuntes de programación orientada a objetos en Javascript. Este lenguaje es bastante particular en este sentido y en ocasiones te permite hacer cosas que en otros lenguajes serían impensables. También al contrario, algunas cosas básicas de lenguajes tradicionales en Programación Orientada a Objetos no existen en Javascript.

Javascript no tiene clases como tal, por lo menos hasta que llegue la nueva actualización Ecma6 prevista para 2015, pero sí que tiene objetos. Además tiene algo que no todos los lenguajes poseen, un mecanismo para la creación de objetos a partir de lo que conocemos como "literal".

Nota: Para los que no conozcan el término "literal", cabe decir que es una palabra que indica algo escrito de manera "literal". Aunque sea muy feo usar la misma palabra para definir algo, me lo vas a permitir porque es la mejor que existe. Un literal es algo extremadamente sencillo de entender con un ejemplo.
var x = "hola";

En esa línea de código "hola" es un literal. En concreto decimos que es un "literal de cadena". Ahora mira esta otra línea:
y +=5;

Cuando ves un número escrito tal cual en tu código decimos que es un literal numérico.

Podemos crear un objeto en Javascript asignando un valor literal de objeto en una variable. Eso se consigue colocando dicho literal entre llaves y dentro de ellas tantas propiedades o métodos con pares "clave/valor", por medio de una sintaxis como esta:

var dimensiones = {
    altura: 34,
    anchura: 455
}

Como estás viendo, tenemos una variable dimensiones. Al asignarle un literal objeto estamos realmente asignando una referencia a un objeto en la memoria creado con las propiedades que acabamos de asignar.

Las propiedades se separan por comas y se coloca siempre el nombre de la propiedad, el caracter ":" y luego el valor de la propiedad.

Por supuesto, también podremos asignar métodos a nuestros objetos literales.

var dimensiones = {
    altura: 34,
    anchura: 455,
    area: function(){
	  return this.altura * this.anchura;
    }
}

Como ves, los métodos en Javascript simplemente son propiedades a los que les asignas una función. Dentro del código de tus métodos puedes acceder a las propiedades del objeto a través de la variable this.

Una vez creado ese objeto, puedes usar la notación punto para acceder a sus propiedades (o métodos).

dimensiones.altura = 90 //accede a la propiedad altura y le asigna el valor 90
Nota: Los literales de objeto no son la única manera de crear objetos en Javascript. Además existe un manera de definir algo parecido a una clase, pero no es exactamente lo que conocemos en la programación orientada a objetos tradicional y no podríamos llegar a considerarla tal. En lugar de ello podemos crear funciones que, al invocarlas con la palabra "new" te crean nuevos objetos inicializados con esa función. Técnicamente, en vez de definir clases, en Javascript definimos funciones constructoras de objetos. En definitiva, una implementación muy particular que a veces nos puede liar si estamos familiarizados con lenguajes de enfoque más tradicional (en lo que respecta a OOP "Object Oriented Programing") como Java o PHP. Esta es una discusión interesante, que podrías complementar con el artículo dedicado a crear clases en Javascript, pero que no es la que nos ocupa en esta ocasión.

¿Esto no es JSON?

El formato de intercambio de datos JSON se ha popularizado mucho y quizás lo conozcas antes de conocer estos detalles sobre los literales de objeto Javascript. En ese caso puede que te hayas dado cuenta que los literales de objeto Javascript no son más que estructuras JSON. Si es así permíteme apuntar que realmente tendríamos que darle la vuelta a esa frase y decir que la notación JSON utiliza la sintaxis de los literales de objeto Javascript como formato.

Así pues, lo que conozcas de JSON lo puedes aplicar al mundo de Javascript inmediatamente. De hecho, si has tenido ocasión de trabajar con este formato desde Javascript, habrás comprobado que en la mayoría de los casos puedes volcar un objeto JSON en una variable Javascript e inmediatamente trabajar con él como si fuera un objeto que tienes en la memoria.

Nota: Puedes saber más de JSON en el artículo Qué es JSON.

Crear nuevas propiedades y métodos sobre objetos creados

Javascript es muy permisivo y nos deja hacer cosas que producirían errores en otros lenguajes. Es el caso de la asignación de valores a propiedades que no han sido creadas previamente.

Tengo mi objeto coche:

var coche = {
	   color: "rojo",
	   marca: "Opel"
}

Ahora podría crear nuevas propiedades en ese objeto asignando valores a las propiedades que no existían previamente.

coche.anoFabricacion = 2014;

Los métodos los creas asignando funciones:

coche.arrancar = function(){
	  alert("rum rum");
}

Los métodos y funciones que acabamos de crear son tan válidos como los que ya estuvieran en mi objeto cuando fue definido por medio de su literal. Podré acceder a sus elementos con la notación punto, que ya conoces.

console.log(coche.color);
console.log(coche.anoFabricacion);
coche.arrancar();

Ejemplo para practicar con literales de objeto

En el siguiente código ponemos en marcha los nuevos conocimientos que has adquirido sobre literales de objeto en Javascript.

var miObjeto = {
    propiedad1: "Algo",
    propiedad2: "Otra cosa",
    propiedad3: true,
    propiedad4: 344,

    metodo1: function(){
          alert("Ejecutaste metodo1");
    },
    metodo2: funcionMetodo2
}

function funcionMetodo2(){
    //puedo usar la variable this para acceder a mis propias propiedades o métodos
    this.propiedad2 = "Esto lo he modificado desde el método metodo2";
}

//Veamos el valor de esas propiedades
console.log(miObjeto.propiedad1);
console.log(miObjeto.propiedad2);

//ejecutemos algún método
miObjeto.metodo1();
miObjeto.metodo2();

//creamos nuevas propiedades
miObjeto.otraPropiedad = "Esto está creado a posteriori";

//creamos nuevos métodos
miObjeto.otroMetodo = function(){
    console.log("ejecutaste otro método");
}

//veamos el contenido de todo el objeto
console.log(miObjeto);

Eso es todo por el momento, espero que te hayamos aclarado algo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alba Valerio

31/10/2014
Muy útil
Gracias por la información, se agradecen estos artículos de teoría básica de la programación

johnjoneshq

31/10/2014
Interesante
Se que muchos que van a tildar de extraño pero me parece genial lo permisible que puede llegar a ser javascript y saludos especiales por escribir este gran articulo para un novato en javascript esto me parece vital en mi curva de aprendizaje

Jorge Luis

10/11/2014
Muy interesante.
Interesante tu articulo Miguel, saludos desde Venezuela.

chumbertoc

11/11/2014
good
jajajajajajaja el alert con "rum rum" me mato de risa

Melo

28/11/2014
Me Gusta
Me es muy útil toda la información que encuentro en esta pàgina. Exelente. Gracias :D

Junio Marques

21/1/2015
javascript orientado a objecto
Gracias muy buena intro !!!

1112345

19/5/2015
javascript
hola a todos una pregunta miguel javascript tiene entre otros framework a threejs verdad con la cual puedes hacer animaciones graficas y esto puedes utlizarla para realizar proyectos de simulación, mi interes esta en saber si es corecto hacer uso de este lenguaje para implementarlo en un sistema de simulacion de plantas para un sistema de escritorio hecho con javafx. Por favor pido concejo

pakosis

05/12/2016
Gracias
Me tenia liadisimo el tema de los literales!
¿realmente son objetos JSON?
Si paso esto por un validador JSON (por ejemplo este: http://jsonlint.com/) da error:
{
altura: 34,
anchura: 455
}

Gonzalo2683

02/3/2017
@pakosis error formato
@pakosis te a error por que el formato valido de json es { "clave":"valor", "clave2":"valor2", "clave3": 2}, es decir debe ir entrecomillado(cuando son strings), y cuando son números no van entrecomillados.

eli

04/5/2017
console.log
Porque cuando pruebo este comando consomé.log no me corre en un programa para javascript y tengo que usar el documentos.write