DEV Community

Wiley Marques
Wiley Marques

Posted on

TypeScript vs Dart - Declaração de Variáveis

TypeScript, por ser apenas uma camada em cima do JavaScript, traz as mesmas três formas de declaração de variáveis:

  • var
  • let
  • const

Dart também possui três formas, mas um pouco diferentes:

  • var
  • final
  • const

Vamos ver essas diferenças.

Todos os exemplos podem ser executados no TypeScript Playground, no caso do TypeScript, e no DartPad, para Dart.

Declaração de variáveis em TypeScript

let e const são formas relativamente novas, introduzidas para resolver alguns problemas inerentes a var. Mas vamos começar com algumas características do var para entendermos o porquê de let e const serem criados.

Confusões do var em TypeScript

A primeira característica confusa de var é a possibilidade de declarar a mesma variável várias vezes. Ou, em outras palavras, declarar múltiplas variáveis com o mesmo nome:

var x = 10;
var x = 15; // Variável `x` foi criada novamente
Enter fullscreen mode Exit fullscreen mode

Além disso, podemos atribuir um valor a uma variável antes mesmo de ela ter sido declarada:

x = 15; // Atribuindo valor à variável `x` antes de sua declaração
var x; // Declaração da variável
Enter fullscreen mode Exit fullscreen mode

Curiosidade: Essa característica está ligada a como funciona Hoisting em JavaScript.

Normalmente, o maior ponto de confusão diz respeito ao escopo de uma variável declarada com var. Com escopo queremos dizer em qual parte do código a variável pode ser usada. Em diversas linguagens o escopo é por bloco (exemplo: if) onde a variável foi declarada, mas var em TypeScript tem o escopo por função.

Por exemplo, podemos declarar uma variável dentro de um if e usá-la fora:

if (false) {
  var x = 15; // Declarando variável dentro do `if`
}
x = 10; // Acessando variável
Enter fullscreen mode Exit fullscreen mode

Isso acontece porque, como dito acima, o escopo de var é por função e não por bloco. Para ficar mais claro, usemos como exemplo o mesmo código acima com uma função:

function myFunction(): number {
  if (false) {
    var x = 15; // Declarando variável dentro do `if`
  }
  x = 10; // Variável pode ser acessada em qualquer parte da função `myFunction`
  return x;
}
Enter fullscreen mode Exit fullscreen mode

Como pudemos ver, var em TypeScript tem alguns pontos de confusão que, se não bem entendidos, podem trazer problemas ao código. Não é incomum introduzirmos erros no programa por conta disso. Além disso, desenvolvedores com conhecimento em outras linguagens não esperam esses comportamentos.

Na tentativa de resolver esses problemas, let e const foram introduzidos.

let to the rescue

Basicamente, o let funciona como o var mas com os problemas corrigidos. Com isso, geralmente, devemos deixar de usar var e utilizarmos apenas let e const. Vamos recapitular os pontos levantados anteriormente e ver como let se comporta.

Vamos começar declarando a mesma variável duas vezes:

let x = 10;
let x = 15; // Error: Cannot redeclare block-scoped variable 'x'
Enter fullscreen mode Exit fullscreen mode

Ao executar esse código, o compilador do TypeScript informa que a variável já havia sido declarada anteriormente.

Próximo ponto, atribuir um valor a uma variável antes de sua declaração:

x = 15; // Error: Block-scoped variable 'x' used before its declaration
let x;
Enter fullscreen mode Exit fullscreen mode

Novamente o compilador mostra um erro, onde é apontado o uso da variável antes da sua declaração.

Agora um dos maiores pontos de confusão no var. Escopo baseado em função. O que acontece se pegarmos o mesmo código usado anteriormente trocando var por let?

function myFunction(): number {
  if (false) {
    let x = 15;
  }
  x = 10; // Error: Cannot find name 'x'
  return x;
}
Enter fullscreen mode Exit fullscreen mode

Aqui é evidenciada a diferença de escopo entre let e var. No exemplo acima a variável x foi declarada dentro de um bloco de código (if), estando disponível apenas neste bloco. Isso se deve ao fato de let ter o escopo por bloco, não por função.

A vida nem sempre é uma const

Assim como let, const se comporta da mesma maneira explicada no tópico anterior. Seu escopo também é por bloco, não é possível redeclaração e nem utilizá-la antes da declaração. A diferença entre os dois está na atribuição. Onde em const só pode ser feita uma única vez.

Por exemplo, com let podemos alterar o valor de uma variável indefinidamente:

let x = 10; // Iniciada com 10
x = 15; // Alterando para 15
Enter fullscreen mode Exit fullscreen mode

Com const, isso não é mais possível. Uma vez criada, seu valor não pode ser alterado:

const x = 10;
x = 15; // Error: Cannot assign to 'x' because it is a constant
Enter fullscreen mode Exit fullscreen mode

É importante ressaltar que apesar de a atribuição só poder ser realizada uma vez, const não torna o valor imutável. Caso o valor da variável for um objeto, suas propriedades ainda podem ser alteradas:

const person = {
  age: 23,
};
person.age = 30; // É possível alterar o valor de uma propriedade normalmente
Enter fullscreen mode Exit fullscreen mode

Uma boa prática em programação é não reutilizar uma mesma variável para diferentes significados. Trazendo uma maior legibilidade ao código. const ajuda a reforçar esse conceito, por não permitir esse reuso. Com isso, podemos sempre codificar com const, usando let apenas onde for realmente necessário.

Declaração de variáveis em Dart

Após entendermos sobre a declaração de variáveis em TypeScript, vamos abordar Dart.

Chamando o var

Assim como fizemos na sessão onde abordamos let em TypeScript, vamos realizar os testes demonstrando as inconsistências de var em TypeScript. Porém agora vamos executar com Dart.

Declarando a mesma variável duas vezes:

var x = 10;
var x = 15; // Error: The name 'x' is already defined
Enter fullscreen mode Exit fullscreen mode

Assim como em let para TypeScript, o compilador do Dart não deixa declarar a variável mais de uma vez.

Agora atribuindo um valor a uma variável antes de sua declaração:

x = 15; // Error: Local variable 'x' can't be referenced before it is declared
var x;
Enter fullscreen mode Exit fullscreen mode

Novamente o compilador mostra um erro, onde é apontado o uso da variável antes da sua declaração.

Por último, o teste relacionado ao escopo de uma variável:

int myFunction() {
  if (false) {
    var x = 15;
  }
  x = 10; // Error: Undefined name 'x'
  return x;
}
Enter fullscreen mode Exit fullscreen mode

Com esses testes, podemos ver que var em Dart se comporta como let em TypeScript. Agora vejamos final.

Todo final é feliz?

Dart tem duas formas de variáveis constantes: final e const. Começando com a primeira forma, final em Dart é semelhante a const em TypeScript.

Com isso, a variável só pode ter valor atribuído uma vez:

final x = 10;
x = 15; // Error: The final variable 'x' can only be set once
Enter fullscreen mode Exit fullscreen mode

Assim como const em TypeScript, final em Dart não torna o valor da variável imutável. Ainda é possível ser alterado como seja algum tipo complexo:

final person = {
  'age': 23,
};
person['age'] = 30;
Enter fullscreen mode Exit fullscreen mode

Últimas constatações

Nos sobrou a última forma para declaração de variáveis em Dart. const é mais uma forma de criar variáveis de atribuição única. Inclusive, const implicitamente também é final. Porém há uma diferença.

const faz o valor ser imutável em tempo de compilação. Com isso, o compilador garante que o valor de uma variável definida com const nunca seja alterado.

Para ficar mais claro, ao escrevermos o mesmo exemplo anterior com const, não recebemos qualquer erro durante a digitação:

const person = {
  'age': 23,
};
person['age'] = 30;
Enter fullscreen mode Exit fullscreen mode

Porém ao executar, o compilador dispara um erro: Unsupported operation: Cannot modify unmodifiable Map. Nos mostrando que tentamos alterar um valor não modificável.

Podemos dizer então que const em Dart garante Imutabilidade!

Para saber mais sobre esses conceitos, veja o Language Tour de Dart.

Conclusão

Para concluir, podemos resumir:

  • Nunca usar var em TypeScript
  • var em Dart é igual a let em TypeScript
  • final em Dart é igual a const em TypeScript
  • const em Dart garante imutabilidade em tempo de compilação

Até o próximo artigo!

Discussion (0)