DEV Community: Gabriel Araujo

Seja explícito!

Gabriel Araujo — Wed, 30 Aug 2017 14:28:49 +0000

CLEAR — Martin Kenny (CC BY-NC-SA 2.0)

Aumente a legibilidade do seu javascript com const e let.

Uma das novidades da versão ES6 do javascript (ou ES2015 — pra você que torceu o nariz) foi a inserção do let e const no reinado solitário do var na declaração de variáveis. Apesar de não ser algo recente, muitos desenvolvedores ainda utilizam o velho conhecido por inúmeras razões. Mas existem algumas boas justificativas para que o uso do var fique apenas no passado.

var e hoisting

Quando usamos var em javascript, o escopo da variável é a função onde a mesma foi declarada (ou global, caso não tenha sido declarada dentro de nenhuma função). Isso permite que algumas coisas, não tão comum em outras linguagens, funcionem. Por exemplo:

Escopo da variável quando declarada com var

Se por um lado isso pode ser visto como flexibilidade, por outro, isso pode ser fonte para problemas de legibilidade no código e até facilitar o aparecimento de bugs. Uma variável que é declarada em algum ponto do código pode estar visível em outra parte do código onde ela não é necessária. Como consequência, acidentalmente um desenvolvedor pode reutilizar essas variáveis e gerar efeitos inesperados. Além disso, imagine quão complicado seria identificar em que parte da função uma variável está sendo utilizada ou alterada — não vou nem falar no caso de ser uma variável global!

Uma variável deve ter um único propósito e seu escopo deve ser o menor possível.

E não só isso, é possível referenciar uma variável antes dela ser declarada! Mas como isso pode ser possível? Calma. Na verdade, o que acontece por baixo dos panos é que todas as declarações são processadas antes de qualquer código ser executado. Na prática é como se todas as declarações fossem movidas para o topo da função. Este comportamento é popularmente conhecido como hoisting.

Hoisting e declarações com var

Por muito tempo recomendou-se declarar variáveis sempre no topo da função. Felizmente, isso não é mais necessário desde o ES6 com a chegada do let e const.

`let`

Diferentemente do var, o uso do let permite que você declare variáveis com acesso apenas ao bloco, instrução ou expressão em que foram declaradas, ou seja, possui o mais conhecido escopo de bloco (block escope).

let e escopo de bloco

Apesar de não ser possível acessar a variável fora do escopo em que foi declarada, isso não quer dizer que não existe hoisting com o let. Existe. A diferença é que as variáveis não são inicializadas com undefined, como acontece com o var. Deste modo, qualquer tentativa de acesso a uma variável antes da sua declaração irá gerar um erro de referência. Este período entre o início do escopo e a execução da declaração da variável é conhecido como temporal dead zone , ou TDZ.

Temporal Dead Zone

const

O const obedece as mesmas regras de escopo e TDZ do let mas com duas pequenas diferenças: você precisa a inicializar a variável no momento da declaração e você não pode reatribuir valores a ela — daí vem o nome “const” em que o objetivo é declarar valores constantes.

Escopo e TDZ em declarações com const

Mas cuidado! Sua variável pode ser constante mas o objeto que ela referencia não é imutável! É exatamente isso. Não poder reatribuir somente garante que a variável irá referenciar sempre o mesmo objeto, mas o objeto em si continua sendo mutável. Por exemplo, uma constante inicializada com um lista não poderá mais referenciar um outro valor, mas a lista qual ela referencia pode ter suas propriedades alteradas, como adicionar ou remover itens.

Declarações com const vs imutabilidade

Caso você realmente precise de um objeto imutável você tem algumas outras opções como o Object.freeze(), immutable.js, mori.

let vs const

O propósito de uma variável deve sempre estar explícito, e por isso, devemos evitar reusar a mesma variável a menos que isto seja essencial. Deste modo, é preferível utilizar const ao invés de let já que ele nos impõe este comportamento.

A verdade é que na ampla maioria dos casos não precisamos reutilizar variáveis. Somos tentados a fazer por facilidade. Quando você achar que precisa utilizar um let, desafie você mesmo e refatore. E verá que você realmente não precisava — não acredita? dê uma olhada nos exemplos do artigo abaixo.

Let’s use const! Here’s why.

É claro que existem casos em que a presença de um let é indiscutível, como o uso de contadores e acumuladores em loops, flags em algoritmos matemáticos, etc. Mas de maneira geral, recomenda-se:

Sempre use const;
Raramente use let (quando estritamente necessário);
Nunca use var;

E se você está achando que vai ser difícil lembrar ou se disciplinar a isto, eu tenho uma ótima notícia: linters! (eslint, tslint, jshint, jslint, etc). Eles irão lembrar por você e garantir que você não cometa nenhuma atrocidade com a legibilidade. Os leitores do seu código irão te agradecer por isso — incluindo você.

--verbose

JavaScript ES6+: var, let, or const? - JavaScript Scene - Medium

Eric Elliott ・ Oct 17, 2019 ・ 3 min read
Medium

var, let and const — What, why and how — ES6 JavaScript Features

Mattias Petter Johansson ・ Jul 11, 2016 ・ 1 min read
Medium

A guide to JavaScript variable hoisting 🚩 with let and const

Bhuvan Malik ・ Jan 16, 2018 ・ 5 min read
Medium

Learn ES6 The Dope Way Part I: const, let & var - freeCodeCamp.org - Medium

Mariya Diminsky ・ Oct 1, 2017 ・ 3 min read
Medium

ES6 In Depth: let and const

ES6 let VS const variables

TODO App em Angular 2 — Parte 1

Gabriel Araujo — Sat, 04 Jun 2016 13:58:47 +0000

[Atualizado em 16/09/2016]

Cerca de dois anos após os primeiros anúncios, o framework web Angular 2 foi oficialmente lançado como uma versão estável. E mesmo após esse curto período já detém de todo um ecossistema de desenvolvimento mobile e desktop — como foi amplamente divulgado na última ng-conf. A última versão do framework não só é mais performático que seu antecessor, como também mais otimizado e voltado à filosofia de componentes web.

Nesta série de artigos faremos um passo-a-passo na criação de um app em Angular 2 para o gerenciamento simples de tarefas. O código dessa primeira parte pode ser encontrado aqui.

Criando o projeto

Um dos principais esforços nessa nova versão do framework é facilitar ainda mais a vida dos desenvolvedores e promover um padrão de projeto entre a comunidade. Para isto, o time do angular desenvolveu uma ferramenta de apoio na criação de aplicações angular 2, a Angular CLI (que atualmente está em versão beta). Deste modo, os únicos pré-requisitos para o nosso projeto são os da própria ferramenta, sendo eles:

Node.js v.4+

E nada mais. Sim! O node é a única dependência que você vai precisar se preocupar em instalar. Todas as outras dependências básicas do projeto serão gerenciadas pelo npm—aliás, a Angular CLI faz o “trabalho sujo” e instala todas elas pra você na criação do projeto. Então chega de conversa e vamos criar nosso projeto. Mas antes, instalamos a Angular CLI:


npm install -g angular-cli

Com a CLI em mãos, podemos criar nosso primeiro projeto utilizando seu comando new :


ng new todo-ng2

Será criado um diretório chamado todo-ng2, e dentro dele uma estrutura inicial do projeto. Automaticamente também serão instaladas todas as dependências do projeto via npm. Esta etapa pode levar alguns poucos minutos, então seja paciente e aguarde enquanto as dependências são baixadas e instaladas.

Estrutura do projeto

A estrutura criada para o projeto deverá ser similar ao seguinte:


todo-ng2/

|- e2e/

|- src/

| |- environments/ 

| |- app/

| |- shared/

| |- ...

| |- todo-angular2.component.css

| |- todo-angular2.component.html

| |- todo-angular2.component.spec.ts

| |- todo-angular2.component.ts

| |- ...

| |- index.html

| |- styles.css

| |- main.ts

| |- tsconfig.json

|- ...

|- angular-cli.json

|- package.json

Nosso foco inicial será o diretório src/ , pois é lá onde estarão os principais arquivos utilizados pelo build da aplicação, ou seja, tudo aquilo que vai para o servidor no processo de deploy. Na raiz de src/ temos alguns arquivos importantes. São eles:

index.html : página inicial da nossa aplicação.
main.ts : responsável pela inicialização da aplicação.
styles.css : folha de estilo global da aplicação.
tsconfig.json : configurações de compilação do Typescript.

Nota: A configuração da aplicação e o conteúdo desses arquivos está fora do escopo deste post. Por enquanto usaremos as configurações predefinidas pela Angular CLI na criação do projeto.

Na maior parte do tempo estaremos trabalhando em src/app/ , pois é lá onde estará o nosso código Angular (components, services, directives, pipes, templates…). Dentro de src/app/ temos alguns arquivos que definem o componente raiz da nossa aplicação:

todo-angular2.component.ts : definição do componente.
todo-angular2.component.html : template utilizado pelo componente.
todo-angular2.component.css : folha de estilo utilizada pelo componente.
todo-angular2.component.spec.ts : testes unitários do componente.

A estrutura de pastas e arquivos gerada pela Angular CLI segue o Angular 2 Style Guide, criado pelo próprio time do Angular — e eu fortemente recomendo que você dê uma lida nele!

Executando o projeto

Agora vamos testar o nosso projeto e verificar se está tudo funcionando corretamente. Para isso utilizamos o comando serve da Angular CLI:


ng serve

Acesse a aplicação em https://localhost:5100 e, se tudo estiver funcionando como o esperado, a página exibida será similar ao seguinte:

No próximo artigo falaremos em detalhes sobre componentes Angular 2 e criaremos a primeira funcionalidade da nossa aplicação. Até lá!

Indo além

Python? Mas por onde começo?

Gabriel Araujo — Sat, 21 Mar 2015 13:00:17 +0000

Porque você deveria aprender Python?

A resposta é relativamente simples, como foi detalhado num artigo da readwrite. Desde 2008 Python é classificada como uma das oito linguagens de programação mais populares do mundo. Muito disso é devido a ampla adoção do Python por grandes empresas de tecnologia como o Google, Yahoo e NASA. Mas não é só o mercado que indica e impulsiona tal popularidade. Oito das dez melhores faculdades de computação dos Estados Unidos atualmente ensinam Python nas disciplinas de introdução a programação. Isso porque a curva de aprendizado da linguagem é mínima se comparada com a maioria das linguagens.

Além disso, temos uma outra razão: a configuração necessária para você começar a programar em Python em qualquer computador é muito simples. Então chega de conversa e vamos ao que interessa!

fonte: https://www.python.org/community/logos/

Instalando o Python

Linux

A maioria dos sistemas GNU/Linux já vem com o Python pré-instalado, então você não tem absolutamente nada a fazer neste quesito — que maravilha! Entretanto, algumas distros trazem apenas a versão 2.x do Python. Se você prefere a versão 3.x você precisará instalá-la, mas isto é bastante simples. (Eu fortemente recomendo utilizar a versão 3. A versão 2 será descontinuada em breve.)

Nota: Este passo-a-passo é baseado em uma distribuição derivada do Debian. Para outras distribuições você precisará compilar o Python antes de instalá-lo.

Abra o terminal e execute os seguinte comando:


$ sudo apt-get update && sudo apt-get install python3

Pronto, você já tem o Python 3 instalado e pronto para usar! No mesmo terminal execute o comando python3 e você entrará no modo interativo do Python. Você verá algo como:


$ python3

Python 3.4.0 (default, Apr 11 2014, 13:05:11) [GCC 4.8.2] on linux Type “help”, “copyright”, “credits” or “license” for more information.

>>>

A partir daí você já pode executar seus comandos em Python. Para sair do modo interativo, basta executar quit().

Mac OSX

Assim como os sistemas GNU/Linux, a versão 2.x do Python já vem pré-instalada no Mac OSX. Se você for utilizar a versão 3.x, precisaremos instalá-la. Baixe a versão mais atual do Python 3.x para Mac OSX.

Em seguida, duplo clique no arquivo .pkg baixado para iniciar a instalação (é possível que você precise informar seu usuário e senha de administrador). Siga as instruções na tela que aparece, aceite os termos de licença e confirme a instalação.

Pronto, o Python 3 já está pronto para usar no seu Mac! Navegue até Aplicações > Utilitários e execute o Terminal. Na tela do terminal, execute o comando python3 que levará você ao modo interativo do Python, de onde vocẽ já poderá executar seus comandos. Você verá algo semelhante a isto:


$ python3

Python 3.4.1 (default, Apr 11 2014, 13:05:11) [GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwin Type “help”, “copyright”, “credits” or “license” for more information.

>>>

Para sair do modo interativo e retornar ao terminal, basta executar a função quit().

Windows

O windows não vem com o Python instalado de fábrica, então será preciso instalar manualmente. Baixe o instalador da versão mais atual do Python 3.x para Windows.

Nota: Escolha o instalador apropriado para a arquitetura do seu Windows: x86 (32 bits) ou x86–64 (64 bits).

Duplo clique no instalador baixado para iniciar a instalação. Siga as instruções e aguarde a finalização do processo de instalação. Pronto, seu Windows já tem o Python instalado! Importante: se você estiver instalando a versão 2.x do Python, é bem provável que você precise configurar as variáveis de ambiente. No caso da versão 3.x, o instalador já realiza esta etapa automaticamente. Uma vez instalado, você já pode se divertir programando em Python. Basta executar o prompt de comando e entrar no modo interativo.


C:\Users\Gabriel Araujo> python

Python 3.4.2 (v3.4.2:ab2c023a9432, Apr 11 2014, 13:05:11) [MSC v.1600 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information.

>>>

Use o modo interativo!

Dica: principalmente para quem está começando a programar, o modo interativo do python (ou shell) é muito importante. Com ele você pode executar comando a comando e assim ter o feedback da execução de forma imediata.

O modo interativo é útil, por exemplo, para você fazer “testes rápidos” com alguns comandos — sabe aquele momento que você não lembra de uma sintaxe ou não sabe se ela vai realmente funcionar? Então, execute no modo interativo apenas este pedaço de código e você tem uma resposta imediata. Como no seguinte exemplo:


>>> print 'Olá, mundo!'

  File "<stdin>", line 1

    print 'Olá, mundo!'

                      ^

SyntaxError: invalid syntax

>>> print('Olá, mundo!')

Olá, mundo!

>>>

Originally published at gabrielaraujo.dev on March 21, 2015.