Crear métodos en objetos, utilizar sus propiedades y ¿Qué es this? - Curso de JavaScript de cero a máster - Capítulo 33

Seguimos con los objetos. En este capítulo vas a ver como crear métodos en los objetos y como utilizar sus propiedades. Además, te explico para que sirve this en los objetos de JavaScript.

Acceder a propiedades de objeto en JavaScript

Para poder utilizar individualmente una propiedad dentro de un objeto, hay que hacerlo con el nombre del objeto seguido de un punto . y la propiedad.

Código JavaScript 

let usuario = {
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],
};

console.log(usuario.nombre_completo);

terminal Resultado en la consola terminal

(3) ['Enrique', 'Barros', 'Fernández']

Si la propiedad a la cual quieres acceder tiene varios elementos, como por ejemplo un array, tendrás que acceder aplicando lo que te he enseñado anteriormente. LLamada a la propiedad del objeto y le escribimos entre corchetes la posición en el array:

Código JavaScript 

console.log(usuario.nombre_completo[2]);

terminal Resultado en la consola terminal

Fernández

Como crear un método en un objeto de JavaScript

Ahora que ya sabes acceder y utilizar las propiedades de los objetos de forma individual, es el momento de que crees tu primer método. Recuerda que los métodos son funciones que están dentro de un objeto.

Escribamos un método que sea capaz de hacer algo sencillo, un saludo al usuario con su nombre.

Código JavaScript 

let usuario = {
	// Propiedades.
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],

	// Métodos.
	saludar: function() {
		alert('Hola, ' + this.nombre_completo[0] + '.');
	}
};

usuario.saludar();

Resultado en el navegador

Al cargar la página, se efectua esta llamada al método. Lo hacemos igual que llamando a una función, solo que esta vez, hay que indicar primero a que objeto pertenece. La llamada está en la línea 15.

Llamada a método en JavaScript

Si no has programado nunca, que no te preocupe el this de la línea 11. Ahora lo explico.

¿Qué es y para qué sirve this de JavaScript?

El uso de this puede abrumar un poco cuando no has programado antes en otros lenguajes de programación. Ahora verás, que no es para nada algo complicado de entender.

Palabra del lenguaje nº 49 encontrada.
this es una referencia al objeto actual.
announcement Como curiosidad, la palabra this que se ve en otros lenguajes de programación, en Python es self.

this es una palabra clave que hace referencia al objeto en el que está escrito. Esto tendrá más sentido cuando empecemos con la programación orientada a objetos.
Este this lo puedes traducir en este objeto como usuario, así hacemos la referencia al propio objeto dentro de él mismo. Desde fuera, cuando llames al objeto, no podrás utilizar this, deberás utilizar el nombre del propio objeto.
Para que te hagas una idea, fíjate en la línea 11, he sustituido el this por el nombre del objeto. El resultado es el mismo, pero cuando trabajemos con clases, le verás la importancia que tiene, ya que sacaremos varios objetos de una misma clase y no podremos utilizar esta forma:

Código JavaScript 

let usuario = {
	// Propiedades.
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],

	// Métodos.
	saludar: function() {
		alert('Hola, ' + usuario.nombre_completo[0] + '.');
	}
};

usuario.saludar();

Ejercicios de JavaScript

  1. A partir del objeto del ejercicio anterior (nº68) del capítulo anterior, añade un método que muestre en un alert() la siguiente frase utilizando los valores de las propiedades:

    2. El vehículo con marca ____ de color ____ tiene un coste de ____ $.

    Los espacios de la frase deberán ser rellenados con los valores de tus propiedades.

    Ejemplo: El vehículo con marca Opel de color negro tiene un coste de 2000 $.

La solución la encontrarás aquí: Haz click aquí.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.

    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.