Aprende Programación Orientada a Objetos

Introducción

Existen 4 conceptos fundamentales en la programación orientada a objetos.

Estos conceptos son:

• encapsulación,
• abstracción,
• herencia, y
• polimorfismo.

Es importante conocerlos porque son muy populares en entrevistas.

Hoy vamos a repasar cada uno de estos conceptos.

Pero empecemos por aquí:

Antes de la programación orientada a objetos, teníamos programación procedural, que dividía a un programa en varias funciones.

Programación procedural

Entonces tenemos datos almacenados en un montón de variables, y funciones (o procedimientos) que operan sobre dichos datos.

Este estilo de programación es muy simple y directo.

A menudo es lo que aprenderás como parte de tu primera materia de programación en la universidad o un bootcamp.

Pero a medida que tus programas crecen, terminarás con bloques de código dispersos y difíciles de depurar:

• Es posible que te encuentres copiando y pegando líneas de código una y otra vez.
• Realizas un cambio en una función y luego varias otras se rompen (dejan de funcionar).
• Esto se conoce como código espagueti.

Existe tanta interdependencia entre todas tus funciones, que la complejidad para realizar un cambio aumenta considerablemente con el tiempo.

¡La programación orientada a objetos resuelve este problema!

Programación Orientada a Objetos

En la programación orientada a objetos o POO, agrupamos variables y funciones relacionadas en una unidad.

Llamamos a esa unidad un objeto.

Nos referimos a estas variables como propiedades y a las funciones como métodos.

Aquí tienes un par de ejemplos.

Piensa en un coche.

Un coche es un objeto con propiedades como:

• marca,
• modelo y
• color,

y métodos como:

• iniciar,
• detener y
• mover.

Piensa en tu novia.

Tu novia es un objeto con propiedades como edad, peso y altura, y métodos como abrazar, reclamar y comer.

Ahora podrías decir:

"¡Pero Juan, no tengo una novia! Dame un ejemplo de programación real.”

Bueno, abre tu navegador que te presentaré al objeto localStorage:

• Cada navegador tiene este objeto, que te permite almacenar datos localmente.
• Este objeto tiene una propiedad length, que devuelve el número de objetos almacenados.
• Y tiene métodos como setItem y removeItem.

Entonces, en la programación orientada a objetos, agrupamos variables y funciones relacionadas, en objetos.

Y esto es llamado encapsulación.

Encapsulación

Déjame mostrarte un ejemplo de esto en acción.

Aquí tenemos tres variables:

• base salary,
• overtime, y
• rate.

Representando:

• el salario base,
• horas extras y
• la tarifa por hora.

En la implementación procedural:

Tenemos una función getWage para calcular el salario de un empleado.

Entonces, tenemos variables en un lado y funciones en el otro lado.

Están separadas.

En la forma orientada a objetos de resolver este problema:

Tenemos un objeto employee (empleado) con tres propiedades, y un método para calcular el salario.

¿Por qué es esto mejor?

Bueno, observa al método getWage. Este método no tiene parámetros.

En contraste al ejemplo procedural, donde la función getWage tiene 3 parámetros.

La razón por la que en la implementación POO no tenemos parámetros es porque las 3 variables se modelan como propiedades del objeto employee.

Todas estas propiedades y la función getWage están altamente relacionadas, por lo que se han agrupado como parte de una unidad.

Entonces:

Uno de los síntomas del código procedural son funciones con muchos parámetros.

Cuando escribes código de manera orientada a objetos, tus funciones tienen menos parámetros.

Como dice Uncle Bob:

Cuantos menos parámetros haya, más fácil será usar y mantener esa función.

Esto se conoce como encapsulación.

Abstracción

Ahora, veamos la abstracción. 

Piensa en un reproductor de DVD como un objeto. 

• Este reproductor de DVD tiene una placa lógica compleja en el interior,

• y unos pocos botones en el exterior con los que interactúas.

Simplemente presionas el botón de reproducir y no te importa lo que sucede en el interior:

• Toda esa complejidad está oculta para ti. 

• Esto es la abstracción, de forma práctica.

Podemos utilizar la misma técnica en nuestros objetos. 

Es decir, podemos ocultar algunas de las propiedades y métodos del exterior, y esto nos brinda un par de beneficios. 

Lo primero es que simplificamos la interfaz de esos objetos.

Usar y entender un objeto con pocas propiedades y métodos es más fácil que un objeto con varias propiedades y métodos.

El segundo beneficio es que nos ayuda a reducir el impacto de cambios en el código.

Imagina que mañana cambiamos estos métodos internos o privados. 

Ninguno de estos cambios se filtrará hacia el exterior. 

Obviamente, porque estos métodos no son accesibles desde el exterior.

Podemos eliminar un método o cambiar sus parámetros, pero ninguno de estos cambios afectará al resto del código de la aplicación. 

Entonces, con la abstracción, reducimos el impacto del cambio.

Ahora el tercer concepto fundamental en la programación orientada a objetos: la herencia.

Herencia

La herencia es un mecanismo que te permite eliminar código redundante. 

Aquí tienes un ejemplo.

Piensa en elementos HTML como:

• cajas de texto,
• listas desplegables,
• checkboxes,
• y así sucesivamente. 

Todos estos elementos tienen algunas cosas en común:

Tienen propiedades como hidden e innerHTML, y métodos como click y focus.

En lugar de redefinir todas estas propiedades y métodos para cada tipo de elemento HTML:

• Podemos definirlos una vez en un objeto genérico, 
• llamarlo HTMLElement, 
• y hacer que otros objetos hereden estas propiedades y métodos.

Así, la herencia nos ayuda a eliminar código redundante.

Polimorfismo

Y finalmente, polimorfismo. 

• "Poli" significa muchos, y

• "morfo" significa forma.

Entonces, polimorfismo significa muchas formas. 

En la programación orientada a objetos, el polimorfismo permite que objetos de distintos tipos atiendan a los mismos métodos, simplificando así muchas condiciones if-else o switch.

Ejemplo: HTMLElement

Volviendo a nuestro ejemplo de elementos HTML:

Todos estos objetos deberían tener la capacidad de renderizarse en una página.

Pero cada elemento se renderiza de forma distinta. 

Si quisiéramos renderizar múltiples elementos HTML de manera procedural, nuestro código probablemente se vería así.

Pero con la orientación a objetos, podemos implementar un método render en cada uno de estos objetos, y este método al ejecutarse, se comportará de manera diferente, dependiendo del tipo de objeto al que estemos haciendo referencia.

Así podemos reemplazar el extenso “switch-case”, por una única línea de código, como esta:

element.render()

Veamos ahora los beneficios de la programación orientada a objetos.

Beneficios de la POO

Usando encapsulación:

• Agrupamos variables y funciones relacionadas, y de esta manera reducimos la complejidad. 

• Ahora podemos reutilizar estos objetos en diferentes partes de un programa, o en diferentes programas.

Con la abstracción:

• Ocultamos los detalles y la complejidad, mostrando solo lo esencial. 

• Esta técnica reduce la complejidad y también reduce el impacto de los cambios en el código.

Con la herencia:

• Podemos eliminar código redundante.

• Y definir relaciones entre clases.

Y con el polimorfismo:

• Podemos refactorizar muchas declaraciones por otras más simples.

Video sobre POO

Por si prefieres aprender viendo y escuchando:

Te comento que este contenido también está disponible en formato de video.

Conclusión

¡Gracias por llegar hasta el final!

Mi nombre es Juan Ramos, y espero que hayas aprendido algo nuevo hoy. 

Si deseas aprender más sobre Programación Orientada a Objetos, o de JavaScript en general, te invito a inscribirte a mi Curso Práctico de JavaScript.

Así mismo, asegúrate de compartir este artículo con tus colegas y amigos. 

¡Gracias, y que tengas un excelente día!

# javascript