Revisitando o Javascript Moderno (Parte 1)

jan 25, 2020

Essa série de posts possuem por intuito descrever os elementos essenciais ao se utilizar Javascript nos tempos atuais. Se você não conhece bem essa linguagem ou já trabalhou com ela muitos anos atrás, recomenda-se a leitura. Apresento um panorama histórico, finalizando com os recursos fundamentais para o uso do Javascript Moderno.

Nos Primórdios

Javascript não é exatamente uma linguagem nova. Ela surgiu em 1995 com o intuito de potencializar o ambiente da Web em seus primórdios. Foi fruto de uma parceria entre Sun e Netscape (sim, o Javascript original foi pensado principalmente para uso no Netscape Navigator). Até pelo fato de ter a Sun no meio, imaginava-se que o Javascript seria uma espécie de versão do Java para o novo meio que estava se popularizando.

No entanto, com os anos se passando, essa linguagem poderia ser perpassada por outras tecnologias. Muita coisa ocorreu para que essa linguagem fosse redescoberta, caso do formato JSON (assunto para outro post), sua utilização tanto no desenvolvimento Front-End e Back-End, sua interação com o DOM (Document Object Model), sua relevância para a adição de interatividade em navegadores e, finalmente, seu prolífico ecossistema de frameworks.

Javascript Moderno

Até por conta da longevidade do Javascript, é notável que sua estrutura, suas palavras-chave e suas instruções tenham se modificado ao longo dos anos. Desde 1996, é feita uma padronização da linguagem, o que levou ao surgimento do ECMAScript. Este último é um padrão para linguagens de Scripting, que norteia o desenvolvimento de dialetos como o ActionScript, JScript, QTScript, etc.

Feitas todas essas ressalvas, listarei alguns conhecimentos que são importantes de se ter quando o assunto é Javascript moderno (principalmente se você não acompanhou o ECMAScript 6).

var, let e const

Historicamente, ao se declarar uma variável em Javascript, você usava var.

var variavel_antiga;

Só que, com o advento do ES6, passou-se a utilizar duas novas palavras-chave, que são let e const.

let variavel_nova;
const constante;

Após a criação destes, não se deve usar o var, mas sim o let ou o const. O var ainda existe para fins de compatibilidade para aplicações antigas. Quanto ao let e ao const, o primeiro é usado no lugar do var, quando for declarar uma variável que realmente mude de valor ao longo de sua aplicação.

Quanto ao const, você utiliza quando o elemento tiver um valor atribuído uma única vez, que jamais se possa alterar na execução.

let idade_pessoa = 23; //esse valor pode mudar
const cpf_pessoa = 12345678; //esse valor jamais se altera

Funções Arrow

Essa é uma maneira de simplificar a notação de uma função em alguns contextos.

//sem arrow function
let hello = function(){
     return "Hello World!";
}

//com arrow function
hello = () => {
     return "Hello World!";
}

Se a sua função possui uma única linha de comando e esta é justamente um return, então você pode escrevê-la da seguinte maneira:

hello = () => "Hello World!";

Caso o exemplo anterior possua um parâmetro:

hello = (name) => "Hello " + name;

Aliás, se houver um único parâmetro, é possível simplificar ainda mais, omitindo os parênteses:

hello = name => "Hello " + name;

Quando se utiliza a palavra-chave this, o uso de funções arrow muda seu significado. No contexto de funções típicas em Javascript, a palavra this refere-se a quem invocou a função. Quando utiliza-se uma função arrow, this vai se referir sempre ao elemento que criou a função.

Um bom exemplo dessa situação envolvendo this é descrita aqui.

Export e Import

Em projetos grandes, é natural que seu código esteja descrito em diferentes arquivos, tornando-o modularizado. É bastante comum você importar arquivos em diferentes linguagens, usando por exemplo include no caso de C e C++ e import no contexto de Python e Javascript.

Trataremos primeiramente o export, que consiste em delimitar que estruturas poderão ser importadas em outros arquivos por meio do import. Existem muitas formas de se utilizar o comando para exportar, como é possível ver aqui. Exemplos abaixo:

//vetor
export let nomes = ['lucas', 'bianca', 'nilson', 'mariza'];

//constante
export const pi = 3.14;

//função
export function printMessage(name){
     console.log("Hello " + name);
}

Quanto ao import, envolvemos o que queremos importar com chaves ({ e }):

import {printMessage, pi, nomes} from './modulo.js';

printMessage('roberto');

Ainda que não seja recomendado por questões de eficiência (principalmente para bibliotecas grandes), é possível importar tudo de uma só vez:

import * as moduloLucas from './modulo.js';

moduloLucas.printMessage('silva');

Note que é possível definir "apelidos" usando a expressão as.

É importante enfatizar o conceito de export default. Se você empregá-lo, torna-se possível importar algo sem a necessidade de se usar chaves ({ e }):

//em um arquivo funcao.js
export default function(){
   console.log("Teste!");
}

//em outro arquivo
import funcao from "funcao"
funcao(); //Teste!

Com o export default pode-se importar elementos como variáveis, funções e classes dando a estes nomes distintos. No exemplo acima, a função exportada sequer tem um nome definido. Só que ao importar, esta pode ser definida com o nome desejado pelo criador do arquivo. No caso, optou-se por "funcao".

Só é necessário lembrar que você só pode usar export default uma única vez por arquivo.

Referências:

Universo Discreto

Discussão sobre este post