Aprenda o que são classes em JavaScript, como e por que utilizá-las em seus códigos.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Na aula de hoje, vou te mostrar o que são as classes em JavaScript, para que servem e como utilizá-las em seus códigos.
Para compreendermos o conceito e as aplicações das classes, vamos relembrar sobre os objetos no JavaScript.
Então, vem comigo que vou te mostrar como usar classes em JavaScript com exemplos práticos.
Para compreendermos as classes em JavaScript, primeiro, precisamos relembrar o que são e como funcionam os objetos no JavaScript.
Essencialmente, um objeto JavaScript é composto por pares de chave-valor que representam informações a respeito desse objeto. Essas informações são delimitadas por chaves.
Esses pares de informações são a estrutura dos nossos objetos no JavaScript. São através deles que conseguimos relacionar uma chave, que representa um campo, a um valor. A chave e o valor são separados por dois pontos.
Os objetos permitem encapsular todo um conjunto de dados relacionados a uma mesma entidade em uma única estrutura.
Vamos visualizar a estrutura básica de objetos JavaScript pegando como exemplo pilotos de corrida.
const corredor1 = {
nome: 'Ayrton Senna',
equipe: 'McLaren',
idade: 29,
correr: function () {
console.log('Vruuuuuuum! ');
},
};Essa estrutura de objeto é o que chamamos de objeto literal em JavaScript. Essa é uma forma concisa de criar um objeto, em que utilizamos a sintaxe de chaves para definir o início e o fim do objeto, e dentro dessas chaves passamos as propriedades e seus valores separados por dois pontos.
Nesse caso, nosso objeto corredor1 possui 3 propriedades: nome, equipe e idade, cada uma com seu respectivo valor. Além disso, há uma propriedade chamada correr, que é uma função anônima, que dentro do objeto chamamos de método.
Para acessarmos algum campo do nosso objeto, podemos executar o seguinte comando:
console.log(corredor1.nome);
Já para acessarmos um método de dentro de um objeto, podemos declarar o comando da seguinte maneira:
corredor1.correr();
Nós construímos esse objeto manualmente, mas e se quiséssemos construir mais objetos como esse. Como poderíamos fazer isso? Uma das formas de fazermos isso seria declarar individualmente cada um desses objetos.
const corredor1 = {
nome: 'Ayrton Senna',
equipe: 'McLaren',
idade: 29,
correr: function () {
console.log('Vruuuuuuum! ');
},
};
const corredor2 = {
nome: 'Max Verstappen',
equipe: 'Red Bull Racing',
idade: 26,
correr: function () {
console.log('Vruuuuuuum! ');
},
};
const corredor3 = {
nome: 'Lewis Hamilton',
equipe: 'Mercedes',
idade: 32,
correr: function () {
console.log('Vruuuuuuum! ');
},
};
const corredor4 = {
nome: 'Charles Leclerc',
equipe: 'Ferrari',
idade: 26,
correr: function () {
console.log('Vruuuuuuum! ');
},
};
const corredor5 = {
nome: 'Lando Norris',
equipe: 'McLaren',
idade: 27,
correr: function () {
console.log('Vruuuuuuum! ');
},
};Perceba que para criar cinco objetos dessa forma, estamos realizando um processo repetitivo e maçante. Além de ser pouco otimizado em estrutura de código. E à medida que tivéssemos de adicionar mais corredores, pior ficaria.
Uma abordagem mais eficiente para realizar esse procedimento seria utilizar as classes no JavaScript.
Em JavaScript, as classes são uma forma de criarmos objetos e organizar o código de maneira mais estruturada, otimizada e reutilizável. As classes fornecem uma sintaxe orientada a objetos para criarmos objetos de forma mais prática.
Uma classe em JavaScript funciona como um molde para criar objetos. Podemos definir as propriedades e os métodos que os objetos criados terão a partir dela. É como se fosse uma “planta” de construção para o objeto.
Por exemplo, poderíamos definir a classe PilotoFormula1:
class PilotoFormula1 {
nome = '';
equipe = '';
idade = 0;
correr() {
console.log('Vruuuuuuum!');
},
};Repare que deixamos os campos da nossa classe vazios, ou no caso da idade com o valor 0, porque assim, quando o usuário criar o objeto, ele definirá essas informações.
Para utilizar e criar um objeto a partir dessa classe, podemos utilizar o seguinte comando:
const corredor1 = new PilotoFormula1();Ao utilizar a palavra-chave new antes da declaração da classe, estamos criando um novo objeto a partir da classe que acabamos de definir.
Podemos visualizar as informações desse objeto e executar o método dele como fizemos anteriormente.
console.log(corredor1);
corredor1.correr();
Porém, esse corredor está com as informações todas vazias, pois não definimos nenhum desses valores no momento de criação do nosso objeto.
Para definirmos essas informações podemos fazer o seguinte:
const corredor1 = new PilotoFormula1();
corredor1.nome = 'Ayrton Senna';
corredor1.equipe = 'McLaren';
corredor1.idade = 29;Após declararmos as informações do nosso corredor, podemos visualizá-lo novamente:
console.log(corredor1);
corredor1.correr();
Dessa vez teremos as informações sendo exibidas corretamente. Porém, apesar de tornar o código mais enxuto, podemos otimizá-lo ainda mais utilizando funções construtoras com a nossa classe.
Para otimizarmos ainda mais nosso código, podemos utilizar dentro da classe uma função construtora (constructor) que nos permite inicializar os objetos com os valores desejados.
class PilotoFormula1 {
constructor(nomeDoPiloto, equipeDoPiloto, idadeDoPiloto) {
this.nome = nomeDoPiloto;
this.equipe = equipeDoPiloto;
this.idade = idadeDoPiloto;
}
correr() {
console.log('Vruuuuuuum!');
}
}A palavra-chave this é utilizada para se referir às propriedades da função construtora. Ela faz referência à instância específica da classe que estamos criando. Isso permite inicializarmos as propriedades da instância com os valores passados como argumento para o construtor.
Dessa forma, podemos criar os objetos da seguinte maneira:
const corredor1 = new PilotoFormula1('Ayrton Senna', 'McLaren', 29);
const corredor2 = new PilotoFormula1('Max Verstappen', 'Red Bull Racing', 26);
const corredor3 = new PilotoFormula1('Lewis Hamilton', 'Mercedes', 32);
const corredor4 = new PilotoFormula1('Charles Leclerc', 'Ferrari', 26);
const corredor5 = new PilotoFormula1('Lando Norris', 'McLaren', 27);Perceba como nosso código ficará muito mais conciso e otimizado.
Nessa aula, você aprendeu o que são as classes em JavaScript, seu conceito, para que servem e como utilizá-las ao longo de seus códigos.
Vimos de forma prática, com exemplo, como utilizar as classes no JavaScript e otimizar a construção de objetos com elas.
O uso de classes em JavaScript é extremamente útil para a construção de objetos no JavaScript, tornando o código muito mais otimizado e enxuto.
Além disso, esse conceito de classes é um conceito já estabelecido e aplicado em outras linguagens de programação. Então, compreender como as classes funcionam no JavaScript também irá facilitar o seu entendimento das classes em outras linguagens de programação.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador