Forem: Jose Juarez Junior

JavaScript | Closure

Jose Juarez Junior — Thu, 16 Oct 2025 21:56:41 +0000

Em JavaScript, um closure (ou clausura, em português) é um conceito fundamental que acontece quando uma função “lembra” do ambiente em que foi criada, mesmo depois de esse ambiente ter sido executado.

🧠 Conceito simples:

Um closure é:

“Uma função que tem acesso às variáveis do seu escopo léxico (ou seja, o escopo onde ela foi criada), mesmo depois que esse escopo saiu de execução.”

🔍 Exemplo clássico:

function criarContador() {
  let contador = 0; // variável do escopo da função criarContador

  return function() {
    contador++;              // função interna acessa variável externa
    console.log(contador);
  };
}

const contar = criarContador();

contar(); // 1
contar(); // 2
contar(); // 3

O que está acontecendo aqui:

A função criarContador é executada uma vez.
Ela retorna uma nova função.
Mesmo após criarContador terminar sua execução,
a função retornada ainda tem acesso à variável contador.
Isso é o closure: a função “lembra” do ambiente onde foi criada.

💡 Por que isso é útil?

Closures são usados para:

Encapsulamento e privacidade de dados (como “variáveis privadas”);
Funções que mantêm estado entre chamadas;
Callbacks e event handlers;
Factories e funções geradoras de funções.

JavaScript | Herança básica

Jose Juarez Junior — Mon, 13 Oct 2025 21:22:10 +0000

Digamos que tenhamos a seguinte classe, para criar um carro:

class Carro {
    constructor(marca, modelo) {
        this.marca = marca;
        this.modelo = modelo;
    }

    desligar() {
        return 'Carro desligou';
    }

    acelerar() {
        return 'Indo de 0 a 100 km/h em 10 segundos';
    }
}

Digamos que agora eu queira criar um outro tipo de carro. Um carro semelhante, mas que tenha o método "acelerar", com outra implementação:

class CarroVeloz {
    constructor(marca, modelo) {
        this.marca = marca;
        this.modelo = modelo;
    }

    desligar() {
        return 'Carro desligou';
    }

    acelerar() {
        return 'Indo de 0 a 100 km/h em 5 segundos';
    }
}

Veja que repetimos as classes, porém a única diferença entre elas, é o método "acelerar". Isso é totalmente válido para a linguagem. Porém é uma má prática. Se tivéssemos várias outras variações de carro, deveríamos ter consistência entre elas. Digamos que em uma mudança de regra de negócio, todos os tipos de carro deveriam receber como parâmetro de entrada, o ano. Teríamos que entrar em todas classes que são um tipo de Carro e adicionar esse parâmetro de entrada. É nesse cenário que temos a herança. Na herança, fazemos uma classe herdar propriedades e métodos de outra.
Assim aplicamos a herança em JavaScript:

class CarroVeloz extends Carro {
    acelerar() {
        return 'Indo de 0 a 100 km/h em 5 segundos';
    }
}

A herança é aplicada na classe que está recebendo a herença, para isso é usada a palavra-chave "extends" seguida do nome da Classe pai.
Veja que agora a classe "CarroVeloz" tem somente o método "acelerar", pois está sobrescrevendo ele, ou seja, tendo sua própria implementação. Porém através da herança, tem as propriedades "marca" e "modelo", além do método "desligar".

JavaScript | Classe

Jose Juarez Junior — Mon, 13 Oct 2025 17:29:31 +0000

Classe

A palavra-chave "class" não fazia parte das primeiras versões do JavaScript, trata-se de um syntactic sugar. Foi adicionado em 2015.
Classes são um modelo, que podemos usar para gerar instâncias de receitas ou padrões. Definimos o modelo e em seguida podemos criar objetos com base nesse modelo.
Podemos definir a seguinte classe:

class Triangle {
    getArea(){
        return (this.a + this.b) / 2;
    }

    getHypotenuse(){
        return Math.sqrt(this.a ** 2 + this.b ** 2);
    }
}

No console do navegador:

// Podemos instanciar um novo triângulo
const firstTri = new Triangle()

// Ao chamar uma das funções
firstTri.getArea() // retorna NaN, pois "a" e "b" não foram definidos

// Agora atribuímos valor para "a" e "b":
firstTri.a = 3
firstTri.b = 4

// Se chamar agora um método, ele trará retorno:
firstTri.getArea() // retorna 6
firstTri.Hypotenuse() // retorna 5

Com a classe conseguimos criar uma nova instância, totalmente independente:

const secondTri = new Triangle()
secondTri.a = 5
secondTri.b = 12
secondTri.getArea() // retorna 30
secondTri.Hypotenuse() // retorna 13

O "this" nesse contexto não se refere a classe, e sim a instância da classe.

Convenção de nomeação

Por convenção, os nomes de classes devem estar em UpperCamelCase, o que ajuda a diferenciar das variáveis, que começam com letras minúsculas.

// triangle é a variável
// Triangle é a classe
const triangle = new Triangle()

A instância da classe continua sendo um objeto. Isso porque por baixo dos panos, a instância da classe continua sendo apeanas um objeto normal em JavaScript.

const myTri = new Triangle()
typeof myTri // retorna 'object'

Há uma maneira de determinar se um objeto é uma instância de uma classe específica usando "instanceof":

myTri instanceof Triangle // retorna true

Até o momento, ao criar um instância da clase Triangle, tivemos que definir as propriedades "a" e "b", depois da criação da instância. Porém há um método específico que permite informar as propriedades do objeto, no momento de sua instanciação. Esse é o método construtor. Ele será chamado automaticamente sempre que criarmos uma nova instância de uma classe:

class Triangle {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    getArea() {
        return (this.a * this.b) / 2;
    }

    getHypotenuse() {

    }
}

No caso acima, ao criar uma instância de Triangle, deveremos informar "a" e "b".
No construtor estamos atribuindo o valor de "a" para "this.a" e "b" para "this.b", ou seja, o valor "a" que informamos no construtor, será atribuído ao "a" do objeto. O mesmo acontece para "b". Lembrando que o "this" nesse contexto, é a instância da classe, o objeto.
No console do navegador:

let triang1 = new Triangle(3, 4)
triang1.getArea() // retorna 6

Importante destacar que o parâmetro de entrada, não precisa necessariamente ter o mesmo nome da propriedade, apesar disso ser comum. Veja abaixo que o parâmetro de entrada tem o nome diferente da propriedade do objeto:

class Triangle {
    constructor(sideA, sideB) {
        this.a = sideA;
        this.b = sideB;
    }

    getArea() {
        return (this.a * this.b) / 2;
    }

    getHypotenuse() {

    }
}

O que podemos fazer no construtor?

Atribuição de propriedades.
Validação de dados.

Exemplo de validação:

constructor(a, b) {
    if (!Number.isFinite(a) || a <= 0)
        throw new Error(`Invalida a: ${a}`);

    if (!Number.isFinite(b) || b <= 0)
        throw new Error(`Invalida a: ${b}`);

    this.a = a;
    this.b = b;
}

JavaScript | Dados e funcionalidades

Jose Juarez Junior — Mon, 13 Oct 2025 17:27:35 +0000

Dados e funcionalidades

Em JavaScript podemos criar funções:

/* Area de um triângulo retângulo */
function getTriangleArea(a, b) {
    return (a * b) /2;
}

/* Hipotenusa de um triângulo retângulo */
function getTriangleHypotenuse(a, b) {
    return Math.sqrt(a ** 2 + b ** 2);
}

No console do navegador:

getTriangleArea(3,4) // retorna 6
getTriangleHypotenuse(3,4) // retorna 5

Agora imagine que tivéssemos dez, vinte funções para triângulo. Ficaria confuso manter o controle de todas essas funções diferentes e todos os valores de retorno.
O que podemos fazer é combinar nossos dados com nossas funções em um objeto.

let myTri = {
    a: 3,
    b: 4,
    getArea: function() {
        return (this.a + this.b) / 2;
    },
    getHypotenuse: function() {
        return Math.sqrt(this.a ** 2 + this.b ** 2);
    },
};

Nesse objeto estamos armazenando tanto valores (a e b) como funções (getArea e getHypotenuse), que tecnicamente aqui chamamos de métodos, que na verdade são funções que residem dentro de um objeto.
Veja que usamos a palavra chave "this", para acessar algo dentro do objeto. Nesse contexto, o "this" aqui se refere a esse objeto especificamente.

No console do navegador:

myTrib.a // retorna 3
myTrib.b // retorna 4
myTrib.getArea() // retorna 3.5
myTrib.getHypotenuse() // retorna 5

Porém nesse momento, eu não consigo reutilizar o código. Para triângulos diferentes, preciso criar objetos diferentes.

Portato usando POJO

Ajuda muito a combinação de dados e funcionalidade.
É limpo: funcionalidade relacionada vive junta.
É um problema quando temos mais de um triângulo. Pois:
É difícil de manter
Se tivermos mil triângulos, teremos mil cópias dessas funções, o que seria um desperdício de memória, espaço e tempo para escrever!

É nesse problema que entram as classes. Assunto da próxima postagem.

JavaScript | POJO

Jose Juarez Junior — Mon, 13 Oct 2025 17:21:50 +0000

POJO - Plain Old JavaScript Object

POJO (termo emprestado da linguagem Java) em JavaScript é um um "objeto JavaScript puro", sem mágica, sem herança, sem comportamento espcial. Apenas dados simples. Em JavaScript, um objeto é um armazenamento de dados chave-valor.

Declarando um objeto vazio:

let o1 = {};
let o2 = new Object();

Atribuindo uma propriedade e valor ao objeto criado.

o1.name = "Whiskey";
o1["name"] = "Whiskey";

Criando um objeto com propriedades:

const pet = {
    species: "Dog",
    name: "Antônio",
    age: 3
};

No console do navegador:

typeof pet // retorna 'object'

Com a chave, recuperamos o valor.

pet.name // retorna 'Antônio'

pet["name"] // retorna 'Antônio'

Qual a diferença entre a sintaxe "object.key" e "object["key"]?
A segunda sintaxe permite trabalhar com expressões. Por exemplo:

const key = "species".

No console do navegador:

pet["species"] // Retorna 'Dog'

pet.key // retorna undefined

Propriedades que não existem, são avaliadas como undefined, ao contrário de outras línguas como C# ou Java, por exemplo, que irão lançar uma excessão (erro). Exemplo:

pet["color"] // retorna undefined

Todas os nome de chave serão transformados em strings (stringified em inglês). Exemplo:

pet[1] = "hello";
pet["1"] = "goodbye";

No console do navegador:

pet[1]; // retorna "goodbye"

Isso significa que não importa o que eu digite na chave, ela sempre é transformada em string.

No objeto posso inserir arrays, outros objetos aninhados, funções:

pet.friends = [];

No console do navegador:

> pet
< {species: 'Dog', name: 'Antônio', age: 3, frieds: Array(0)}

Adicionando uma função:

antonio.bark = function() { return "Woof Woof!" };
antonio.bark(); // retorna Woof Woof!