Depois de passarmos por muitos artigos sobre JavaScript e como podemos implementar técnicas como Padrões de Projetos, agora chegou a hora de sair do básico e aprender algumas técnicas mais avançadas que podem transformar a sua vida como pessoa desenvolvedora na hora de codar JavaScript!

Esta é uma pequena lista de algumas técnicas interessantes que aprendi ao longo da minha carreira e que me foram muito úteis. Você provavelmente não vai precisar utilizar elas todas sempre, porém quando estamos lidando com alguns tipos de problemas mais elaborados, muitas vezes podemos precisar delas!

Closures

Closures são consideradas uma das técnicas de programação mais avançadas em JavaScript, não porque elas são complicadas de se fazer, mas sim porque são difíceis de entender. Closures envolvem o uso de escopos, como já explicamos neste artigo. Apesar de serem complicadas de entender, o conceito é bem simples.

Esta técnica permite estender o escopo de uma variável além do seu escopo local. Mas não para o escopo global, pense nelas como um escopo “regional” que é mais extenso do que o escopo local mas ainda sim não tem a abrangência de um escopo global.

Essencialmente, para usar closures, precisamos criar uma função aninhada em outra função. Portanto a função interior vai ter acesso a todas as variáveis locais do seu escopo e também vai ter acesso a variáveis da função pai. Veja um exemplo:

function objetoExterno () {
  this.propriedade1 = 'Valor 1'
  this.propriedade2 = 100
  
  const valorRegional = this.propriedade1
  
  this.metodoEmClosure = function () {
    valorInterno = valorRegional

    return valorInterno
  }
}
  
const instancia = new objetoExterno()
console.log(instancia.metodoEmClosure())

Preste atenção em duas partes desse script, veja o this.metodoEmClosure e o nosso console.log no final do mesmo. Como o console.log está chamando um método interno que está em uma função dentro de outra função, esse método pode acessar o valor de valorRegional mesmo que essa variável não esteja no mesmo escopo.

Closures são muito utilizadas para burlar a limitação do JavaScript não possuir modificadores de acesso (embora agora tenhamos propriedades privadas no em classes), criando variáveis que são privadas e públicas.

Literais para argumentos opcionais

Eu não considero esta técnica como sendo avançada, mas é uma técnica que pode te salvar algumas linhas de código, principalmente em sistemas maiores.

O problema acontece quando temos funções que aceitam vários argumentos, alguns são “obrigatórios” – digo isto porque nenhum argumento do JavaScript é, de fato, obrigatório – e outros opcionais. Quantos mais argumentos opcionais temos, mais temos que checar sua existência. Por exemplo:

function mostrarDados (nome, idade, twitter, facebook, site) {
    console.log(`Nome: ${nome}`)
    console.log(`Idade: ${idade}`)
    if (typeof arguments[2] === 'string') console.log(`Twitter: ${twitter}`)
    if (typeof arguments[3] === 'string') console.log(`Facebook: ${facebook}`)
    if (typeof arguments[4] === 'string') console.log(`Site: ${site}`)
}
  
mostrarDados('Lucas', '25')
mostrarDados('Lucas', '25', '@_staticvoid')
mostrarDados('Lucas', '25', '@_staticvoid', '/lsantos.dev', 'https://blog.lsantos.dev')

Não checamos os dois primeiros argumentos porque são “obrigatórios”, mas estamos checando os demais por serem opcionais e estamos observando um array de argumentos posicionais, o que é muito ruim para a leitura e também para a manutenção do código, ao invés disso podemos fazer a passagem de argumentos como um objeto literal:

function mostrarDados (nome, idade, twitter, facebook, site) {
    console.log(`Nome: ${dados.nome}`)
    console.log(`Idade: ${dados.idade}`)
    if (typeof dados.twitter === 'string') console.log(`Twitter: ${dados.twitter}`)
    if (typeof dados.facebook === 'string') console.log(`Facebook: ${dados.facebook}`)
    if (typeof dados.site === 'string') console.log(`Site: ${dados.site}`)
}
  
mostrarDados({ nome: 'Lucas', idade: '25'})
mostrarDados({ nome: 'Lucas', idade: '25', twitter: '@_staticvoid'})
mostrarDados({ nome: 'Lucas', idade: '25', twitter: '@_staticvoid', facebook: '/lsantos.dev', site: 'https://blog.lsantos.dev'})

Além de ficar muito mais simples de entender, também temos um rastro menor de variáveis sendo criadas, já que substituímos cinco variáveis por um único objeto (veja mais sobre garbage collection e alocação de variáveis). O código pode ser um pouco maior, mas acredite, seu eu do futuro vai te agradecer quando tiver que dar manutenção.

Tornando argumentos “obrigatórios” em obrigatórios

Uma dica bastante interessante que vai ajudar muito na hora de criar aquele sistema complexo utilizando JavaScript puro ou até mesmo TypeScript. Você deve ter percebido que utilizei a palavra “obrigatório” dentro de aspas antes, certo?

Isso é porque, no JavaScript, todos os argumento são opcionais. A linguagem em si não checa pela existência ou a completude de um argumento em uma função devido a sua natureza dinâmica, por exemplo, se passarmos um valor string para uma variável que deveria ser um number, a linguagem não vai nos avisar e não vai reclamar. Veja um exemplo:

function foo (nome) {
    console.log(`Meu nome é ${nome}`) // Nome deveria ser uma string
}
  
foo('Lucas') // Meu nome é Lucas
foo() // Meu nome é undefined

Isso fica ainda mais evidente quando usamos objetos, pois vamos ter um erro de propriedade não existente:

function foo (args) {
    console.log(`Meu nome é ${args.nome}`) // Nome deveria ser uma string
}
  
foo({ nome: 'Lucas' }) // Meu nome é Lucas
foo() // Cannot read property 'nome' of undefined

Perceba que o erro não é descritivo, não está dizendo o que está acontecendo e pode estar vindo de qualquer objeto. Uma forma de contornar este problema é utilizando os argumentos opcionais com valores default! Porém, ao invés de dar um valor padrão, criamos uma função:

function required (argumentName) { throw new Error(`Argumento "${argumentName}" é obrigatório`)}
  
function foo (args = required('args.name')) {
    console.log(`Meu nome é ${args.nome}`) // Nome deveria ser uma string
}
  
foo({ nome: 'Lucas' }) // Meu nome é Lucas
foo() // Error: Argumento "args.name" é obrigatório

Podemos incrementar ainda mais com um erro nomeado e o nome da função:

class RequiredParameterError extends Error { constructor (argumentName, functionName) { super(`Argumento "${argumentName}" é obrigatório na função "${functionName}"`) } }
  
function required (argumentName, functionName) { throw new RequiredParameterError(argumentName, functionName)}
  
function foo (args = required('args.name', foo.name)) {
    console.log(`Meu nome é ${args.nome}`) // Nome deveria ser uma string
}
  
foo({ nome: 'Lucas' }) // Meu nome é Lucas
foo() // Error: Argumento "args.name" é obrigatório na função "foo"

const fs = require('fs')
  
function readFileAsync (filePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, (err, data) => {
        if (err) reject(err)
        resolve(data)
    })
  })
}
  
readFileAsync('./index.md')
    .then(console.log)
    .catch(console.error)

const fs = require('fs')
const {promisify} = require('util')
const readFileAsync = promisify(fs.readFile)
  
readFileAsync('./index.md')
    .then(console.log)
    .catch(console.error)

const oracle = require('oracledb')
const options = {
  user: 'usuario',
  password: 'senha',
  connectString: 'string'
}
  
async function start () {
  const connection = await oracle.getConnection(options)
  const { resultSet } = await connection.execute('query', [], { outFormat: oracle.OBJECT, resultSet: true })
  return resultSet
}
  
start().then(console.log)

class Cursor {
  constructor (resultSet) {
    this.resultSet = resultSet
  }
  
  getIterable () {
    return {
      [Symbol.asyncIterator]: () => this._buildIterator()
    }
  }
  
  _buildIterator () {
    return {
      next: () => this.resultSet.getRow().then((row) => ({ value: row, done: row === undefined }))
    }
  }
}
  
module.exports = Cursor

const oracle = require('oracledb')
const options = {
  user: 'usuario',
  password: 'senha',
  connectString: 'string'
}
  
async function getResultSet () {
  const connection = await oracle.getConnection(options)
  const { resultSet } = await connection.execute('query', [], { outFormat: oracle.OBJECT, resultSet: true })
  return resultSet
}
  
async function start() {
  const resultSet = await getResultSet()
  const cursor = new Cursor(resultSet)
  
  for await (const row of cursor.getIterable()) {
    console.log(row)
  }
}
  
start()

function* randomGen () {
  while (true){
    yield Math.floor(Math.random()*1000)
  }
}
  
const gen = randomGen()
console.log(gen.next().value) // 45