Como crear y usar un objeto en JavaScript

La programación orientada a objetos está en auge y es muy común recurrir a ella para crear proyectos pequeños y grandes.

El principal beneficio es que el código queda más claro y reunido que usando funciones independientes.

La programación orientada a objetos es una paradigma que viene a innovar la forma de obtener resultados. Los objetos manipulan datos de entrada para obtener datos de salida.

En la actualidad, existe una gran variedad de lenguajes de programación que soportan la orientación a objetos.

El lenguaje JavaScript es uno de ellos y en este tutorial vas a descubrir como crear un objeto sobre la marcha y como crear una clase con su instancia y llamada a sus métodos.

Como crear un objeto sobre la marcha con JavaScript

En JavaScript puedes crear una variable o constante que puede ser directamente un objeto usando las clasves {} como su representación.

Por ejemplo:

const cliente = {
    nombre: 'Jose',
    apellido: 'Aguilar',
    profesion: 'Programador',
    email: 'blog@jose-aguilar.com',
    nacimiento: 1984,
    musica: ['Dance', 'Techno', 'Pop'],
    lugar: {
        poblacion: 'Santa Perpetua de Moguda',
        ciudad: 'Barcelona',
        pais: 'España'
    },
    getEdad: function() {
        return new Date().getUTCFullYear() - this.nacimiento;
    }
}

El código anterior es un objeto guardado como constante que tiene una serie de información: nombre, apellidos, profesión, email, nacimiento, música, lugar y todo lo que se pueda ocurrir.

Además, también tiene un método que con la fecha de nacimiento retorna la edad actual.

Como usar este objeto

Por ejemplo, si quieres obtener la fecha de nacimiento, para mostrarla en consola puedes hacer lo siguiente:

console.log(cliente.nacimiento);

Si quieres obtener el país, puedes hacer lo siguiente:

console.log(cliente.lugar.pais);

Y, para obtener la edad es posible llamar al método que he creado getEdad():

console.log(cliente.getEdad());

Como crear una clase en JavaScript

Siguiendo el mismo ejemplo, a continuación vas a ver como crear la clase Cliente de forma más simplificada:

class Cliente {
    constructor(nombre, nacimiento) {
        this.nombre = nombre;
        this.nacimiento = nacimiento;
    }
 
    getInformation() {
        return `Nombre: ${this.nombre}, nacimiento: ${this.nacimiento}`;
    }
 
    getEdad() {
        return new Date().getUTCFullYear() - this.nacimiento;
    }
}

Ahora tengo la clase Cliente con su constructor que permite registrar los datos de entrada y, además, he creado 2 métodos. Uno de ellos retorna la información del objeto en sí y el otro método retorna el cálculo de la edad en función a su fecha de nacimiento.

Como crear una instancia de esta clase y usar sus datos y métodos

Fíjate en el siguiente código:

const jose = new Cliente('Jose Aguilar', 1984);

Sabiendo que hay un constructor que recibe los datos, creo el objeto «jose» como nuevo objeto de la clase Cliente pasando como parámetros el nombre y el año de nacimiento.

Con esta declaración, ahora puedo acceder a todo el objeto con:

console.log(jose);

Puedo acceder al nombre de la instancia o objeto con:

console.log(jose.nombre);

También puedo llamar al método que retorna la edad de la siguiente forma:

console.log(jose.getEdad());

Importante: Para los que no conocen la función console.log(), esta lo que hace es mostrar en la consola del navegador los resultados. Puedes ver más información en Consola del navegador para JavaScript.

¿Todavía no usas las clases y objetos? Coméntanos cual es tu metodología de trabajo.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (No hay votos)
Cargando…
Comparte en las redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre