JavaScript – Teoría sobre POO

Este módulo está desarrollado con el objetivo de mostrar el potencial de JavaScript en lo que respecta a la POO. Por esta razón, se dará énfasis a su utilidad mientras que se explica cómo crear y manipular objetos.

Ahora bien, para facilitar el aprendizaje del curso, aportaremos un breve repaso sobre conceptos fundamentales que deben manejarse a la hora de programar bajo este paradigma. Veamos.

• Objetos

Cuando hablamos de objetos nos referimos a una entidad compuesta por variables y funciones que se relacionan entre sí. A estas variables y funciones se le conoce como propiedades y métodos que delimitan al objeto.

Crear un objeto es bastante sencillo, únicamente basta con definir e inicializar una variable. Por ejemplo:

var NombreObjeto = {};
	
var persona = {};

Con esta sintaxis hemos creado un objeto. No obstante, para añadirle datos debemos escribir lo siguiente:

var NombreObjeto = {
	
propiedad1 = "valor",
metodo1 = function( ){ //sentencia };

}

var persona = {
nombre = "Camilo",
edad = 29,
pasatiempo = ['futbol', 'canto', 'cine'],
saludo = function (){ alert ("Hola, Soy " + this.nombre + ".")}
}

Lo anterior es la forma de agregar datos y funcionalidades a un objeto.

Por lo tanto, el objeto “persona” ahora está compuesto por las propiedades “nombre, edad, pasatiempo”, y el método llamado “saludo”, que consiste en una función que muestra un mensaje a través de una ventana emergente.

Como hemos visto el valor que le damos a cada elemento puede ser de cualquier tipo (carácter, cadena, numérico o función).

Literal de objeto

Al tipo de objeto que acabamos de describir se le conoce como literal de objeto; esto se debe a que hemos escrito literalmente su contenido.

Por lo general se utiliza para transferir una variedad de datos estructurados que guardan relación; este tipo de objeto resulta mucho más eficiente que enviar varios elementos de forma individual y es mucho más fácil de mandar que una matriz. Es muy común en el envío de formularios.

• Notación de puntos

Una manera de acceder a las propiedades y métodos de un objeto previamente definido es utilizando la notación de puntos.

Es decir, usando la sintaxis más común en la que escribimos la denominación del objeto y luego de un punto y seguido, el elemento que queremos extraer; puede ser simplemente una propiedad, un dato específico o la llamada a uno de los métodos que posee.

Ejemplo:

persona.nombre; // Camilo
persona.pasatiempo[1]; // canto
persona.saludo(); // Hola, Soy Camilo

Sub-namespaces o espacio de nombres secundarios

Un espacio de nombres es básicamente un contenedor abstracto donde pueden almacenarse uno o más identificadores únicos. Es una técnica útil para organizar proyectos de gran tamaño.

Por otra parte, también existe el espacio de nombres secundarios, el cual permite establecer un identificador a cada elemento guardado.

Para comprender estos conceptos veamos el siguiente ejemplo:

pasatiempo = ['futbol', 'canto', 'cine'],

A este espacio de nombre lo subdividiremos para crear un identificador especifico por pasatiempo. Es decir:

pasatiempo: {
uno: 'futbol',
dos: 'canto',
tres: 'cine'
},

Como vemos, el valor de esta propiedad ahora es otro objeto (uno, dos, tres) a los cuales se le suele llamar espacio de nombre secundario.

Ahora bien, para acceder a ellos solo debemos agregarlo al final de la sentencia incluyendo otro punto. Como lo vemos a continuación:

persona.pasatiempo.uno;
persona.pasatiempo.dos;
persona.pasatiempo.tres;

• Notación de corchetes

Otra forma de obtener acceso a las propiedades de un objeto es mediante la notación de corchetes. Es decir, en lugar de utilizar el punto, usaremos corchetes.

persona.edad;
persona.pasatiempo.uno;

Se puede utilizar los corchetes, como si de una matriz se tratara:

persona['edad'];
persona['pasatiempo']['uno'];

Nota: la notación de corchetes es la razón por la que a los objetos se les denomina matrices asociativas, pues mapean cadenas a valores igual que se hace en las matrices cuando se asigna un número a cada valor.

• Modificación de objetos

A la hora de programar una aplicación en ocasiones es preciso modificar o cambiar el valor de los elementos de un objeto. Para ello, debemos declarar el elemento que se desea actualizar utilizando la notación de puntos o de corchetes, tal como muestra el siguiente ejemplo:

persona.edad = 45;
persona['pasatiempo']['dos'] = 'dibujar';

Después de modificarlo, podemos comprobar que el cambio se ha realizado si hacemos el llamado a estos elementos como ya se explicado anteriormente:

console.log(Persona.edad);
console.log(persona['pasatiempo']['dos']); 

Otra ventaja de JavaScript es que no solo es posible cambiar el valor de las propiedades y métodos de un objeto, también proporciona la posibilidad de crear nuevos elementos que resultan útiles durante la ejecución del programa.

Para lograrlo debemos escribir lo siguiente:

persona['profesion'] = 'maestro';
persona.mensaje = function(){ alert("Buenos días a todos"); }

Veamos el resultado:

console.log(persona['profesion']); // maestro
persona.mensaje(); // Buenos dìas a todos

Añadir elemento desde la web

A veces resulta necesario que el usuario mismo sea quien determine donde y como guardar sus datos. Por ejemplo, supongamos que mediante un formulario se le pida escribir la descripción de lo que necesita guardar y el valor en cuestión.

Para ello, el primer paso será extraer lo que el usuario ha escrito en las entradas de texto. Para ello escribimos las siguientes líneas de código:

var nombreObjeto = nameInput.value;
var objetoValor = nameValue.value;

Lo siguiente será añadir esta nueva propiedad al objeto persona:

persona[nombreObjeto] = objetoValor;

Y, por último, probamos que el código funcione como se ha previsto:

var nombreObjeto = 'estadoCivil';
var objetoValor = 'soltero';
persona[nombreObjeto] = objetoValor;

Cabe destacar que agregar una propiedad a un objeto solo es posible con la notación de corchetes; pues la notación de puntos únicamente acepta un nombre de miembro literal, no una variable.

• Resumen

El propósito de este paradigma es utilizar objetos para modelar o esquematizar cosas del mundo real que deben ser representadas en el programa.

Por esta razón, a fin de proporcionar una forma sencilla de acceder a su funcionalidad, a cada objeto se le proveen datos y códigos relacionados que sirven para simbolizar sus características y comportamiento.

Ejercicio

Crea el objeto “alumno” con las propiedades “nombre”, “nota1”, “nota2”, “nota3” y con un método que sirva para calcular su nota promedio. Luego añade la propiedad “apellido”, modifica la nota3 y muestra en pantalla los datos del alumno y el promedio de nota. Incluye además una propiedad contenida en una variable.

var alumno = {
nombre = "Camilo",
nota1 = 15,
nota2 = 10,
nota3 = 02,
promedio = function (){ calculo = nota1+nota2+nota3/3 }
}

Salida por consola:

Datos del alumno y promedio de nota

Solución al ejercicio

var alumno = {
nombre = "Camilo",
nota1 = 15,
nota2 = 10,
nota3 = 02,
promedio = function (){ calculo = nota1+nota2+nota3/3 }
}

alumno['apellido'] = 'Pérez';
alumno.nota3 = 20;

prom = alumno.promedio(); 

var nombreObjeto = 'materia';
var objetoValor = 'Programación';
alumno[nombreObjeto] = objetoValor;

console.log(alumno.nombre+" "+alumno.apellido+" obtuvo un promedio de "+prom+" puntos en la materia "+alumno.materia);

Salida por consola:

Camilo Pérez obtuvo un promedio de 15 puntos en la materia Programación