Nos últimos anos o JavaScript vem passado por uma grande revolução: uma enorme
adoção por partes das empresas,
polêmicas
e algumas rivalidades:
- ES6/ES7 x TypeScript
- Angular x React
- Gulp x Grunt
- Functional Programming x OOP
Apesar disso, existe uma parte fundamental da linguagem que todos deveríamos
saber.
1) Call x Apply
As funções call e apply nos deixam invocar métodos como se estivéssemos
no contexto de um outro objeto:
O primeiro parâmetro tanto de call quanto de apply é o próprio contexto,
ou seja: o valor de this será exatamente o que você passar como parâmetro.
Então qual a diferença entre eles? O segundo parâmetro.
Enquanto apply aceita um array, call requer parâmetros divididos por
vírgulas:
Qual a importância?
A importância desses dois métodos e o porquê deles serem tão usados
(principalmente em
libs)
é bem simples: apply e call nos permitem pegar métodos emprestados
reduzindo assim a quantidade total de código gerada e seguindo o
DRY.
2) Closures
A combinação de uma função e a referência ao seu estado externo é uma
closure. Uma aplicação comum de closures são os
IIFEs:
A variável a é privada por ficar em uma closure. Já a b, é uma
variável global.
Uma outra abordagem para a criação de uma closure, é basicamente criar uma
função dentro de outra, dessa forma:
A função de dentro (hello) tem acesso ao escopo externo dela (init).
Porém, ao sairmos de init, perdemos a visibilidade da função hello.
Qual a importância?
A capacidade de esconder informações também conhecida como: data privacy. Isso
é essencial para que possamos esconder informações que deveriam ser privadas e
programar para uma interface e não para uma
implementação.
3) This
A palavra-chave this no JavaScript funciona de uma maneira um pouco
diferente das outras linguagens. Em linguagens
OO
comuns o this se refere a instância da classe corrente. Porém, no JavaScript
o valor de this é determinado pelo contexto de invocação da função e onde
elas foram chamadas.
Escopo Global
No escopo global (em um browser) o this se refere ao objeto
window, tanto dentro
quanto fora de uma função:
Método de objeto
Quando usado dentro de um método de um objeto, o this se refere ao próprio
objeto:
E no caso de objetos aninhados, o this vai se referir ao objeto pai mais
próximo:
É bem comum esquecermos a regra acima, principalmente no uso de loops:
Uma forma fácil de corrigir esse problema é simplesmente guardar o valor do
this em uma variável e ao invés de chamar o this, chamar essa variável:
Função sem contexto
Quando usamos o **this **numa função invocada sem contexto então o bind é
feito no contexto global, mesmo se a função for definida dentro de um objeto:
Função na Prototype Chain
Quando um método está na prototype
chain
de um objeto, o this desse método vai se referir ao objeto que o está
chamando, mesmo se o método não estiver definido nesse objeto:
Qual a importância?
O this é um dos maiores responsáveis por erros para quem está iniciando com
o JavaScript. Portanto entender como ele funciona é de extrema importância para
quem quer dominar a linguagem e gerar menos bugs.
4) Bind
Agora que já entendemos o this em JavaScript e os métodos call e
apply, podemos estudar o método bind.
O bind é muito semelhante ao call e apply: serve para passarmos um
contexto para uma função, que não é dela, e podermos executá-la. A diferença é
que call e apply invocam a função imediatamente:
Enquanto bind retorna uma nova função que quando for executada terá o
contexto que passamos.
É comum usarmos o bind para o disparo de eventos:
E também no mundo React:
Qual a importância?
Basicamente a mesma de apply e call.
5) Map, Filter e Reduce
Você provavelmente já passou por alguma situação em que era necessário por
exemplo iterar sobre um array, ou então verificar se existe alguma propriedade
nele ou mesmo simplesmente gerar um novo array com base no primeiro. Os
métodos map, filter e reduce nos ajudam nessas situações além de
começarmos a pensar mais em termos de programação
funcional.
**Map:**Dado um array qualquer, como podemos fazer para transformá-lo, ou
mapeá-lo, em um outro array? Existe a forma difícil (sem map):
E existe a forma fácil (com map):
**Filter:**Dado o mesmo array, como podemos gerar um novo filtrando apenas
os 6 primeiros meses do ano?
Com o filter é bem fácil fazer isso:
Reduce: Dado o array de meses que temos trabalhado até então, como
podemos fazer para gerar uma acumulação de valores, ou reduzi-lo, em algum
valor específico?
Com o reduce seria mais ou menos assim:
Pra quem conhece o Redux (um state container
muito comum em aplicações que usam o React), uma curiosidade é que a ideia dele
está basicamente resumida na ideia de uma função reduce: a Reducer
Function.
Qual a importância?
Os métodos map, filter e reduce são a base da programação
funcional
não só em JavaScript, mas em diversas outras linguagens. E sem saber programação
funcional não há como tirar 100% de proveito de JavaScript e do seu ecossistema.
6) Prototype
A herança em JavaScript é feita através dos prototypes. Ela funciona de uma
maneira um pouco diferente da herança
clássica,
o que pode gerar um pouco de confusão mesmo para os mais desenvolvedores mais
experientes em JavaScript.
Podemos pensar em objetos em JavaScript como agregadores de propriedades
dinâmicas. E quando um objeto tenta acessar qualquer propriedade sua e não a
encontrar, ela procurará no seu prototype. E se não estiver lá, no
prototype de seu prototype até que a propriedade seja encontrada ou
então essa corrente, chamada de Prototype
Chain,
se acabe:
Animal consegue invocar o método walk porque o mesmo pertence a ele. Dog
também consegue invocar porque apesar do mesmo não pertencer a ele pertence a
seu prototype. No caso de Airplane porém, nem ele e nenhum prototype
seu encontrou o método walk até o fim da Prototype Chain.
Qual a importância?
Um dos conceitos mais usados em qualquer linguagem de programação é a Herança e
com JavaScript ela é feita através do Prototype. Entender bem não apenas o
Prototype como também o Prototype Chain é fundamental para dominar o
JavaScript.
7) Hoisting
A tradução de hoist é içar, levantar ou suspender. E é isso que acontece em
JavaScript quando declaramos uma variável: ela é levantada até o topo do
escopo.
Qual o retorno da função abaixo?
As respostas mais comuns são 1 ou 2, mas a resposta correta é undefined. A
declaração de variáveis em JavaScript é hoisted (ou elevada), mas não sua
inicialização. Portanto o código acima é equivalente a esse:
Para evitar problemas inesperados, tente sempre declarar todas a variáveis no
topo do escopo, mesmo que você não as tenha inicializado ainda. Ou então
atualize para o ES6 e passe a usar as keywords
let e const. Elas funcionam da maneira esperada:
Qual a importância?
Evitar futuros bugs ao entender uma das partes mais problemáticas da
linguagem.
Para aprender mais
É difícil encontrar conteúdo bom e atualizado em português. Com isso em mente
criamos o JSCasts, onde você vai se manter em
dia com o JavaScript e todo o seu ecossistema de forma fácil e interativa.
Cursos:
Esse artigo foi escrito originalmente no canal do Tableless no Medium!
