Original article: What are Objects in JavaScript?

Los objetos son estructuras de datos importantes en JavaScript. Esto se debe en parte a que los arreglos son objetos en JavaScript, y los usarás todo el tiempo.

Los objetos son muy importantes para agrupar datos y funcionalidades, por lo que puedes hacer muchas cosas con un objeto en JavaScript. El nodo DOM y cualquier nodo DOM creado con createElement son ejemplos de un objeto en JavaScript.

En este artículo, cubriremos todo lo siguiente acerca de los objetos:

¿Qué es un objeto en JavaScript?

Los objetos en la vida cotidiana tienen propiedades y acciones de "método". Tomemos, por ejemplo, un ventilador. Es un objeto con propiedades como marca, color o modelo, y acciones que puede realizar, como enfriar habitaciones y controlar la humedad.

Como se explicó arriba, los objetos en JavaScript son estructuras de datos fundamentales que comprenden propiedades y métodos. Mientras que los métodos son funciones/acciones que un objeto puede realizar (como conducir y enfriar habitaciones con objetos de la vida real como automóviles y ventiladores), las propiedades son características de un objeto, como su nombre y valor.

Los objetos te permiten agrupar datos relacionados y dividir el código en piezas lógicas. En JavaScript, tenemos valores primitivos y valores de referencia. Number, Boolean, Null, Undefined, String y Symbol son valores primitivos, mientras que los objetos como nodos DOM, arrays, etc., son valores de referencia.

Tanto en la vida real como en JavaScript, puedes usar objetos de diferentes formas según sus propiedades y métodos. Aprenderemos más sobre los objetos en JavaScript ahora.

Cómo crear un objeto en JavaScript

Usaremos el siguiente código como ejemplo:

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
Creación de un objeto 

En el código anterior, tenemos un objeto person que creamos con llaves. El objeto tiene pares clave-valor. Puede almacenar pares clave-valor en un objeto de JavaScript, asociando cada clave con un valor único.

Estos pares clave-valor te permiten recuperar valores utilizando las claves asociadas. Por ejemplo, el objeto anterior representa a una persona con propiedades como "nombre", "edad", "amigos" y una función "saludar". Cada propiedad se convierte en un par clave-valor con el nombre de propiedad como clave y el valor de propiedad como valor. Tanto las propiedades como los métodos se crean dentro del objeto.

Para crear una clave en un objeto, no necesitas usar las palabras clave let o const. Debido a que los objetos son dinámicos, puedes agregar o cambiar propiedades sin declarar una variable. En su lugar, comienzas con el nombre que prefieras, seguido de dos puntos y luego el valor.

Creamos un arreglo friends (amigos) dentro del objeto para mostrar que podemos tener un objeto dentro de otro objeto. Creamos un método (que es una función) dentro del objeto con greet como clave.

Cómo crear propiedades a un objeto

Hay dos enfoques principales para agregar propiedades a un objeto en JavaScript. El primero es crear un objeto completamente nuevo.

let person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
 person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  },
  isAdmin:true
}

Con el código anterior, creamos el objeto "person" utilizando la palabra clave let, lo que nos permite reasignarlo a un nuevo valor. Luego agregamos la propiedad "isAdmin" al objeto "person". Si ejecutas console.log(person), verás que "isAdmin" ahora forma parte de las propiedades del objeto.

El segundo enfoque es agregar propiedades utilizando la notación de punto.

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
person.isAdmin = true;

Con la notación de punto, puedes acceder a propiedades que un objeto no ha agregado previamente. Por ejemplo, si el objeto "person" no tiene una propiedad "isAdmin", al acceder a ella se obtendrá "undefined".

Puedes agregar la propiedad "isAdmin" al objeto "person" utilizando la notación de punto, y también puedes sobrescribir cualquier propiedad asignándole un nuevo valor. Este enfoque es más corto y más simple en comparación con otros métodos.

¿Por qué la palabra clave let sobre la notación de punto?

La elección entre utilizar la palabra clave let y la notación de punto depende de si necesitas crear una nueva referencia de objeto o modificar una existente.

Utilizarías la palabra clave let para crear un nuevo objeto cuando necesites crear una nueva referencia a un objeto, independiente de cualquier referencia existente a objetos similares.

Por otro lado, utilizarías la notación de punto para agregar o modificar propiedades en una referencia existente de objeto. Esto es útil cuando deseas realizar cambios en un objeto sin crear una nueva referencia.

Cómo modificar las propiedades en un objeto

También puedes usar la notación de punto para modificar propiedades en un objeto. El siguiente código muestra que la propiedad name con el valor kamal se cambiará a lawal cuando se modifique utilizando la notación de punto.

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
person.isAdmin = true;
person.name = 'lawal';
console.log(person);

Cómo eliminar propiedades en un objeto

Es muy sencillo eliminar una propiedad en un objeto. JavaScript tiene una palabra clave especial llamada "delete" que te permite eliminar cualquier propiedad que desees.

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
person.isAdmin = true;
delete person.friends;
console.log(person);

La propiedad friends será eliminada del objeto con el código anterior.

Cómo usar claves especiales en objetos

Puedes utilizar cualquier cosa como nombre de clave que puedas utilizar como nombre de variable. Sin embargo, no todos los nombres de clave pueden funcionar como nombres de variable, ya que las claves son más flexibles que las variables.

let person = {
 name:'kamal',
 age:37,
}

Supongamos que quieres usar "apellido" (last name) como clave en lugar de "nombre" (name). La sintaxis de JavaScript no permite dos palabras separadas en esta convención de nombres.

Pero puedes superar esto usando una clave especial en un objeto. JavaScript convierte automáticamente cualquier clave que ingreses en una cadena, incluso la clave "edad" (age). Como resultado, los objetos en JavaScript son un diccionario de claves de cadena y valores de cualquier tipo.

let person = {
  last name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}

Para usar "apellido" (last name) como clave en el código anterior, debes informar a JavaScript que es una clave al encerrarla entre comillas, ya sea simples o dobles. Se recomienda utilizar un nombre que también pueda ser utilizado como variable en lugar de este método excepcional de establecer una clave.

let person = {
  'last name':'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}

El uso de comillas simples para rodear "apellido" (last name) y utilizarlo como nombre de clave es un código JavaScript válido y funcionará correctamente.

Cómo acceder a propiedades con corchetes cuadrados

Para agregar y modificar propiedades en un objeto, puedes utilizar el método de notación de objeto. Sin embargo, en JavaScript existe otro método para acceder a las propiedades de un objeto, conocido como notación de corchetes cuadrados, que te permite acceder a una propiedad creada por una clave especial en JavaScript.

let person = {
  'last name':'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
}
// console.log(person.last name); is not valid in JavaScript

No puedes acceder al nombre de clave 'apellido' (last name)  utilizando el método de notación de punto, pero puedes usar la notación de corchetes cuadrados, que está disponible para cualquier objeto.

console.log(person['last name']);

El código anterior mostrará el valor de la clave 'apellido' (last name), que es kamal Sin embargo, es crucial encerrar la clave entre comillas simples o dobles.

Cómo establecer propiedades de forma dinámica

Puedes habilitar otra característica dinámica con corchetes y objetos en JavaScript. Esto funciona cuando necesitas definir una nueva propiedad, especialmente cuando no conoces el nombre de la propiedad de antemano.

Por ejemplo, es posible que no conozcas la entrada de usuario específica de antemano. Sin embargo, deberás agregar la propiedad con ese nombre al objeto.

const userName ='level';

let person = {
 'first name':'kamal',
  age:30,
  [userName]: 'see',
}
console.log(person);

Al no envolver el nombre de usuario (userName) en corchetes, se agregará la propiedad con el nombre userName en lugar del valor almacenado dentro de él. Al agregar corchetes al nombre de usuario, se buscará y tomará el valor almacenado en la variable como nombre de clave y se agregará al objeto persona.

Sintaxis abreviada de métodos

Hay una sintaxis alternativa que puede usar para definir un método de una manera más eficiente. Tradicionalmente, para crear un método en un objeto, se necesita una clave y un valor, donde crea el valor como un método usando la palabra clave de función.

let person = {
  name:'jamaldeen',
  age:30,
  hobbies:[
     'reading','playing','sleeping'
  ],
  speek:function(){
    return this.hobbies
  }
}
console.log(person.speak());

En el código anterior, el método se crea con una palabra clave de función después de dos puntos. Alternativamente, podrías hacer esto:

let person = {
  name:'jamaldeen',
  age:30,
  hobbies:[
     'reading','playing','sleeping'
  ],
  speek(){
    return this.hobbies
  }
}
console.log(person.speak());

En JavaScript, crear un método con métodos cortos de objeto es una notación abreviada. Se permite omitir la palabra clave "función" y los dos puntos (:) antes del cuerpo de la función usando los métodos cortos.

Esto se debe a que con la sintaxis del método abreviado, la propiedad se define automáticamente como método, lo que hace que la palabra clave "función" sea inútil.

El código sigue siendo funcional porque el motor de JavaScript reconoce la sintaxis abreviada y la interpreta como una definición de función regular.

Ventajas de usar métodos cortos de objetos sobre métodos regulares

Algunas de las ventajas de usar métodos cortos de objeto sobre métodos regulares son las siguientes:

  1. Concisión: A diferencia de los métodos regulares, los métodos abreviados de objetos te permiten escribir un código más compacto y legible.
  2. Mejor rendimiento: Aunque el rendimiento de los métodos abreviados de objetos y los métodos regulares es similar, la sintaxis más corta facilita la escritura y el mantenimiento de tu código.
  3. Reusabilidad: Puedes reutilizar fácilmente los métodos abreviados de objetos en otros objetos.
  4. Mejor organización: Con los métodos abreviados de objetos, puedes agrupar fácilmente métodos relacionados dentro de un objeto y mantener tu código organizado.

Si bien el uso de métodos cortos de objetos es bueno, el uso de métodos regulares aún puede ser más apropiado. Es importante elegir el enfoque correcto en función de sus requisitos particulares.

Operador de propagación de objetos

El operador de propagación de objetos es una sintaxis popular y poderosa en JavaScript. El operador de propagación toma todos los pares clave-valor de un objeto y copia el nombre y el valor de la clave en un nuevo objeto.

Un objeto es un valor de referencia, y si deseas una copia del objeto sin apuntar a la misma propiedad en la memoria, el operador de extensión es la respuesta.

let person = {
  name:'kamal',
  age:30,
  hobbies:[
     'reading','playing','sleeping'
  ]
}
console.log(person);
const person2 ={...person};
console.log(person2.age);

La sintaxis del operador de distribución de objetos va entre los corchetes de apertura y cierre. Luego debe haber tres puntos y el objeto que deseas extender en este objeto.

La destructuración de objetos

La desestructuración de objetos es una característica importante de JavaScript que te permite extraer valores de un objeto y asignarlos a variables individuales.

Para realizar la desestructuración de objetos, utiliza un patrón de desestructuración en el lado izquierdo de una instrucción de asignación y el objeto del que deseas extraer valores en el lado derecho. Por ejemplo:

const person = { name: 'lawal', age: 39 };
const { person, age } = person;
console.log(name); // 'lawal'
console.log(age); // 39

La instrucción const usa la desestructuración de objetos para extraer las propiedades de name (nombre) y age (edad) del objeto persona y asignarlas a dos variables separadas. Esta es una forma concisa y eficiente de extraer valores de un objeto, especialmente cuando se trata de objetos complejos.

La desestructuración de objetos también te permite proporcionar valores predeterminados, en caso de que la propiedad que deseas extraer no exista en el objeto. También puedes cambiar el nombre de las variables que se extraen utilizando un alias, lo que le otorga un mayor control sobre la estructura y la denominación de los valores extraídos.

Cómo usar la palabra this en JavaScript

¿Qué es la palabra clave this? Es una palabra clave específica en JavaScript que es más importante cuando se usa dentro de una función en un objeto. Pero puedes usarla  en cualquier parte de su código además del cuerpo de la función de un objeto.

this es una palabra clave poderosa que se usa para hacer referencia al objeto actual en el que se usa.

let person = {
  name:'kamal',
  age:30,
  greet:function(){
    return `My name is ${this.name}, and my age is ${this.age} years old`;
  },
}
console.log(person.greet());
// My name is kamal, and my age is 30 years old.

El código anterior demuestra que la palabra clave "this" se refiere al objeto que contiene la función, en este caso el objeto "person", y el resultado muestra el resultado de la función "greet".

Independientemente de su ubicación dentro de un objeto, la palabra clave this siempre se refiere a la entidad que ejecutó la función en el código. Usar this en diferentes contextos dentro del código puede producir resultados distintos. Por ejemplo:

let person = {
  name:'kamal',
  age:30,
  greet:function(){
    return `My name is ${this.name}, and my age is ${this.age} years old`;
  },
}
console.log(this);

El resultado del código muestra que la palabra clave this  imprimirá un objeto de ventana con un console.log.

Conclusión

En este tutorial, aprendimos sobre el objeto de  JavaScript, cómo crear un objeto y cómo modificar/eliminar propiedades en un objeto.

Hablamos brevemente sobre la importancia del operador de propagación y la desestructuración de objetos en el objeto de JavaScript, así como la popular palabra clave this y cómo usarla en objetos de JavaScript.