Introducción a objetos en javascript
Tags: spanish, javascript, oop, es6
Published: 2020-08-01 17:16:18

![A mind map image](https://dev-to-uploads.s3.amazonaws.com/i/1hd7rlghprhokltgk6x4.png)
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.

```jsx
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

```jsx
// 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.

```jsx
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?

![A girl leaning on folders](https://dev-to-uploads.s3.amazonaws.com/i/harkrrnzytbcum3feb9g.png)

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.

![A folder with many files](https://dev-to-uploads.s3.amazonaws.com/i/oyjshcktnez6z69p16ro.png)

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

![A folder with nested folders and organized files](https://dev-to-uploads.s3.amazonaws.com/i/dx59nkqkz4cjdqvvrzo3.png)

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.

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

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

![https://media.giphy.com/media/Um3ljJl8jrnHy/giphy.gif](https://media.giphy.com/media/Um3ljJl8jrnHy/giphy.gif)

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 en`this.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 🥳

```jsx
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.

![A software engineer working](https://dev-to-uploads.s3.amazonaws.com/i/k1v7ct34e4rd0x7bber6.png)

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](https://javascript.info/object)

[mozilla: Object-oriented JavaScript for beginners](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)

[freecodecamp: Object Oriented Programming in JavaScript - Explained with Examples](https://www.freecodecamp.org/news/how-javascript-implements-oop/)

[eloquentJS: Object-oriented Programming -- Eloquent JavaScript](https://eloquentjavascript.net/1st_edition/chapter8.html)