¿Qué es un objeto en JS?

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 🙂

 

 

4 comentarios

  1. I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an nervousness over that you wish be delivering the following.
    unwell unquestionably come further formerly again since exactly the same
    nearly a lot often inside case you shield this increase.

  2. It’s an amazing article in support of all the internet users; they will
    get benefit from it I am sure.

  3. I really like it when folks get together and share
    views. Great blog, stick with it!

  4. We’re a bunch of volunteers and opening a new scheme in our community.
    Your website provided us with useful information to work on. You have performed a formidable task and our entire
    group can be thankful to you. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar