En el artículo anterior de Tipos de datos primitivos en JavaScript vimos los tipos primitivos. En JS, todo lo que no sea un tipo de dato primitivo es un objeto.

Un objeto en JavaScript tiene un comportamiento similar al que tiene un diccionario para nosotros en la vida real. Dentro de este diccionario (el objeto de JavaScript), guardamos una colección de pares clave-valor (key-value).  En el caso de nuestro diccionario de nuestra vida real estos key-value serían por un lado la palabra (key) a consultar y su significado (el valor/value).

En JS trabajaremos con los objetos de una forma muy similar a como si consultamos un diccionario. Buscaremos una key (clave) y su valor (value). Vamos a profundizar un poquito en ello:

  • Un objeto = conjunto de propiedades.
  • Cada propiedad de nuestro objeto se organizan mediante a lo que se conoce como key : value. Por tanto, cada propiedad está formada por un par que contiene una clave (key) y un valor(value). Cada una de ellas tiene una función:
    • Propiedad nombre/clave (key) → nos permite acceder al valor de la propiedad además de permitirnos identificar lo que hay en dicha propidad.
    • Propiedad valor (value) → nos muestra el valor asignado a una clave (key).

Creando nuestro primer objeto (vacío)

Vamos a ver un ejemplo de nuestro primer objeto (vacío):

Creando nuestro primer objeto con un solo key:value

  • El objeto puede ser guardado en:
    • Variables: mediante a let y var, cuando el valor puede cambiar o variar.  Se aconseja trabajar con let ya que es el método nuevo de definir una variable.
    • Constantes: mediante a const, cuando no cambiará/variará el valor y será fijo.
  • El objeto se debe englobar entre {} y entre ellas se añadirá su contenido
  • Si existen más de un key: value, estos deberán ir separados por una coma al final a excepción del último key:value
  • Los valores (value) de las propiedades deben de ir entre comillas simples o dobles siempre que no sean de tipo number

Un ejemplo de un objeto con un solo key value declarado en una constante podría ser:

Si hacemos un typeof del objeto podemos ver que se trata de un objeto:

Si imprimimos el objeto nos lo vuelve a confirmar que estamos trabajando sobre un objeto en su parte inicial con [object Object] junto al key value que acabamos de definir englobada entre {} como ya hemos visto.

Creando nuestro primer objeto con varias key:value

Como ya hemos visto, un objeto puede contener ningún elemento y un solo elemento. Ahora vamos a trabajar con un objeto con múltiples propiedades:

Si os fijáis, este objeto también tiene una función (si está dentro de un objeto se llaman métodos) y un objeto en su interior. Es decir, un objeto puede englobar tanto métodos como a otros objetos.

Mostrando los values de las keys:

En los objetos de JS tenemos varias maneras de sacar los elementos de un objeto. Vamos a verlas:

Imprimiendo una propiedad (simple) en particular:

      • Manera 1: poniendo el nombre del objeto junto a unas [] con el key (nombre) de la propiedad entre comillas.

      • Manera 2: poniendo el nombre del objeto junto a un punto e inmediatamente seguido el key (nombre) sin comillas de la propiedad a acceder.

Hasta ahora hemos trabajado con JSBIN, vamos a cambiar de REPL (Read–Eval–Print Loop) a Repl.it ya que es bastante más completo

Imprimiendo un objeto que tiene varias propiedades:

      • Manera 1: concatenando el elemento padre junto al elemento hijo con []

      • Manera 2: separando el elemento padre del hijo por un punto

Console.dir

Si utilizamos console.dir podemos ver el contenido del objeto.

Sería equivalente a ejecutar console.log junto a Object.entries:

Console.table

Si utilizamos console.table podemos ver el objeto en forma de tabla

Imprimiendo solamente las keys o los values (separados)

El comportamiento de Object.values no es el mismo sobre un objeto simple que sobre un objeto con varios objetos dentro.

Si vemos un objeto simple podemos ver que nos lo devuelve de la siguiente manera:

En cambio, si volvemos al objeto anterior, podemos ver que realmente nos muestra los valores, pero con las keys de los hijos esto es debido a que completeName es un objeto y nos devuelve el objeto completo.

Añadiendo una propiedad

Podemos añadir propiedades utilizando:

Eliminando una propiedad

Lo mismo que podemos añadir propiedades, podemos eliminarlas mediante a delete. Vamos a ver un ejemplo:

Métodos (funciones en objetos) como propiedad

Ya hemos visto que podemos añadir tanto objetos como funciones que recibirán el nombre de método si se encuentran en el interior de nuestros objetos.

  • Arrow function: son problemáticas en los objetos ya que con ellas perdemos el scope (el contexto) local (this):

Pero pese no tener contexto local sí que podemos seguir trabajando con el contexto global:

  • Funciones: un ejemplo podría ser:

Vamos a hablar un poco más detalladamente de ellas en función del scope.

Uso de funciones con scope global VS scope local

Anteriormente en la función que hemos usado en el objeto múltiple hemos utilizado el this.

This nos permite trabajar con el contexto ¿Qué es un contexto? Un contexto nos permite coger las variables de dentro de nuestro objeto (locales). En cambio, si no usamos el this, vemos que las variables las cogemos globales.

Encadenamiento de métodos:

Otra opción muy utilizada es la de concatenar métodos. Vamos a ver un ejemplo:

Espero que os haya gustado el artículo y que sepáis un poco más sobre los objetos de JS. Un saludo 🙂