_Blog_

Blog

Linguagem Javascript: a grande mudança que veio com o ES6

Tags:, , , , , , , , , , , , , , , , , , , , , , Destaque, Tecnologia
featured image

A linguagem JavaScript, que há muito tempo era apenas uma forma de adicionar comportamentos bonitinhos em uma página, hoje em dia domina a web. Com esse sucesso, muitos frameworks foram lançados para permitir que utilizássemos JavaScript não apenas no front, mas também no back e em aplicações mobile.  Embora seja importante aprender esses frameworks, a nossa base (a sintaxe do JavaScript) deve receber ainda mais foco, pois é ela que dá sustentação para construirmos soluções inteligentes e performáticas para nossos problemas. Independente do framework escolhido.

SAIBA MAIS: JAVA – UMA SOBREVIVENTE NA ERA DAS NOVAS LINGUAGENS

Por este motivo, decidi escrever um pouco sobre algumas features do ES6 e iniciar uma série sobre essas atualizações. Esse artigo tem como premissa que o leitor já tenha um conhecimento básico de programação, caso você não tenha, talvez algumas coisas não fiquem muito claras.

ES6 – A grande mudança na linguagem JavaScript

Mas por que abordar uma mudança antiga? Bem, apesar de ser antiga, essa é uma das mudanças mais importantes que a linguagem já teve. Durante muito tempo a linguagem JavaScript não recebeu grandes atualizações, mas em 2015 isso mudou. Com a versão do EcmaScript 6 (ES6), a linguagem teve uma revolução tão impactante (e tão extensa) que ainda não foi absorvida completamente pela comunidade. Por isso, resolvi trazer algumas das features que ganhamos nessa tão importante atualização.

Arrow functions

Com arrow functions nós ganhamos certa agilidade na hora de “codar”, mas a diferença não é apenas visual. Enquanto funções normais (ES5) possuem o contexto do seu this atrelado a ela mesma, arrow functions utilizam o contexto externo. No exemplo abaixo, ao chamarmos “this.name” não conseguimos recuperar o valor, já que o this se refere a quem chamou a função (no caso o array “powers”).

linguagem-JavaScript

Agora usando arrow functions, o contexto externo é mantido e conseguimos acesso ao atributo.

linguagem-JavaScript

Outra característica interessante é que com arrow functions podemos omitir parênteses quando temos apenas um parâmetro e omitir até as chaves e o comando “return” quando quisermos retornar a primeira expressão/valor:

linguagem-JavaScript

Map, filter e reduce

Já utilizamos o map no exemplo anterior, mas achei melhor deixar para explicar ele aqui, juntamente com filter e reduce.

No primeiro exemplo, temos um array de super-heróis e queremos apenas os seus verdadeiros nomes. Nós chamamos a função map no nosso array e o parâmetro (Hero) é a representação do elemento daquela iteração naquele array. Com isso, usamos arrow function e retornamos apenas o atributo “realName”.

linguagem-JavaScrip

O reduce nos permite pegar um array e manipular cada membro deste array de forma que tenhamos apenas um valor no final. Nesse caso, estamos somando a quantidade de cidadãos salvos. As variáveis “prev” e “curr” se referem, respectivamente, ao elemento da iteração anterior e ao da iteração atual do array ‘citizensSaved’.

linguagem-JavaScript

Agora com o filter nós iremos retornar apenas aqueles elementos do array que satisfaçam a condição que passamos dentro da arrow function. No exemplo abaixo, retornaremos somente os super-heróis da DC.

linguagem-JavaScript

Por fim, um exemplo desses métodos de forma encadeada. Como map e filter retornam arrays, podemos utilizar eles de forma encadeada e, por fim, utilizar o reduce para obter um valor final. No exemplo abaixo, primeiro filtramos apenas pelos heróis da DC. Em seguida, retornamos apenas os valores do atributo ‘citizensSaved’ e os somamos com reduce.

linguagem-JavaScript

Some, Every

Some é uma função que retorna True quando algum elemento dentro do array satisfaz a condição retornada. Em contraste, every retorna True somente quando todos os elementos do array satisfazem a condição retornada.

linguagem-JavaScript

Find

Apesar de parecido com filter, o find possui algumas diferenças. Em primeiro lugar, ele retorna a primeira ocorrência que satisfaça a condição. Ao contrário do filter, que percorre todo o array. Além disso, o find nos retorna um objeto, ao passo que o filter nos retorna um Array.

linguagem-JavaScript

Const, let

Trabalhar com escopo no JavaScript era um tanto quanto complicado se você viesse de linguagens como C++ ou Java. Ao contrário delas, com a linguagem JavaScript só possuíamos o escopo dentro da função ou globalmente. E isso poderia trazer alguns problemas. Tendo isso em mente, o comando “let” foi criado. O escopo dele é por bloco, ou seja, não podemos declará-lo dentro de um if e utilizá-lo fora.

Exemplo com var

linguagem-JavaScript

Exemplo com let

linguagem-JavaScript

Const, por sua vez, foi criado com o propósito de receber um valor e não permitir que ele seja alterado. Algo que ajuda a nós, devs, mantermos a coesão e evitar bugs.

linguagem-JavaScript

Durante muito tempo a linguagem JavaScript não recebeu grandes atualizações, mas isso está mudando. O ES6 foi a ponta do iceberg, trazendo funções mais legíveis e formas melhores de controlarmos o nosso escopo. Bem como a integridade dos nossos dados. Como já foi dito no início, esse artigo aborda uma atualização um pouco antiga, pois tem como intuito para dar um passo inicial nesse universo gigante e maravilhoso que é o JavaScript.

*Artigo escrito pelo desenvolvedor Luís Eduardo Teixeira

Related Posts

  • Sites híbridos ou PWA
  • usabilidade e produtividade em TI
  • gestão-de-equipe-ágil
  • desenvolvimento mobile