De Objeto Literal para Model
Você já parou para pensar por que alguns códigos JavaScript parecem mais organizados e fáceis de manter do que outros? A resposta pode estar em algo tão simples quanto a diferença entre um objeto literal e uma classe. Neste artigo, vamos explorar como a Programação Orientada a Objetos (POO) pode transformar sua forma de escrever JavaScript, tornando seu código mais limpo, profissional e escalável, rogeriopontesti
Do objeto literal à classe: como a Programação Orientada a Objetos transforma seu código JavaScript
Aprenda a criar objetos de forma eficiente em JavaScript com Programação Orientada a Objetos (POO)! Neste vídeo, mostro a diferença entre código amador e código profissional usando classes e construtores.
De Objeto Literal para Model
"A diferença entre código amador e código profissional muitas vezes está na forma como organizamos nossos dados. Uma classe não é apenas sintaxe - é uma mudança de mentalidade."
O que são objetos literais?
Quando começamos a programar em JavaScript, uma das primeiras coisas que aprendemos é como criar objetos. A forma mais direta é usando o que chamamos de objetos literais. Veja o exemplo abaixo:
const pessoa1 = {
nome: "Rogerio",
idade: 47,
};
const pessoa2 = {
nome: "Maria",
idade: 30,
};
const pessoa3 = {
nome: "João",
idade: 25,
};
console.log(pessoa1, pessoa2, pessoa3);
Este código funciona perfeitamente. Ele cria três objetos com nome e idade, e os exibe no console. Mas observe um detalhe importante: estamos repetindo a mesma estrutura três vezes. Se precisássemos criar 100 pessoas, teríamos que repetir esse bloco 100 vezes. Isso não é eficiente e vai contra os princípios de Clean Code.
O problema da repetição
O código acima tem alguns problemas:
- Repetição excessiva: A estrutura é duplicada para cada objeto
- Difícil manutenção: Se precisar adicionar um novo campo, terá que alterar todos os objetos
- Baixa escalabilidade: Criar muitos objetos manualmente é inviável
- Código verboso: Mais código do que o necessário para a tarefa
É aqui que a Programação Orientada a Objetos (POO) e as classes em JavaScript entram em cena.
O que é Programação Orientada a Objetos?
A Programação Orientada a Objetos é um paradigma de programação que organiza o código em torno de "objetos" que contêm dados (propriedades) e comportamentos (métodos). Em vez de escrever código procedural, onde funções e dados são separados, a POO agrupa dados e funções que operam sobre esses dados em unidades chamadas classes.
Uma classe funciona como um molde ou uma planta para criar objetos. Ela define a estrutura que todos os objetos criados a partir dela terão. Pense em uma classe como a planta de uma casa: você pode construir várias casas diferentes usando a mesma planta.
Como funciona uma classe em JavaScript?
Em JavaScript (ES6+), declaramos classes usando a
palavra-chave class. Dentro da classe, temos um
método especial chamado constructor, que é executado quando um
novo objeto é criado. O construtor
recebe parâmetros e os atribui às propriedades do objeto.
class Pessoa {
constructor(nome, idade) {
this.nome = nome;
this.idade = idade;
}
}
const pessoa1 = new Pessoa("Rogerio", 47);
const pessoa2 = new Pessoa("Maria", 30);
const pessoa3 = new Pessoa("João", 25);
console.log(pessoa1, pessoa2, pessoa3);
Veja como o código ficou mais limpo e organizado:
- Uma única definição: A classe
Pessoadefine a estrutura uma vez - Fácil de estender: Podemos adicionar métodos e propriedades na classe
- Reutilizável: Basta usar
new Pessoa()para criar novos objetos - Profissional: Código mais próximo do que se vê em projetos reais
Comparação lado a lado
Para visualizar melhor a diferença, veja a comparação entre as duas abordagens:
const pessoa1 = {
nome: "Rogerio",
idade: 47,
};
const pessoa2 = {
nome: "Maria",
idade: 30,
};
const pessoa3 = {
nome: "João",
idade: 25,
};
class Pessoa {
constructor(nome, idade) {
this.nome = nome;
this.idade = idade;
}
}
const pessoa1 = new Pessoa("Rogerio", 47);
const pessoa2 = new Pessoa("Maria", 30);
const pessoa3 = new Pessoa("João", 25);
Exemplos práticos de uso
Vamos ver como essa refatoração se aplica em cenários reais de desenvolvimento.
Exemplo 1: Sistema de usuários
// Com classe - mais organizado e escalável
class Usuario {
constructor(nome, email, senha) {
this.nome = nome;
this.email = email;
this.senha = senha;
this.ativo = true;
}
desativar() {
this.ativo = false;
console.log(`Usuário ${this.nome} desativado`);
}
exibirInfo() {
return `Nome: ${this.nome} | Email: ${this.email} | Ativo: ${this.ativo}`;
}
}
// Criando usuários
const usuario1 = new Usuario("Rogerio", "rogerio@email.com", "123456");
const usuario2 = new Usuario("Ana", "ana@email.com", "654321");
console.log(usuario1.exibirInfo());
usuario1.desativar();
console.log(usuario1.exibirInfo());
Exemplo 2: Produtos em um e-commerce
class Produto {
constructor(nome, preco, categoria, estoque) {
this.nome = nome;
this.preco = preco;
this.categoria = categoria;
this.estoque = estoque;
}
aplicarDesconto(percentual) {
const desconto = (this.preco * percentual) / 100;
this.preco = this.preco - desconto;
return this.preco;
}
verificarEstoque() {
return this.estoque > 0;
}
}
const produto1 = new Produto("Smartphone", 2000, "Eletrônicos", 10);
const produto2 = new Produto("Notebook", 4500, "Informática", 5);
console.log(`Preço original: R$ ${produto1.preco}`);
produto1.aplicarDesconto(10);
console.log(`Preço com desconto: R$ ${produto1.preco}`);
console.log(`Em estoque? ${produto1.verificarEstoque()}`);
Por que refatorar para classes?
Refatorar seu código de objetos literais para classes traz diversos benefícios:
🎯 Organização
Código mais estruturado e fácil de navegar. A lógica fica centralizada na classe, não espalhada pelo código.
🔄 Reutilização
Uma classe serve como molde para
criar quantos objetos forem necessários. Basta
usar new.
🔧 Manutenção
Alterações são feitas em um único lugar. Se precisar adicionar um campo, muda só na classe.
📈 Escalabilidade
Sistemas grandes se beneficiam de classes. É mais fácil adicionar funcionalidades sem quebrar o código.
Clean Code e boas práticas
O uso de classes está alinhado com os princípios de Clean Code, um conjunto de práticas que visa escrever código mais legível e fácil de manter.
- DRY (Don't Repeat Yourself): Com classes, não repetimos a estrutura dos objetos
- KISS (Keep It Simple, Stupid): A sintaxe de classes é simples e direta
- Single Responsibility: Cada classe tem uma responsabilidade bem definida
- Open/Closed: Classes podem ser estendidas sem modificar o código existente
// ✅ Bom exemplo - Código limpo com classes
class Cliente {
constructor(nome, email) {
this.nome = nome;
this.email = email;
this.dataCadastro = new Date();
}
exibirResumo() {
return `Cliente: ${this.nome} | Email: ${this.email}`;
}
}
// ❌ Ruim exemplo - Código repetitivo
const cliente1 = { nome: "João", email: "joao@email.com" };
const cliente2 = { nome: "Maria", email: "maria@email.com" };
Conclusão
A diferença entre um código que usa objetos literais e um que usa classes pode parecer pequena à primeira vista, mas tem um impacto enorme na qualidade e na manutenibilidade do software.
Ao refatorar seu código para usar classes, você:
- ✅ Torna o código mais organizado e legível
- ✅ Facilita a manutenção e a evolução do sistema
- ✅ Aplica boas práticas de Clean Code
- ✅ Cria um código mais profissional e escalável
- ✅ Acelera o desenvolvimento com reutilização de código
💡 Lembre-se: A Programação Orientada a Objetos não é apenas sobre sintaxe, é sobre mentalidade. É sobre pensar em termos de objetos que têm responsabilidades bem definidas e interagem entre si para construir sistemas complexos de forma organizada.
🤔 O que você achou?
💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!
❓ FAQ: Perguntas Frequentes sobre POO e Refatoração
🎬 Assista ao Vídeos completo sobre Refatoração
O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..
🎬 Assista ao Vídeos completo sobre Refatoração
🔗 Conecte-se Comigo
💬 Agora conta aí: você já usa Classes no seu dia a dia ou ainda cria tudo isolado como objeto literal? 👇
#Javascript #POO #Programacao #Classes #CleanCode #Refatoracao #DesenvolvimentoWeb #Programador #Frontend #Shorts #Dicasdeprogramação #JS #Programação #Dev #Backend #JavascriptBrasil #JSDeveloper #RogerioPontesTI