Variáveis Javascript

O que são variáveis JavaScript, para que servem e como criar?


Você que já entendeu como funciona o JS, chegou a hora de se aprofundar um pouco mais na sintaxe desta linguagem. Hoje falaremos especificamente sobre as variáveis JavaScript.

Por que utilizar variáveis?

As variáveis são parte essencial do código desenvolvido em Javascript. Elas armazenam valores que são manipulados por nossos programas, permitindo que os algoritmos sejam implementados para dar a resposta esperada para o usuário. 

O que são variáveis JavaScript?

Variáveis são espaços de memória do computador destinados a dados que são manipulados e alterados durante a execução de um algoritmo. 

Logo, para que o resultado seja o esperado, é preciso considerar o tipo de dado que será armazenado e também definir o nome das variáveis. 

Os valores armazenados nas variáveis são definidos em tempo de execução. Elas são associadas aos nomes; estes, definidos em tempo de desenvolvimento. 

Quais os tipos de variáveis JavaScript?

Javascript dispõe de diversos tipos de variáveis, cada um adequado para armazenar um tipo de dado. Nesse ponto, é importante ressaltar a importância de escolher com atenção os dados guardados em uma variável. 

Imagine que você precise armazenar em uma variável o valor “c”, um caractere. Se no fluxo do seu código você executar uma expressão matemática que envolva essa variável, ocorrerá um erro. Isto é especialmente problemático, pois este erro ocorrerá em tempo de execução. 

Como Javascript é uma linguagem fracamente tipada, ( isto é, não força o programador a declarar qual o tipo de dado que a variável receberá em tempo de desenvolvimento ) erros como este somente aparecem em tempo de execução, pois o programador não será alertado quando efetuar operações com tipos de dados não compatíveis. 

Veja quais os tipos de dados que podemos utilizar em Javascript:

  • Números

Diferente de muitas linguagens de programação, o Javascript não diferencia números inteiros, em ponto flutuante, double precision, etc. Todos os números são tratados como ponto flutuante de 64 bits. 

Para declarar um inteiro, por exemplo, usamos:

var inteiro = 5;

Declarando um número com casas decimais é feito:

var pi = 3.14;

Caso seja feita uma operação entre dois números inteiros que resulte em um número com casas decimais, o resultado será automaticamente interpretado corretamente:

var dividendo = 5;

var divisor = 2;

var resultado = 0;

resultado = dividendo / divisor;
// O valor  da variável resultado será 2.5.

  • Strings

Strings são  conjuntos de texto. São declaradas usando aspas simples ou aspas duplas:

var exemplo = ‘Essa é uma string em Javascript’;

var exemplo2 = “Outra string em Javascript”;

  • Booleans (booleanos)

Frequentemente, durante o desenvolvimento de código Javascript, haverá valores que, por definição, podem assumir apenas dois valores: verdadeiro ou falso. 

Booleanos em Javascript descrevem exatamente esse comportamento. Uma variável do tipo boolean pode assumir apenas o valor true (verdadeiro) ou false (falso).  

Variáveis deste tipo são usadas para executar operações lógicas, por exemplo, dentro de blocos if. Veja alguns exemplos: 

var  resultado1 = 5>4;
// O valor da variável  resultado1 será true (verdadeiro), por que 5 é maior que 4.


var  resultado2 = 4>5;
// O valor da variável resultado2 será false (falso), por que 4 não é maior que cinco.

  • Arrays

Arrays são objetos de alto nível que descrevem listas de valores. Os arrays são capazes de armazenar diversos valores indexados por números inteiros.
Por exemplo, o array abaixo armazena uma lista de carros:

var carros = [“Gol”, “Uno”, “Agile”];

A indexação de arrays em Javascript começa com 0. É importante observar que, apesar de o tamanho do nosso array  carros ser 3, o primeiro valor terá índice 0 e o último, índice 2. 

Para acessar elementos de um array, é usada a sintaxe abaixo:

var gol = carros[0];
// O valor de gol será “Gol”, o primeiro valor do array. 

Para mudar o valor de uma determinada posição de um array, usamos:

carros[2] = “Spin”;
// O array agora será:  [“Gol”, “Uno”, “Spin”];

Arrays também podem ser declarados usando a palavra-chave ‘new’:

var carros = new Array(“Gol”, “Uno”, “Agile”); 

Um array pode receber entre seus elementos qualquer tipo de dado Javascript: strings, números e até mesmo objetos. 

O poder dos arrays em Javascript está nos métodos e propriedades disponíveis para usarmos. 

Vejamos alguns exemplos de métodos e propriedades bastante úteis quando estamos desenvolvendo programas em Javascript. 

Para saber o tamanho, isto é, a quantidade de elementos de um array, pode ser usada a propriedade ‘length’: 

var tamanho = carros.length;
// a variável tamanho vai guardar o valor  3

Caso precise ordenar os elementos de um array, pode ser usado o método ‘sort’: 

carros.sort();
// O resultado será [“Agile”, “Gol”, “Uno”]

[2, 1, 8, 5].sort()
// O resultado será [1, 2, 5, 8]

O método push é usado para incluir um elemento em um array. Ele sempre inclui o elemento no final do array:

carros.push(“Fusca”);
// o  array carros agora tem os seguintes valores  [“Gol”, “Uno”, “Agile”, “Fusca”]

Já o método pop apaga o último elemento do array:

var fusca = carros.pop();
// O array carros agora virou [“Gol”, “Uno”, “Agile”]

// E a variável fusca guarda a string (texto) “Fusca”

Note que o método push recebe como argumento o elemento que deve ser inserido no array. 

O método pop, por outro lado, não recebe nenhum argumento, mas retorna o elemento excluído do array. 

  • Objetos

Nós já vimos que o Javascript permite criar variáveis para armazenar diversos tipos de dados. 

Objetos são tipos de dados especiais que podem armazenar vários valores ao mesmo tempo. Um objeto é uma abstração de um tipo complexo de dados. 

Se quisermos manipular um tipo de dado que descreva um cliente, em Javascript, podemos usar um objeto para modelar esse cliente:

var cliente = {nome:”João”, sobrenome:”Silva”, idade:50};

Para acessar as propriedades de objetos, usamos o operador de ponto:

var nomeCliente = cliente.nome; // nomeCliente será “João”

ou

var nomeCliente = cliente[“nome”];

  • Functions

Um recurso bastante interessante dos objetos em Javascript é a possibilidade de definir funções personalizadas. Ainda usando o exemplo do objeto cliente, podemos definir uma função que retorne o nome completo do cliente: 

var cliente = {

nome:”João”, 

sobrenome:”Silva”, 

idade:50,

nomeCompleto: function() {

return this.nome + “ “ + this.sobrenome;

}

};

A propriedade “nomeCompleto”, quando for chamada por meio do operador de ponto, fará a chamada da função que retornará a propriedade “nome”, concatenada com um espaço e a propriedade “sobrenome”:

var nomeFuncao = cliente.nomeCompleto();
// a função retornará João Silva.

Observe que, por ser uma função, ao acessar a propriedade “nomeCompleto”, é preciso abrir e fechar parênteses, explicitando que o que se quer é que a função seja executada. 

Como saber o tipo da variável JavaScript?

Use o operador typeof para receber o tipo de um objeto ou variável em Javascript. 

var string = “String”;

typeof s
// retorna “string”

var num = 5;

typeof num
// retorna number

O operador typeof pode retornar os seguintes tipos:

  • string
  • number
  • undefined
  • boolean
  • object
  • function

Como vimos, os arrays são tipos especiais de objetos. Por isso, ao usar o operador typeof em um array, será retornado o tipo object. Para contornar esse problema, podemos usar o método isArray do objeto global Array do Javascript:

var numeros = [1,2,3];

Array.isArray(numeros);
// retorna true


Array.isArray(numeros[0]);
// retorna false (o elemento 1 do array é um número e não um array).

Como criar variáveis em JavaScript?

  • Declarando uma variável

Variáveis são declaradas escrevendo o nome da variável precedida da palavra-chave var:

var umaVariavel;

A variável acima não foi inicializada, isto é, o valor dela é undefined e, se usar o operador typeof, o valor retornado também será “undefined”.

Isto porque, é preciso que um valor seja atribuído à variável para que o Javascript possa inferir, a partir desse valor, o tipo da variável. 

  • Inicializando uma variável

Para inicializar uma variável, basta atribuir um valor a ela. Isto pode ser feito por meio do operador ‘=’. Veja:

var umaVariavel = 5;
// O valor da variável umaVariavel é 5

umaVariavel = “Cadeia de caracteres”; 

// Agora, o valor de umaVariavel é uma string: “Cadeia de caracteres”.

  • Nomenclatura de variáveis em Javascript

Os nomes das variáveis devem descrever o que será armazenado nelas. Isto facilita muito a leitura do código. 

Seja conciso e claro ao nomear às variáveis. Evite nomes genéricos como ‘x’, ‘a’, ‘variável’, etc. Evite, também, nomes muito longos. 

Uma variável que vai armazenar o preço de um produto em um site de compras, por exemplo, pode se chamar precoProduto.

A convenção mais aceita para dar nomes a variáveis na linguagem Javascript é: 

  • lowerCamelCase para nomes de variáveis com escopo local e funções. lowerCamelCase começa com letra minúscula e para cada nova palavra, letra maiúscula: carrosImportados, nomeProduto, numReferenciaCargo 
  • Caixa alta para variáveis de escopo global e variáveis constantes 
  • Separar palavras por traço para nomes de arquivos: nome-do-arquivo.jsp
  • Palavras reservadas pelo Javascript

Palavras reservadas são aquelas que já fazem parte da sintaxe do Javascript. Como são reservadas, não podem ser usadas para nomear variáveis em programas escritos em Javascript, por exemplo: double, else, case, cath, if, long, new, short, let, etc. 

Não se preocupe em decorar todas as palavras reservadas da linguagem! Caso você use uma por acidente como nome de uma variável em seu programa, sua IDE irá apontar um erro que você poderá corrigir em tempo de desenvolvimento.

  • Variáveis são Case Sensitive

Javascript é uma linguagem case sensitive. Isto quer dizer que uma variável chamada nomeCliente é diferente de uma chamada NOMECLIENTE que, por sua vez, é diferente de outra chamada nomecliente. 

O Javascript diferencia nomes com letras em caixa baixa e alta. 

  • Aspas dentro de aspas

Uma string em Javascript pode conter aspas simples ou duplas desde que elas não conflitem com as aspas usadas para iniciar e encerrar a string:

var exemplo1 = ‘Posso usar “aspas” duplas’;

var exemplo2 = “Aqui, uso ‘aspas’ simples”;

var exemplo3 = “Isso é um “erro” de sintaxe”;

  • Barra invertida

A função da barra invertida (\) dentro de uma string é avisar o Javascript que ele deve considerar o caracter que vem depois da barra invertida. Ele deve ser interpretado como caracter e não como inicio ou fim da String. 

Suponha que se queira colocar uma palavra entre aspas no meio de uma string. Isto é possível usando a barra invertida:

var entreAspas = “Tem uma palavra entre \”aspas\””; // O resultado será: Tem uma palavra entre “aspas”. 

Para colocar uma barra invertida dentro de uma string, devemos escrever duas barras invertidas:

var barraInvertida = “Contem uma barra invertida: \\”; // O resultado será Contem uma barra invertida: \

  • Acessar o valor de um caractere em um string

Strings podem ser consideradas arrays de caracteres. Por isso, para acessar um caracter em uma string, podemos usar a sintaxe:

var umaString = “Uma string”;

umaString[2] retornará ‘a’.

  • Verificando quantos caracteres tem uma string

Para saber a quantidade de caracteres que tem uma string, use a propriedade length. A sintaxe é a mesma da dos arrays. 

  • Maiúsculo e minúsculo

Os métodos toUpperCase e toLowerCase são usados para transformar strings, colocando todos os caracteres como maiúsculos e minúsculos, respectivamente: 

var umaString = “Isso é um exemplo”;

umaString.toUpperCase()
// retorna “ISSO É UM EXEMPLO”

umaString.toLowerCase()
// retorna “isso é um exemplo”

  • Substituir o valor de uma string

O método replace é um poderoso método para realizar substituições em strings. Ele recebe dois parâmetros. O primeiro é a substring, que deve ser substituída, e o segundo é o valor que será substituído na string original. 

Este método, além de poder receber duas strings, pode receber também expressões regulares que são ferramentas muito eficientes para a manipulação de strings:

var umaString = “Essa frase terá uma parte substituída”;

umaString.replace(“parte”, “fração”);
// retorna “Essa frase terá uma fração substituída”

Como aprender mais sobre variáveis JavaScript?

Para aprender mais, procure o material de referência e a literatura oficial da linguagem Javascript. 

Assim, você descobre não apenas mais detalhes sobre variáveis, mas os métodos e propriedades das variáveis que podem ser bastante úteis no desenvolvimento de seus sistemas.

Fique ligado também aqui no blog para aprender mais sobre Java e outras linguagens de programação.

Conclusão

As variáveis são espaços para armazenar valores em memória. Elas ajudam a criar códigos mais limpos, que facilitam a manutenção a longo prazo. Por isto, elas são mais do que recomendadas, são consideradas recursos essenciais para organizar informações durante a criação de um software, independentemente da linguagem escolhida.

0

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *