Rodrigo Brito

Da memória para a manipulação

Antes de iniciarmos, vamos criar um arquivo html que será a index do projeto (index.html) já lincado a um arquivo js (script.js).

Você pode utilizar o código gerado pela sua IDE, ou a melhor forma que julgar necessário, supondo que você já tenha conhecimento prévio em HTML e CSS.

 

Então vamos ao conceito! O que são variáveis?

As variáveis são responsáveis em guardar dados na memória. Elas são iniciadas de três formas diferentes, de acordo com o seu escopo (o propósito e condição desta variável no código), através das palavras var, let ou const. Mais adiante será abordado a diferença entre os tipos de inicialização. Por hora, vamos estudar somente utilizando var.

Exemplos de declaração de variáveis:

var nome = "Rodrigo";
let profissao = "Militar";
const idade = 35;

 Inserindo estes valores no arquivo script.js e utilizando o console do navegador (F12),  obteremos a seguinte saída utilizando o console.log.

As variáveis são úteis para evitar repetições de dados no código. Isto, na programação é conhecido como DRY (Don't repeat yourself). Exemplo:

var precoProduto = 10;
var qtdProduto = 3;
var precoTotal = precoProduto * qtdProduto;

A sintaxe de criação é a utilização da palavra var, seguido do nome, do sinal igual "=" e o valor da variável: var teste = true. O ponto e vírgula não é obrigatório, mas em alguns casos podem ocorrer erros na interpretação do código, sobretudo quando forem minificados (compactados), então, sugiro sempre utilizar o ponto e vírgula automaticamente no final de cada declaração.

Podem ser criadas variáveis sem a repetição da palavra var, da seguinte forma:

var nome = "Rodrigo", profissao = "Militar", idade = 35;

É permitido também a declaração de uma variável sem valor inicial, ela retornará undefined até que seja atribuído um valor a esta. Ex: var titulo.

E como podemos nomear as variáveis? As variáveis podem iniciar com cifrão "$", urderline "_" ou letras. Podem conter números, mas não podem ser iniciadas por eles. São Case sensitive, sendo assim, var titulo é diferente de var Titulo. Nunca utilize palavras reservadas, que são utilizadas pelo interpretador. Há uma lista destas palavras no seguinte link: https://www.w3schools.com/js/js_reserved.asp.

Geralmente utilizamos o padrão Camel Case, assim como nos exemplos anteriores precoTotal, precoProduto e qtdProduto.

Exemplos de nomes inválidos: var !titulo, var boolean, var 1colocado.

Exemplos de nomes válidos: var $titulo, var _boolean, var primeiroColocado.

Caso uma variável não tenha sido definida e estiver sendo utilizada como parâmetro em algum ponto do script, o retorno será: ReferenceError variável (nome da variável) is not  defined.

Algo interessante no JS é que as variáveis declaras, são virtualmente movidas para a parte inicial do código, contudo, os valores atribuídos não são movidos. Esta ação é chamada de Hoisting. Para entender o Hoisting, se você executar um console.log em uma variável não declarada, o retorno será o undefined, mas se logo após você declarar esta variável, o console log executado antes retornará undefined, pois neste ponto a variável existe mas ainda não foi executada a leitura do seu valor atribuído. Em um próximo console.log o valor será lido. Ex:

Há a possiblidade de mudar o valor atribuído às variáveis do tipo var e let. Para as variávies do tipo const não, pois o seu propósito é justamente manter o valor constante, imutável após atribuído.

Podemos colocar comentários no código. Eles podem ser utilizados da seguinte forma em uma linha utilizando duas barras ou de várias linhas entre barras e asterisco. Ex:

// Comentário de uma linha

/*
Comentário
com diversas
linhas
*/

Um comentário em uma linha de código desativa a esta linha, por isso o ideal é que comentários sejam removidos do arquivo final.