Las clases son un concepto utilizado en muchos lenguajes de programación para crear proyectos orientados a objetos. Este concepto nos permite crear y desarrollar todo tipo de proyectos a gran escala, con una arquitectura sólida que dura en el tiempo. En este post, te enseñaremos cómo crear clases en JavaScript para que lleves tus proyectos al siguiente nivel.
Antes de empezar
Antes de enseñarte cómo crear clases en JavaScript, te recomendamos conocer bien este concepto desde su teoría. Para ello, puedes leer nuestros post sobre clases en JavaScript y clases e instancias en JavaScript, o dirigirte al artículo sobre clases en la Mozilla Developer Network.
En términos generales, las clases se conocen como un concepto similar a un molde con el que se pueden crear varias copias únicas. Es decir, una clase tiene un código determinado que puede ser procesado por varias réplicas o instancias. Además, estas instancias pueden insertar sus propios valores en el código, adaptando el molde a las necesidades particulares de la instancia.
¿Cómo crear clases en JavaScript?
El primer paso para crear clases en JavaScript es insertar la palabra clave reservada class. Después de esta palabra, podemos insertar el nombre que le queremos otorgar a nuestra clase (empezando por mayúsculas cada palabra del nombre). A continuación, te ponemos un ejemplo:
class TweetListController
Tras escribir la anterior frase, debemos abrir llaves para escribir el código de nuestra clase, así como lo haríamos con la mayoría de objetos en este lenguaje de programación.
Ahora, lo primero que debemos insertar dentro de las llaves de una clase es su constructor. Este concepto es un método especial que nos permite crear e inicializar cualquier objeto derivado de una clase. Al ser un método, debe ser declarado y recibir parámetros específicos. Para ejecutarlo, basta con insertar la palabra clave constructor y abrir paréntesis. Después de esta inserción, abriremos llaves de nuevo:
class TweetListController {
constructor ( ) {
}
}
Ten presente que solo puede existir un método constructor por clase. Crear más líneas de código con este método en una clase nos devolverá un objeto Error de sintaxis (SyntaxError). Si no tienes muy claro el concepto anterior y su rol, te recomendamos leer nuestro post sobre qué es el constructor de una clase en JavaScript.
El siguiente paso para crear clases en JavaScript es determinar qué propiedad o propiedades va a recibir el constructor de una clase. Este parámetro será el que procese los valores de una instancia. Luego, deberemos declarar el código a ejecutar con este parámetro. Entonces, usando la clase anterior, podemos hacer que el constructor reciba un parámetro de texto y lo pinte por pantalla junto a un string determinado.
A continuación, te mostramos cómo ejecutamos la acción descrita anteriormente. Ten presente que es dentro de los paréntesis del constructor que determinamos el parámetro y dentro de las llaves que ejecutamos el código con base al parámetro.
class TweetListController {
constructor (text) {
console.log («constructor de la clase TweetListController:», text)
}
}
Ahora, una vez creada una clase, podemos jugar con el concepto de clases e instancias en JavaScript. Es decir, podemos crear «copias» de la clase que hemos creado con su constructor. Para ello, basta con insertar la palabra clave new detrás de la llamada al nombre de clase. A continuación, te mostramos como creamos una nueva instancia de la clase anterior y la guardamos en una variable de tipo const:
const controller 1 = new TweetListController (valor a pasar)
Con la línea de código anterior, estamos haciendo un new sobre una clase y creando una representación nueva de ella. Además, al insertar algún valor dentro de los paréntesis de esta instancia, estaríamos ejecutando el constructor de la clase.
¿Cuál es el siguiente paso?
Ahora que sabes cómo crear clases en JavaScript, ¡ha llegado el momento de utilizarlas en tus propios proyectos! Para conocer más sobre la creación y el desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra donde aprenderás a desarrollar tus propias líneas de código con JavaScript y otros lenguajes de programación en muy pocos meses. ¿A qué esperas para convertirte en un desarrollador web profesional? ¡Inscríbete ya!
