Objetos de JavaScript. Parte 8 Curso de JavaScript de Principiante a Avanzado en 10 publicaciones de blog

Esta es la parte 8 de la serie de publicaciones del blog sobre JavaScript que te llevará de principiante a avanzado. Si no has leído la publicación anterior sobre funciones de JavaScript, puedes verla aquí. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Sin más preámbulos, comencemos con el octavo tutorial.

Objetos de JavaScript – tabla de contenido:

1. Objetos de JavaScript
2. Funciones constructoras de objetos

Objetos de JavaScript

Los objetos de JavaScript desempeñan un papel importante. Aunque es un tema relativamente amplio, también puede ser relativamente fácil desarrollar una comprensión de ellos. Una de las formas más comunes de entender los objetos es pensar en ello como si estuvieras recreando un coche en código. Tendremos dos conceptos principales cuando tratemos con objetos. Tendrán propiedades y métodos. Las propiedades son las cosas que tienen los objetos de JavaScript y los métodos son las cosas que los objetos pueden realizar. Veamos eso con algunos ejemplos.

// definamos múltiples objetos para tener una mejor comprensión
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "El avión comienza a despegar..."},
    land: function(){return "El avión comienza a aterrizar..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "El coche avanza..."},
    smartSummon: function(){return "El coche comienza a conducirse solo hacia ti..."}
}

// podemos acceder y registrar en consola las propiedades que tienen:
console.log("Las propiedades del avión son:");
console.log("Puede volar: " + plane.canFly);
console.log("Número total de alas: " + plane.numberOfWings);
// también podemos hacer que el avión realice acciones
console.log(plane.takeOff());
console.log(plane.land());
// si miras más de cerca, puedes ver que 
// no registramos directamente en consola las acciones dentro de los métodos
// en su lugar, las devolvemos desde las funciones
// y en este caso las estamos registrando en consola
// de esta manera, si queremos, también podemos dar al usuario una alerta
// que le diga que el avión está despegando
alert(plane.takeOff());
// también podemos aprender sobre las propiedades que tiene el coche 
// y registrarlas en consola para práctica adicional
console.log("¿Es un coche eléctrico? " + car.isElectric);
console.log("¿Cuál es la marca del coche? " + car.brand);
console.log("¿Cuántas puertas tiene? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Cuando ejecutamos el código anterior, deberíamos obtener la siguiente salida:

Acabamos de ver dos ejemplos principales de objetos de JavaScript: uno con un avión y otro con un coche. Así como los aviones y los coches tienen diferentes propiedades y diferentes cosas que pueden hacer, los diferentes objetos que creamos pueden hacer cosas diferentes y tener diferentes propiedades. Si miras más de cerca, puedes comenzar a ver un patrón en la forma en que definimos objetos, propiedades y métodos.

Comenzamos definiendo objetos de la misma manera que definimos variables o constantes; en este caso, generalmente es suficiente usar constantes al definir objetos de JavaScript. Pero en lugar de simplemente asignar esa constante a un valor, como hicimos con las constantes regulares, ahora abrimos y cerramos un conjunto de llaves y esencialmente proporcionamos los datos en pares clave-valor. Ten en cuenta que definir propiedades y métodos es bastante similar. La principal diferencia es que al definir propiedades, asignamos los nombres a un valor que recuperaremos más adelante. Sin embargo, cuando definimos un método, tenemos que proporcionar una función que ejecutaremos más adelante. Esta diferencia también se refleja en cómo los llamamos más adelante. Por ejemplo:

// cuando recuperamos una propiedad no usamos corchetes al final
console.log("Puede volar: " + plane.canFly);
// cuando recuperamos métodos, 
// también los ejecutamos añadiendo corchetes después de ellos
// los métodos aquí son esencialmente funciones que 
// pertenecen a un objeto específico
console.log(plane.takeOff());

Es importante que añadamos los paréntesis después de los métodos, tal como lo hicimos con las funciones regulares. De lo contrario, solo tendremos la función en sí en lugar de ejecutar la función.

// para ejecutar el método del objeto deberíamos
// añadir los paréntesis justo después del nombre del método
// de lo contrario, obtendremos la definición del método 
// como en este ejemplo
alert(plane.takeOff);

El resultado mostrado es exactamente lo que definimos al crear el método. También puedes ver que estamos definiendo una función sobre la marcha. En este caso, estamos definiendo la función sin un nombre, lo cual es posible en JavaScript. Esto no siempre es preferible, ya que darle un nombre a la función lo hace más claro cuando lo vemos siendo mostrado. Sin embargo, en este caso, no estamos usando la función en ningún otro lugar fuera de la definición del objeto, por lo que no tenemos que darle un nombre a la función. En su lugar, podemos referirnos a la función desde dentro del objeto con el nombre del método que le asignamos.

Otra cosa que debes saber sobre recuperar propiedades o métodos de un objeto es que hay más de una forma de lograrlo. Usamos una de las prácticas más comunes en los ejemplos anteriores, que es usar la notación de punto. Pero también hay otra forma comúnmente utilizada para lograr el mismo resultado que deberías conocer. Esta segunda notación utiliza corchetes y comillas.

// ambas son igualmente válidas y 
// nos dan los mismos resultados
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// revisa la consola de JavaScript para los resultados

Es genial que podamos almacenar muchas propiedades detalladas y acciones que podemos realizar usando objetos, pero ¿qué pasa si necesitamos usar objetos, no solo para 1 coche, sino digamos para 20 coches, 100 coches o incluso 1,000,000 de coches, cada uno con un ID único y valores de propiedades variables? ¿Tendríamos que escribir todo ese código desde cero para cada coche? La respuesta es no. En su lugar, podemos aprovechar algo llamado la función constructora de objetos.

Funciones constructoras de objetos

Los constructores de objetos pueden acelerar enormemente tu proceso de codificación y pueden hacer que tu código sea significativamente más DRY. Con las funciones constructoras de objetos, esencialmente definimos un plano para el objeto. Una vez que tenemos un plano para el objeto, podemos crear tantas instancias de ese objeto de una manera mucho más clara, con mucha menos repetición. Veamos eso con algunos ejemplos.

// así es como definimos un plano para los objetos
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// así es como podemos instanciar los 
// objetos de JavaScript que queremos crear a partir 
// del plano que definimos arriba
// en este caso creamos 3 objetos de coche 
// con diferentes valores para las propiedades
const car1 = new Car(1, "blanco", true, 4);
const car2 = new Car(2, "negro", true, 2);
const car3 = new Car(3, "rojo", false, 4);
// podemos acceder a las propiedades del objeto tal como lo hicimos antes
console.log("El color del primer coche es: " + car1.color);
console.log("El color del segundo coche es: " + car2.color);
console.log("El color del tercer coche es: " + car3.color);

Ejecutar el código anterior nos daría la siguiente salida de código:

Como puedes ver en el código anterior, una vez que tenemos un plano, simplemente podemos pasar diferentes valores para crear diferentes objetos de JavaScript a partir del plano inicial. Una cosa que probablemente notaste es que la convención de nomenclatura para los constructores de objetos es tener la primera letra en mayúscula. En este caso, en lugar de definirlo como “car”, lo nombramos “Car”. Si tuviéramos que crear una clase de avión, la nombraríamos “Plane”.

Cuando queremos crear objetos a partir de nuestro plano definido, usamos la palabra clave “new” y luego escribimos el nombre de la función constructora de objetos que queremos usar. Después del nombre, abrimos y cerramos un conjunto de paréntesis y pasamos los argumentos con los que queremos crear nuestro objeto. Ten en cuenta que no repetimos los nombres de los parámetros, simplemente pasamos los valores en el mismo orden que los parámetros. También puedes notar que al crear el plano estamos usando una palabra clave llamada “this”. Por ahora, lo que debes saber es que la palabra clave “this” permite referirse al objeto en sí, y es parte del código boilerplate que debemos escribir cuando estamos creando el plano para el objeto.

Cuando estás aprendiendo a programar, puedes escuchar el término “código boilerplate”, esto es bastante común, especialmente en el desarrollo web. Básicamente significa que hay partes de código que escribimos para tener ciertas configuraciones en su lugar. Aunque no hay una solución única que proporcionemos con el código, sí tenemos que escribir esas partes para tener un código funcional. Dependiendo del código boilerplate, algunos IDEs incluso proporcionan atajos para proporcionar esos códigos boilerplate.

Los objetos de JavaScript que acabamos de aprender son un tema amplio y tienen muchos detalles a medida que profundizamos. Pero a un nivel fundamental, debes saber que podemos imitar objetos de la vida real con código usando objetos. Esos objetos de JavaScript pueden tener diferentes propiedades y métodos a los que podemos acceder y realizar.

En el próximo tutorial descubriremos más temas y conceptos que son bastante importantes y comúnmente utilizados en JavaScript.