En JavaScript, los objetos son una de las estructuras de datos más importantes y versátiles. Permiten almacenar colecciones de datos y más complejas entidades. En esta lección, aprenderás los conceptos básicos sobre los objetos, cómo crearlos y cómo utilizarlos en tus programas.
¿Qué es un Objeto?
Un objeto es una colección de propiedades, y una propiedad es una asociación entre un nombre (o clave) y un valor. Un valor de propiedad puede ser una función, en cuyo caso la propiedad se llama método.
Conceptos Clave
- Propiedades: Son los valores asociados a un objeto.
- Métodos: Son funciones que están asociadas a un objeto.
- Claves: Son los nombres de las propiedades.
Sintaxis Básica
La forma más común de crear un objeto es utilizando la notación de objeto literal, que se define con llaves {}.
let persona = {
nombre: "Juan",
edad: 30,
saludar: function() {
console.log("Hola, mi nombre es " + this.nombre);
}
};En este ejemplo:
nombreyedadson propiedades del objetopersona.saludares un método del objetopersona.
Acceso a Propiedades y Métodos
Puedes acceder a las propiedades y métodos de un objeto utilizando la notación de punto . o la notación de corchetes [].
// Notación de punto console.log(persona.nombre); // "Juan" persona.saludar(); // "Hola, mi nombre es Juan" // Notación de corchetes console.log(persona["edad"]); // 30
Modificación de Propiedades
Puedes modificar las propiedades de un objeto en cualquier momento.
Añadir y Eliminar Propiedades
Puedes añadir nuevas propiedades a un objeto o eliminar las existentes.
// Añadir una nueva propiedad persona.ocupacion = "Desarrollador"; console.log(persona.ocupacion); // "Desarrollador" // Eliminar una propiedad delete persona.edad; console.log(persona.edad); // undefined
Ejemplo Práctico
Vamos a crear un objeto coche con algunas propiedades y métodos, y luego interactuar con él.
let coche = {
marca: "Toyota",
modelo: "Corolla",
año: 2020,
encender: function() {
console.log("El coche está encendido.");
},
apagar: function() {
console.log("El coche está apagado.");
}
};
// Acceder a propiedades
console.log(coche.marca); // "Toyota"
console.log(coche["modelo"]); // "Corolla"
// Llamar a métodos
coche.encender(); // "El coche está encendido."
coche.apagar(); // "El coche está apagado."
// Modificar propiedades
coche.año = 2021;
console.log(coche.año); // 2021
// Añadir y eliminar propiedades
coche.color = "Rojo";
console.log(coche.color); // "Rojo"
delete coche.modelo;
console.log(coche.modelo); // undefinedEjercicio Práctico
Ejercicio 1
Crea un objeto libro con las siguientes propiedades y métodos:
titulo(cadena)autor(cadena)año(número)leer(método que imprime "Estás leyendo [titulo] de [autor]")
Solución
let libro = {
titulo: "Cien Años de Soledad",
autor: "Gabriel García Márquez",
año: 1967,
leer: function() {
console.log("Estás leyendo " + this.titulo + " de " + this.autor);
}
};
// Acceder a propiedades
console.log(libro.titulo); // "Cien Años de Soledad"
console.log(libro.autor); // "Gabriel García Márquez"
// Llamar al método
libro.leer(); // "Estás leyendo Cien Años de Soledad de Gabriel García Márquez"
// Modificar propiedades
libro.año = 1970;
console.log(libro.año); // 1970
// Añadir y eliminar propiedades
libro.genero = "Realismo mágico";
console.log(libro.genero); // "Realismo mágico"
delete libro.año;
console.log(libro.año); // undefinedConclusión
En esta lección, hemos aprendido los conceptos básicos sobre los objetos en JavaScript, cómo crearlos, acceder a sus propiedades y métodos, y cómo modificarlos. Los objetos son fundamentales en JavaScript y se utilizan ampliamente en la programación orientada a objetos y en la manipulación del DOM.
En la próxima lección, profundizaremos en los métodos de objeto y la palabra clave this, que es crucial para entender cómo funcionan los métodos dentro de los objetos.
JavaScript: De Principiante a Avanzado
Módulo 1: Introducción a JavaScript
- ¿Qué es JavaScript?
- Configuración de tu Entorno de Desarrollo
- Tu Primer Programa en JavaScript
- Sintaxis y Conceptos Básicos de JavaScript
- Variables y Tipos de Datos
- Operadores Básicos
Módulo 2: Estructuras de Control
- Sentencias Condicionales
- Bucles: for, while, do-while
- Sentencias Switch
- Manejo de Errores con try-catch
Módulo 3: Funciones
- Definición y Llamada de Funciones
- Expresiones de Función y Funciones Flecha
- Parámetros y Valores de Retorno
- Ámbito y Closures
- Funciones de Orden Superior
Módulo 4: Objetos y Arrays
- Introducción a los Objetos
- Métodos de Objeto y la Palabra Clave 'this'
- Arrays: Conceptos Básicos y Métodos
- Iteración sobre Arrays
- Desestructuración de Arrays
Módulo 5: Objetos y Funciones Avanzadas
- Prototipos y Herencia
- Clases y Programación Orientada a Objetos
- Módulos e Importación/Exportación
- JavaScript Asíncrono: Callbacks
- Promesas y Async/Await
Módulo 6: El Modelo de Objetos del Documento (DOM)
- Introducción al DOM
- Selección y Manipulación de Elementos del DOM
- Manejo de Eventos
- Creación y Eliminación de Elementos del DOM
- Manejo y Validación de Formularios
Módulo 7: APIs del Navegador y Temas Avanzados
- Almacenamiento Local y de Sesión
- Fetch API y AJAX
- WebSockets
- Service Workers y Aplicaciones Web Progresivas (PWAs)
- Introducción a WebAssembly
Módulo 8: Pruebas y Depuración
- Depuración de JavaScript
- Pruebas Unitarias con Jest
- Pruebas de Integración
- Pruebas de Extremo a Extremo con Cypress
Módulo 9: Rendimiento y Optimización
- Optimización del Rendimiento de JavaScript
- Gestión de Memoria
- Manipulación Eficiente del DOM
- Carga Perezosa y División de Código
Módulo 10: Frameworks y Librerías de JavaScript
- Introducción a React
- Gestión de Estado con Redux
- Conceptos Básicos de Vue.js
- Conceptos Básicos de Angular
- Elegir el Framework Adecuado
