Vectores con componentes de tipo objeto en Javascript

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

Javascript. 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".

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

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.

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.

Veremos ahora otra forma muy utilizada en Javascript para definir objetos. Esta forma se la llama Objetos literales

Esta metodología consiste en definir una lista de propiedades y sus valores. Veamos con un ejemplo esta técnica:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var cliente1 = {
nombre: 'Juan',
deposito: 0,
imprimir: function ()
{
document.write(this.nombre+'<br>');
document.write(this.deposito+'<br>');
},
depositar: function(monto) {
this.deposito=this.deposito+monto;
},
extraer: function(monto) {
this.deposito=this.deposito-monto;
}
};

cliente1.imprimir();
cliente1.depositar(1000);
document.write('Estado luego de depositar 1000 pesos</br>');
cliente1.imprimir();
cliente1.extraer(200);
document.write('Estado luego de extraer 200 pesos</br>');
cliente1.imprimir();
</script>

</body>
</html>

Ver ejemplo anterior

En este ejemplo hemos creado un objeto literal llamado cliente1, la sintaxis mínima para crear un objeto vacío sería:

var cliente1 = {};

Es decir creamos una variable llamada cliente1 y le asignamos un bloque encerrado entre llaves vacío. Es importante notar el punto y coma al final de la llave de cerrado (como ocurre cuando asignamos un valor a una variable)

Veamos ahora si decimos que el objeto cliente1 define la propiedad nombre, luego nuestro objeto quedará definido con la sintaxis:

var cliente1 = {
nombre: 'Juan'
};

Decimos que la propiedad nombre almacena el string 'Juan', del lado izquierdo indicamos el nombre de la propiedad y del lado derecho de los dos puntos indicamos el valor de la propiedad del objeto (el valor puede ser de cualquier tipo, en este caso es de tipo string pero podría ser de tipo number, boolean, object, Array etc.)

Ahora si agregamos una segunda propiedad a nuestro objeto cliente1 llamada deposito (que representa la cantidad de dinero que tiene depositado el cliente1) la sintaxis queda:

var cliente1 = {
nombre: 'Juan',
deposito: 0
};

Como podemos observar separamos por coma cada inicialización de propiedad del objeto (menos para la última propiedad donde aparece la "}".

Las funciones del objeto también definimos una sintaxis similar a la declaración de sus propiedades:

Del lado izquierdo de los dos puntos indicamos el nombre de la función y del lado derecho utilizamos la palabra clave function junto con los parámetros.

En la función podemos acceder a las propiedades del objeto antecediendo la palabra clave this.

Ahora solo nos falta hacer la llamada a las funciones del objeto cliente1:

cliente1.imprimir();
cliente1.depositar(1000);
document.write('Estado luego de depositar 1000 pesos</br>');
cliente1.imprimir();
cliente1.extraer(200);
document.write('Estado luego de extraer 200 pesos</br>');
cliente1.imprimir();