Introducción a objetos en javascript

gera — Sat, 01 Aug 2020 17:16:18 +0000

Veamos de que se trata este concepto del que tanto escuchamos hablar en programación.

Comenzando con una definición básica pero técnica un objeto es un tipo de dato compuesto por un conjunto de claves y valores. No dejes que la definición te abrume, es sencillo! veamos un ejemplo.

let persona = {
   nombre: 'John Doe'
   edad: 34
}

Ya viste tu primer objeto, y estoy seguro de que entendiste de que se trata. Estamos declarando una variable y su valor es un objeto, un objeto que tiene nombre y edad. Estas características de nuestro objeto (nombre y edad en este caso) son conocidas como propiedades y como lo habrás notado cada propiedad es un par de clave:valor. Por clave comprendemos el nombre de la propiedad y lo que representa, mientras que por valor, obviamente, el valor de esta propiedad.

Una vez creado tu objeto podes acceder a sus propiedades de las siguientes maneras

// Notacion de punto: 
persona.nombre; // => John Doe

// Notacion de brackets []
persona["edad"]; // => 34

// Modificar el nombre de la persona
persona.nombre = "Jane Doe";

En ese ejemplo creamos un objeto literal, esto significa que declaramos nuestro objeto abriendo llaves {} y volcando las propiedades que queremos guardar ahí dentro, en breve te voy a hablar de distintas formas de crear un objeto y te voy a contar lo que es una clase.

Pero antes de continuar con lo que te acabo de mencionar en los párrafos anteriores ya deberías de poder ver el rol importante que juegan los objetos al momento de escribir nuestro código y que este este bien ordenado y se lea fácil, veamos como es esto.

Si te pidiera que en tu programa almacenes datos de una persona sin utilizar objetos, probablemente lo harías de la siguiente manera.

let nombreDeLaPersona = 'John Doe';
let edadDeLaPersona = 34;

Y esto no esta del todo mal, es valido, el inconveniente que tenemos es que estamos declarando muchas variables que representan algo en común: los datos de una persona en particular. Además cada vez que te pida agregar un dato a tu programa, vas a terminar con unas cuantas variables sueltas desparramadas por tu programa! No es mejor crear un objeto donde sabemos que toda la información de esta persona va a estar contenida dentro?

Imagínate tener todos tus apuntes del colegio en una sola carpeta, intentas darle un nombre descriptivo a cada archivo, como lo haces con tus variables en tu código, sin embargo, desaprovechas la oportunidad de ponerlos en carpetas y facilitarte la vida al momento de buscar tus archivos.

Ahora veamos como podes agrupar las cosas un poco mejor...

Ya sabes que al momento de empezar a escribir tu código, si identificas que los datos que estas por meter en variables tienen algo en común, quizás sea sensato declararlos como propiedades de un objeto.

Pero esto no termina acá, imagínate que necesito mas de una persona en mi programa, vas a escribir un objeto literal por cada una? Tienes una mejor alternativa. Podes empezar a crear objetos a partir de una clase!

Una clase es una plantilla para tus objetos, es una descripción de nuestros objetos, nos dice que propiedades y métodos van a tener nuestros objetos.

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
} 

let persona_1 = new Persona('John Doe', 34)

Ahora crear personas es mucho mas fácil que antes! Ya no debería preocuparte si te pido que tu programa tenga varias personas, podes hacer uso de tu clase para instanciarlas muy sencillamente con el operador new el cual siempre que lo veas significa que estas creando un nuevo objeto a partir de una clase o función constructora.

Hablemos un poco de lo que te confunde de ese código, el constructor y la palabra this. El constructor, como lo indica su nombre, es el responsable de crear el objeto, y entre los paréntesis vas a ver los parámetros de tu clase, en este caso nombre y edad, el constructor es una función, por eso es que después de su lista de parámetros creamos el cuerpo de la función, como sabrás ahí es donde sucede la acción, pero que estamos haciendo? de que se trata this.nombre = nombre ? la palabra this en esta oportunidad esta vinculado a la instancia que estas creando, cada vez que quieras referenciar a las propiedades de tu clase tienes que hacerlo mediante this .

En pocas palabras, lo que estamos haciendo en el constructor es tomar los parámetros que nos pasan cuando usan a nuestra clase, nombre y edad y guardándolos como propiedades de nuestra clase enthis.nombre y en this.edad.

Hasta el momento sabes de que se trata este tipo de dato y como te puede ayudar a tener el código ordenado y como podemos usar clases para tener objetos predecibles pero falta algo muy importante, hablamos de propiedades, pero nuestros objetos ademas de tener propiedades pueden tener métodos. Los métodos no son nada nuevo, simplemente son funciones que forman parte de un objeto. Agreguemos una función para envejecer así podemos festejar el cumpleaños de John 🥳

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  envejecer() {
    this.edad = this.edad + 1;
  }
} 

let persona_1 = new Persona('John Doe', 34);

persona_1.edad // => 34

// Llamemos a la funcion y veamos como incrementa su edad
persona_1.envejecer();

persona_1.edad // => 35 John cumplió 35 años!

Ahora las personas de nuestro programa pueden envejecer. Ya podes empezar a modelar tus programas con este paradigma y sacar provecho de sus beneficios.

Esto fue tan solo una muy breve introducción al paradigma de la programación orientada a objetos. Queres saber por donde continuar?

javascript.info: Objects

mozilla: Object-oriented JavaScript for beginners

freecodecamp: Object Oriented Programming in JavaScript - Explained with Examples

eloquentJS: Object-oriented Programming -- Eloquent JavaScript

DEV Community: gera

Introducción a objetos en javascript