Command Palette

Search for a command to run...

Introducción a Objetos: Literales y Dot Notation

Aprende los fundamentos de los objetos en JavaScript, cómo crearlos con sintaxis literal y acceder a sus propiedades con dot notation.

Lectura: 12 min
Nivel: Principiante

TL;DR - Resumen rápido

  • Los objetos son colecciones de pares clave-valor
  • Los objetos literales se crean con la sintaxis {}
  • Dot notation usa punto (.) para acceder a propiedades
  • Las propiedades pueden contener cualquier tipo de valor
  • Los métodos son funciones almacenadas como propiedades
  • Dot notation solo funciona con identificadores válidos

Introducción a los Objetos

Los objetos son una de las estructuras de datos fundamentales en JavaScript. A diferencia de los tipos primitivos (string, number, boolean, etc.), los objetos permiten agrupar múltiples valores relacionados en una sola entidad. Cada valor en un objeto se asocia con un nombre o clave, formando pares clave-valor.

En JavaScript, casi todo es un objeto. Los arrays son objetos, las funciones son objetos, incluso los tipos primitivos tienen objetos envolventes asociados. Entender los objetos es esencial para dominar JavaScript, ya que son la base de la programación orientada a objetos y de muchos patrones de diseño modernos.

Objetos vs Primitivos

Los tipos primitivos son inmutables y se pasan por valor. Los objetos son mutables y se pasan por referencia. Esto significa que cuando asignas un objeto a otra variable, ambas variables apuntan al mismo objeto en memoria.

Objetos Literales

La forma más común y directa de crear objetos en JavaScript es usando la sintaxis de objeto literal. Esta sintaxis consiste en escribir pares clave-valor entre llaves. Es limpia, legible y la preferida en código moderno.

objeto-literal.js
Loading code...

En este ejemplo, creamos un objeto usuario con cuatro propiedades: nombre, edad, email y activo. Cada propiedad tiene un nombre (la clave) y un valor. Los valores pueden ser de cualquier tipo: strings, numbers, booleans, arrays, otros objetos, o incluso funciones.

Objetos con múltiples tipos de valores

Los objetos pueden contener propiedades de diferentes tipos mezclados en la misma estructura. Esto los hace extremadamente flexibles para modelar datos del mundo real.

objeto-complejo.js
Loading code...

Este ejemplo muestra un objeto más complejo con propiedades de diferentes tipos: strings, numbers, arrays, objetos anidados, e incluso una función. Esta flexibilidad hace que los objetos sean perfectos para representar estructuras de datos complejas.

Nombres de propiedades

Los nombres de propiedades en objetos literales pueden ser identificadores válidos de JavaScript o strings entre comillas. Si usas identificadores válidos, no necesitas comillas. Para nombres con espacios o caracteres especiales, debes usar comillas.

Dot Notation: Acceso a Propiedades

La dot notation (notación de punto) es la forma más común y legible de acceder a las propiedades de un objeto. Consiste en escribir el nombre del objeto, seguido de un punto, y luego el nombre de la propiedad. Esta sintaxis solo funciona cuando el nombre de la propiedad es un identificador válido de JavaScript.

dot-notation.js
Loading code...

En este ejemplo, accedemos a las propiedades del objeto usuario usando dot notation. La sintaxis objeto.propiedad es clara y directa, haciendo el código fácil de leer y entender. Esta es la forma preferida de acceder a propiedades cuando conoces el nombre de antemano.

Ventaja de dot notation

Dot notation es la más legible y preferida por linters y guías de estilo. Es más corta, más clara y menos propensa a errores que bracket notation. Úsala siempre que el nombre de la propiedad sea un identificador válido.

Acceso a propiedades anidadas

Cuando tienes objetos anidados, puedes encadenar múltiples operaciones de punto para acceder a propiedades profundas. Cada punto accede a una propiedad del objeto resultante de la expresión anterior.

Por ejemplo, si tienes un objeto con la estructura usuario.direccion.ciudad, primero accedes a usuario, luego a su propiedad direccion, y finalmente a la propiedad ciudad del objeto direccion. Sin embargo, debes tener cuidado con propiedades undefined, ya que intentar acceder a una propiedad de undefined causará un error.

Modificar y Crear Propiedades

Los objetos en JavaScript son mutables, lo que significa que puedes modificar sus propiedades después de crearlos. También puedes agregar nuevas propiedades dinámicamente en cualquier momento. Esto se hace usando la misma sintaxis de dot notation en el lado izquierdo de una asignación.

modificar-propiedades.js
Loading code...

Este ejemplo muestra cómo modificar propiedades existentes y crear nuevas propiedades usando dot notation. Si la propiedad ya existe, su valor se actualiza. Si no existe, se crea automáticamente. Esta flexibilidad hace que los objetos sean muy dinámicos.

Objetos declarados con const

Declarar un objeto con const no hace que el objeto sea inmutable. Puedes modificar y agregar propiedades libremente. Lo que no puedes hacer es reasignar la variable a un nuevo objeto. La constancia se aplica a la referencia, no al contenido del objeto.

Eliminar Propiedades

JavaScript proporciona el operador delete para eliminar propiedades de un objeto. Cuando eliminas una propiedad, esta desaparece completamente del objeto, como si nunca hubiera existido. Esto es diferente de asignar undefined, que deja la propiedad pero cambia su valor.

eliminar-propiedades.js
Loading code...

El operador delete retorna true si la eliminación fue exitosa. Después de eliminar una propiedad, intentar acceder a ella retorna undefined. Es importante notar que delete solo elimina propiedades propias del objeto, no propiedades heredadas del prototipo.

En la práctica, eliminar propiedades es menos común que modificarlas o asignarles valores especiales como null. Sin embargo, es útil cuando necesitas liberar memoria o cuando trabajas con objetos como estructuras de datos dinámicas como mapas o diccionarios.

Métodos en Objetos

Un método es simplemente una función que se almacena como propiedad de un objeto. Los métodos permiten que los objetos tengan comportamiento, no solo datos. Puedes definir métodos en objetos literales usando la sintaxis tradicional de función o la sintaxis abreviada de ES6.

metodos-objetos.js
Loading code...

En este ejemplo, saludar es un método del objeto usuario. Los métodos pueden acceder a otras propiedades del mismo objeto usando la palabra clave this. Dentro del método, this se refiere al objeto que contiene el método.

Sintaxis abreviada de métodos

ES6 introdujo una sintaxis más corta para definir métodos en objetos. En lugar de escribir metodo: function() , puedes escribir simplemente metodo() . Esta es la sintaxis preferida en JavaScript moderno.

metodos-shorthand.js
Loading code...

La sintaxis abreviada es más limpia y concisa. Además, es necesaria para usar ciertas características avanzadas de ES6 como super en métodos. La mayoría del código moderno usa esta sintaxis para definir métodos.

This en métodos

La palabra clave this dentro de un método se refiere al objeto que contiene el método. Esto permite que los métodos accedan y modifiquen otras propiedades del mismo objeto. Sin embargo, el valor de this puede cambiar dependiendo de cómo se llame el método.

Limitaciones de Dot Notation

Aunque dot notation es la forma más común y legible de acceder a propiedades, tiene algunas limitaciones importantes. No funciona con todos los nombres de propiedades posibles, y no permite acceso dinámico basado en variables.

dot-notation-limitaciones.js
Loading code...

Este ejemplo muestra las principales limitaciones de dot notation. No puede acceder a propiedades con espacios, guiones, o que comienzan con números. Tampoco puede usar variables como nombres de propiedad. Para estos casos, necesitas usar bracket notation.

  • <strong>Identificadores inválidos</strong>: No funciona con espacios, guiones, o caracteres especiales
  • <strong>Nombres numéricos</strong>: No puede acceder a propiedades que comienzan con números
  • <strong>Acceso dinámico</strong>: No puede usar variables para determinar el nombre de la propiedad
  • <strong>Palabras reservadas</strong>: Aunque técnicamente funciona, puede causar problemas con linters
  • <strong>Propiedades computadas</strong>: No puede evaluar expresiones como nombres de propiedad

Cuándo usar bracket notation

Cuando te encuentras con alguna de estas limitaciones, necesitas usar bracket notation en su lugar. Bracket notation es más flexible pero menos legible. Usa dot notation siempre que sea posible, y bracket notation cuando sea necesario.

Resumen: Objetos Literales y Dot Notation

Conceptos principales:

  • Los objetos son colecciones de pares clave-valor
  • Sintaxis literal: const obj = { clave: valor }
  • Dot notation: objeto.propiedad para acceso
  • Los objetos son mutables y se pasan por referencia
  • Los métodos son funciones almacenadas en propiedades
  • Delete elimina propiedades completamente

Mejores prácticas:

  • Prefiere objetos literales sobre new Object()
  • Usa dot notation siempre que sea posible
  • Usa nombres de propiedad descriptivos y consistentes
  • Prefiere sintaxis abreviada para métodos en ES6+
  • Usa const para objetos que no se reasignarán
  • Usa bracket notation para casos especiales