Variáveis em Javascript

Tipos de dados e variáveis em Javascript

Variáveis em Javascript são uma forma para se salvar dados que possam ser acessados e/ou manipulados posteriormente, independente do tipo desses dados, strings, números, booleanos, arrays, objetos ou funções.

Na aula anterior, você viu como criar arquivos .js, como utilizar a tag <script> e mais alguns dados extremamente importantes para sua introdução à linguagem. Hoje falaremos de outras duas partes que também são muito importantes e que você vai utilizar constantemente em todos os seus scripts, os tipos de dados e as variáveis em Javascript.

Por que usar variáveis?

Como eu descrevi no início desse artigo, variáveis servem para guardar dados de quaisquer tipos. Sua utilização faz seu código ficar mais limpo e fácil de ser mantido.

No modo grosso de dizer, poderíamos falar que criar uma variável é dar um apelido a algo para que fique mais fácil chamar este "algo" posteriormente.

Por exemplo, meu nome é Luiz Otávio Miranda Figueiredo, transformando isso em variável ficaria assim:

Agora toda vez que eu precisar falar meu nome, ao invés de escrever todo o meu nome, eu posso escrever apenas o nome da variável "meuNome" e o Javascript saberá que estou me referindo ao valor dela, no caso "Luiz Otávio Miranda Figueiredo".

Criando variáveis em Javascript

Em Javascript utilizamos a palavra var para dar escopo a uma variável, tal escopo pode ser local ou global.

Uma variável local pode ser acessada apenas pela função na qual ela foi criada (você verá mais sobre funções posteriormente), uma variável global pode ser acessada em qualquer parte do seu arquivo Javascript, incluindo outros arquivos e bibliotecas que você possa vir a utilizar no futuro.

Não é incorreto utilizar variáveis globais (sem a palavra var), contudo, como elas podem ser acessadas em quase todas as partes do seu arquivo, não é recomendável que você as utilize. Isso pode gerar conflitos com outras bibliotecas e/ou seus próprios arquivos Javascript que você adicionar posteriormente na sua página.

Isso acontece porque você pode precisar utilizar o nome daquela variável para salvar algo que seja necessário para seu código, porém, se alguma outra biblioteca, ou outra função que você criar, modificar o valor daquela variável acidentalmente, seu código terá problemas. Neste caso, pode acontecer de você perder horas tentando encontrar um problema que você mesmo gerou.

Para resumir, sempre utilize a palavra "var" antes do nome de suas variáveis, a não ser que saiba exatamente o que está fazendo.

Nomenclatura de variáveis em Javascript

Os nomes das variáveis em Javascript são bastante flexíveis. Eles podem conter letras, números, sublinhados e cifrões:

A regra aqui é que uma variável só pode começar com um caractere, um cifrão ou um sublinhado, mas nunca com um número:

No entanto, é só no primeiro caractere, depois dele você pode utilizar o que quiser (letras, números, sublinhados ou cifrões):

O nome da variável acima contém acentos, cedilha e sublinhados e, por incrível que pareça, está correto por não iniciar com um caractere inválido (um número, por exemplo).

Observação: Por questões de boas práticas de desenvolvimento, não utilize caracteres especiais (como palavras acentuadas) em variáveis. Está correto mas não é recomendável, portanto, tente utilizar apenas letras (sem acento), números e sublinhados. Além disso, tente selecionar um nome que descreva exatamente o valor da sua variável, por exemplo:

É um nome bem mais expressivo do que:

Dependendo do tamanho do seu código, pode se tornar impossível saber que "tj" significa "Taxa de Juros". Com isso você perde tempo tentando descobrir o que significa "tj". E o pior da história, se ela não estiver comentada detalhando o que significa, você provavelmente terá de reescrever o código mentalmente para descobrir.

Palavras reservadas pelo Javascript

Existem algumas palavras que não podem ser utilizadas como nomes de variáveis em Javascript por serem palavras reservadas da linguagem, veja a lista completa em Reserved Words – Mozilla Developer Network.

Um segredo aqui é tentar criar variáveis por palavras compostas de duas formas: ou utilizar "CamelCase", ou separar as duas palavras por um sublinhado, exemplo:

Variáveis são Case Sensitive

Isso quer dizer que o Javascript faz distinção entre letras maiúsculas e minúsculas, ou seja:

É completamente diferente de:

Neste caso são duas variáveis diferentes, mesmo que tenham o mesmo valor.

Tipos de dados e variáveis em Javascript

Os tipos de dados que uma variável carrega é simplesmente o método de interpretação que o motor Javascript do navegador utilizou para detectar o tipo de tal valor. Por Javascript ser uma linguagem de tipagem fraca (ou tipagem dinâmica), dependendo do contexto é possível que uma mesma variável tenha diferentes tipos de dados para um mesmo valor. Por exemplo:

No trecho acima, o tipo de dado para a variável a e b são claramente valores numéricos (1 e 2), portanto, ao chamar a função "alert" (que gera um alerta) com o valor de a (1) somado (+) ao valor de b (2), teremos um resultado 3 ( 1 + 2 = 3 ). Porém, a função abaixo muda o contexto e consequentemente o tipo do valor de a de numérico para string.

Criamos uma nova variável c do tipo "string" (que pode conter quase qualquer caractere) e tentamos somar seu valor com o valor de a. Como o valor de c não é um valor numérico e sim uma string, não existe a possibilidade de soma, portanto, o motor Javascript do navegador não faz tal soma, mas sim a concatenação dos valores (junta os valores), resultando em: O valor de a é: 1. Ou seja, o valor de a, mesmo sendo numérico, também foi tratado como uma string pelo contexto em que foi aplicado.

Os tipos de dados de uma variável Javascript podem ser:

  • String: quase qualquer valor entre aspas simples ou aspas duplas;
  • Numérico: números;
  • Booleano: true (verdadeiro) ou false (falso);
  • Array: veremos posteriormente;
  • Objeto: veremos posteriormente;
  • Função: veremos posteriormente.

Sendo os três primeiros da lista acima (string, numérico e booleano) valores primitivos.

Para esta aula, vamos tratar apenas os valores primitivos, posteriormente veremos arrays, objetos e funções.

Tipo String

Os tipo de dados "String" é uma cadeia de zero ou mais caracteres Unicode (letras, números e sinais de pontuação).

Normalmente utilizamos este tipo de dado para representar textos em geral.

Os caracteres de uma string devem ser envolvidos em aspas simples ou aspas duplas.

Perceba que iniciei e terminei os valores da variável emailCliente com aspas simples. Não é permitido utilizar os dois tipos de aspas para envolver os valores de uma variável, ou seja, iniciou com aspas simples, termine com aspas simples, iniciou com aspas duplas, termine com aspas duplas.

Veja exemplos corretos da utilização das aspas:

Agora exemplos incorretos:

Aspas dentro de aspas

Pode ser necessário utilizar aspas dentro dos valores de uma string, aí geraríamos um problema com todo o nosso código. Se você abrir os valores de uma string com aspas duplas e tentar utilizar aspas duplas dentro dos valores dessa string, uma das suas aspas duplas irá fechar o valor da string e o restante irá sobrar como um erro no código. Confira abaixo:

Veja o erro na imagem abaixo:

Erro em javascript das aspas

Para corrigir este problema, você pode intercalar as aspas, por exemplo, se você abrir os valores de uma string com aspas simples, é permitido utilizar aspas duplas, se você abrir os valores de uma string com aspas duplas, é permitido utilizar aspas simples.

Barra invertida

Se você não quiser se limitar em utilizar as aspas, como descrevi anteriormente, você pode utilizar uma barra invertida () como caractere de escape para qualquer valor que possa gerar erro dentro da sua string.

Além disso, a barra invertida () serve como caractere de escape para várias outras coisas, por exemplo:

Código Saída
' Aspas simples
" Aspas duplas
\ Barra invertida
n Nova linha (LF)
r Carriage return (CR)
t tab
b backspace
f Quebra de página

Exemplo:

A saída será:

Perceba que não existe quebra de linha no código, no entanto, n indica que o Javascript deve iniciar uma nova linha na string.

Acessar o valor de um caractere em um string

Você também pode acessar apenas uma letra do valor de uma string, para isso basta digitar o número da posição entre colchetes ( [0] ) na frente do nome da string.

Se você digitar qualquer valor de 0 a 14, terá uma letra da posição correspondente, por exemplo:

Exibe um exclamação na tela do navegador do usuário.

Verificando quantos caracteres tem uma string

Muitas vezes, também é necessário saber o tamanho de uma string, porém, em Javascript isso é extremamente simples, basta utilizar .length.

Veja um exemplo:

Maiúsculo e minúsculo

Em Javascript, também é bastante simples converter os valores de uma string em maiúsculo ou minúsculo, veja abaixo:

Substituir o valor de uma string

Para substituir o valor de uma variável em Javascript, basta utilizar "replace".

Mais sobre strings

Caso queira brincar um pouco com as variáveis do tipo string em Javascript, basta acessar o link "Javascript Strings" da W3schools (em inglês), lá eles falam bastante sobre esse tipo de dados.

Tipo booleano

Variáveis com tipo booleano têm apenas duas possibilidades de valores, true (verdadeiro) ou false (falso). Estes valores não devem ser cercados por aspas, ou seja, "true" não é a mesma coisa que true.

Normalmente utilizamos esses tipo de valores com condicionais para controlar o fluxo da nossa aplicação Javascript, por exemplo:

No trecho acima, verificamos se o valor da variável valorBooleano é verdadeiro ou falso, se verdadeiro exibe um alerta com a mensagem "Variável verdadeira", caso contrário, a mensagem será "Variável falsa". Como criamos a variável com o valor true, é claro que seu valor é verdadeiro, porém, em várias partes do seu código você não saberá se o valor é verdadeiro ou falso, por isso valores booleanos são tão úteis, dependendo do valor, o código faz alguma ação necessária, caso contrário faz outra (ou várias outras).

Posteriormente iremos utilizar mais valores booleanos para controlar nossas funções, aí você vai entender melhor o porquê dos valores verdadeiros e falsos serem tão úteis.

Tipo numérico

Variáveis com tipos de dados numéricos só podem conter um tipo de valor, números (óbvio). Tais números podem, ou não, ter o ponto flutuante, por exemplo:

Todas os números acima são válidos em Javascript.

Apesar de números maiores serem suportados, algumas funções podem apenas trabalhar com números entre -2.147.483.648 até 2147483648, por isso você deve limitar o uso de números nesta faixa.

Também existem dois números especiais: o infinito positivo e negativo. Em JavaScript, ambos são representados por infinity e -infinity, respectivamente . Um número infinito positivo é gerado quando um calculo passa do número máximo permitido em um aplicativo JavaScript. Um infinito negativo é retornado quando um número menor do que o valor mínimo suportado em JavaScript é atingido.

Tipo null e undefined

Null e undefined representam variáveis que não têm um valor ou estão incompletas. Para criar uma variável nula, você deve especificar seu valor como "null", como no exemplo abaixo:

No entanto, em Javascript você pode declarar uma variável mas não a inicializar, exemplo:

Outro método que não está entre nulo (null) nem indefinida (undefined), é um método que alguns desenvolvedores costumam utilizar para inicializar variáveis:

Ao contrário do que muitos imaginam, a variável acima não tem valor, mas não está indefinida (undefined) e nem tem valor nulo (null).

Uma maneira boa para checar uma variável quando você não tem certeza se ela está definida e tem valor, é utilizando uma expressão condicional (if) com o nome da variável, exemplo:

Concluindo

Nessa aula você aprendeu como funcionam os tipos de dados e as variáveis em Javascript, espero que tenha sido completamente claro e esclarecido todas as suas dúvidas, porém, se ficou com dúvida em alguma parte, não hesite em perguntar nos comentários, estaremos aqui para ajudar.

Outras aulas

Caso tenha perdido a aula anterior, segue o link:

Já temos a aula posterior:

Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:



 

Comentários