Month: December 2020

Sintaxe OOP para JavaScript em 5 minutos

Criar uma classe

class Funcionario {

}

Adicionar um construtor

class Funcionario {
    constructor () {
    }
}

Criar propriedades

class Funcionario {
    constructor (nome, salario) {
        this._nome = nome;
        this._salario = salario;
        this._bonificacao = 1.05;
    }
}

Criar método

class Funcionario {
    constructor (nome, salario) {
        this._nome = nome;
        this._salario = salario;
        this._bonificacao = 1.05;
    }
    calculaSalarioFinal () {
        return this._salario * this._bonificacao;
    }
}

Propriedades estáticas

class Funcionario {
    static contador = 0;

    constructor (nome, salario) {
        this._nome = nome;
        this._salario = salario;
        this._bonificacao = 1.05;

        Funcionario.contador += 1;
    }
    calculaSalarioFinal () {
        return this._salario * this._bonificacao;
    }
}

Getters e setters

class Funcionario {
    static contador = 0;

    constructor (nome, salario) {
        this._nome = nome;
        this._salario = salario;
        this._bonificacao = 1.05;

        Funcionario.contador += 1;
    }
    calculaSalarioFinal () {
        return this._salario * this._bonificacao;
    }
    get nome () {
        return this._nome;
    }
    set nome (novoNome) {
        this._nome = novoNome;
    }
}

Herança

class Gerente extends Funcionario {
    constructor (nome, salario) {
        super(nome, salario);
        this._bonificacao = 1.07;
    }
}
class Diretor extends Funcionario {
    constructor (nome, salario) {
        super(nome, salario);
        this._bonificacao = 1.09;
    }
}

Sobrescrever um método

class Diretor extends Funcionario {
    constructor (nome, salario) {
        super(nome, salario);
        this._bonificacao = 1.09;
    }
    calculaSalarioFinal (adicional=0) {
        return super.calculaSalarioFinal() + adicional;
    }
}

Simular um classe abstrata

class MinhaClasse {
    constructor () {
        if (this.constructor === MinhaClasse) {
            throw new Error('"MinhaClasse" é abstrata');
        }
    }
}

Simular um método abstrato

class MinhaClasse {
    constructor () {
        if (this.constructor === MinhaClasse) {
            throw new Error('"MinhaClasse" é abstrata');
        }
    }
    meuMetodo () {
        throw new Error('Método não implementado');
    }
}

Referências

  • https://cursos.alura.com.br/course/javascript-polimorfismo
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Destructuring em JavaScript

Trata-se de uma sintaxe que permite “desembrulhar” valores de um objeto ou um array antes de atribuí-los à variáveis.

O exemplo a seguir “desembrulha” os valores de um array em duas variáveis.

> const [ peso, idade ] = [ 70, 36 ];
> console.log(peso)
70
> console.log(idade)
36

Outro exemplo usando arrays.

> const [ peso, idade, ...resto ] = [ 70, 36, 170, 1984 ]
> console.log(peso)
70
> console.log(idade)
36
> console.log(resto)
[ 170, 1984 ]

Também é possível “desembrulhar” propriedades de objetos.

> const { peso, idade } = { peso: 70, idade: 36 }
> console.log(peso)
70
> console.log(idade)
36

Mais um exemplo usando objetos.

> const { peso, idade, ...resto } = { "peso": 70, "idade": 36, "altura": 170, "nascimento": 1984 }
> console.log(peso)
70
> console.log(idade)
36
> console.log(resto)
{ altura: 170, nascimento: 1984 }

É possível ainda construir novos arrays “desembrulhando” valores de outros arrays.

> const array1 = [ 70, 36 ]
> const array2 = [ "setenta", "trintaeseis" ]
> const array3 = [...array1, ...array2 ]
> console.log(array3)
[ 70, 36, 'setenta', 'trintaeseis' ]

Da mesma forma é possível construir novo objetos “desembrulhando” valores de outros objetos.

> const obj1 = { "idade": 36, "peso": 70 }
> const obj2 = { "nome": "Fabio" }
> const obj3 = { "funcao": "Piloto", ...obj1, ...obj2 }
> console.log(obj3)
{ funcao: 'Piloto', idade: 36, peso: 70, nome: 'Fabio' }

A sintaxe de destructuring também serve para passagem de parâmetros para funções.

> f = function([idade, peso]) {
    console.log("idade", idade);
    console.log("peso", peso);
  }
> f([ 36, 70 ])
idade 36
peso 70

O mesmo do exemplo acima, mas usando um objeto.

> f = function ({ idade, peso }) {
    console.log("peso", peso);
    console.log("idade", idade);
  }
> f({ "peso": 70, "idade": 36 })
peso 70
idade 36

Referências

  • https://cursos.alura.com.br/destructuring-em-js-c308
    • Aula da https://github.com/juunegreiros
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment