Fundamentos do JavaScript: o que é e como funcionam suas variáveis

Poucas linguagens de programação, quer elas sejam de script ou compiladas, conseguiram alcançar o sucesso e prestígio que o JavaScript conquistou ao longo dos últimos anos. Não importa se você é apenas um usuário ou profissional de TI, é quase certo que pelo menos uma vez já tenha ouvido falar em JavaScript. Mas afinal de contas, o que realmente é JavaScript? Como essa linguagem funciona e quais são seus princípios básicos?

Começaremos a responder essas e outras perguntas nessa série de matérias especiais "Fundamentos do JavaScript" que você passa a conferir a partir de hoje no Canaltech. Então, como se diz, vamos começar pelo começo?

O que é JavaScript?

De uma forma direta e simples, JavaScript é uma linguagem de programação como outra qualquer. Seu grande diferencial em relação às demais é que ela é executada do lado do cliente, mais especificamente pelo navegador que você está usando para ler esta matéria. Isso significa que programadores podem criar desde pequenos programas até efeitos especiais que aparecerão na sua tela sem a participação do servidor. E aí você deve se perguntar o porquê disso ser tão importante.

Imagine que você vai a um restaurante muito movimentado e lá só tem um cozinheiro para dar conta de todos os pedidos feitos pelos clientes famintos. Se o restaurante é movimentado e só há um cozinheiro, então é certo que seu pedido, e o de todos presentes ali, demorará a sair, certo? Você até pode ser tolerante, mas uma porção de pessoas se irritará em algum momento.

Agora pense que você vai a outro restaurante self-service, onde você chega e se serve, paga pelo prato que fez, come e vai embora. Independente de quantas pessoas há ali, você saciará sua fome muito mais rápido que no outro estabelecimento, concorda?

O mesmo ocorre com o JavaScript. Imagine que 100 mil pessoas fazem requisições ao servidor do Canaltech, por exemplo, e além dele fornecer as páginas para essas pessoas, também tem que lidar com as instruções JavaScript que manipulam elementos da página, aplicam efeitos aqui e acolá etc. Tudo seria mais simples e menos custoso caso essa segunda parte fosse feita por seu computador. E é justamente isso que o JavaScript faz.

Essas características e a simplicidade de se programar em JavaScript contribuíram para que a linguagem se popularizasse em todo o mundo.

Se é fácil, como o JavaScript funciona?

Assim como todas as linguagens de programação, o JavaScript se baseia no uso de variáveis. Então se você quer aprender a arte de desenvolver em JavaScript, o primeiro passo é dominar a forma como as variáveis funcionam aqui. Na maior parte do tempo tudo é bem simples e direto, mas aqui e acolá podem surgir pegadinhas que nos surpreendem.

Declarando variáveis

A primeira coisa a se apreender sobre variáveis JavaScript é que elas não são tipadas. A partir disso dá para se dizer duas coisas:

1. Não é preciso definir o tipo da variável quando você a declara;
2. Pode-se mudar o valor de uma variável para um tipo diferente a qualquer momento.

Portanto, ao invés de você declarar a variável e dizer de que tipo é ela, você simplesmente usa a palavra-chave "var":

Na primeira linha, a variável foi declarada sem nenhum valor e por isso ao tentarmos acessá-la o seu valor será "undefined", ou indefinido.

Também é possível declarar mais de uma variável usando a palavra-chave "var" apenas uma vez. Para isso, basta separá-las por vírgula como no exemplo abaixo:

Perceba que algumas variáveis tiveram seu valor atribuído já na declaração, enquanto outras não. Além disso, observe que dá para declará-las em apenas uma linha, ou distribui-las em linhas separadas para efeito de organização.

A bem da verdade, o uso da palavra-chave "var" nem é necessário, mas apenas uma recomendação para evitar qualquer resultado inesperado durante a execução do script.

E se eu quiser saber o tipo da variável?

Embora não haja necessidade de determinar um tipo para as variáveis em JavaScript, pode ser que em algum momento da execução do programa você queira verificar qual o tipo dela para tomar uma ou outra decisão.

Para executar essa tarefa, o mais recomendado é usar o operador "typeof" antes de um valor, quer ele esteja contido dentro de uma variável ou não. O retorno será sempre uma string dizendo qual o tipo da variável:

O operador "typeof" sempre retornará um dos seguintes valores quando for usado:

• "undefined": se o valor for indefinido
• "boolean": se o valor for booleano
• "string": se o valor for um texto
• "number": se o valor for numérico
• "function": se o valor for uma função
• "object": se o valor for um objeto (mas não uma função. Funções são objetos no JavaScript) ou nulo

Há quem prefira criar suas próprias funções para determinar o tipo de uma variável e usar nomes mais semânticos. Mas a verdade é que o "typeof" consegue dar conta de todo o recado.

E essas variáveis podem ser usadas em qualquer lugar?

A resposta é não. Ao contrário do que muita gente pensa, em JavaScript as variáveis estão amarradas ao escopo das funções. Portanto, se você declara uma variável dentro de uma função, ela estará disponível apenas dentro daquela função e das funções declaradas dentro dela.

Contudo, toda regra tem uma exceção e aqui não é diferente. Por exemplo, se você declarar uma variável sem usar a palavra-chave "var", ela terá escopo global. Portanto, se você esquecer de colocar a palavra-chave antes do nome da variável, ela ficará acessível em todo lugar. Se você fizer isso sem querer e de repente houver uma variável com o mesmo nome, seu valor será substituído pelo da variável global que, sem querer ou não, você declarou sem o "var".

Se você souber o que está fazendo, pode usar as nuâncias do escopo a seu favor. Caso seja marinheiro de primeira viagem ou novato no assunto, esquecer um "var" pode causar um estrago enorme e frustrar qualquer tentativa de desenvolver alguma coisa.

Ponteiros e mutabilidade

Em JavaScript, as variáveis não são nada mais que ponteiros. Portanto, é válido pensar que aqui as variáveis não "armazenam" um valor, mas sim "apontam" para um espaço da memória que o tem armazenado.

Outro ponto que precisa ser entendido é que no JavaScript os tipos primitivos são imutáveis e portanto seus valores não podem ser alterados. Por outro lado, os objetos são mutáveis e é possível mudar o valor deles diretamente. Exemplo:

No fim das contas, x vai ser 2 e y = 1 no exemplo. Já que os números são imutáveis, x acaba apontando para um lugar diferente da memória ao invés do do valor mudar o que está naquele espaço. Desse modo, já que 1 nunca mudou seu valor e nunca houve uma instrução para y apontar para outro lugar diferente, ele continua apontando para o local de memória original que contém o valor 1.

Já que objetos são mutáveis, nesse exemplo x continua apontando para o mesmo local de memória no fim. Esse local, no entanto, contém uma informação adicional, uma nova propriedade adicionada ao objeto. Portanto, já que y também está apontando para o mesmo local de memória x, ele também terá essa nova propriedade.

O exemplo acima demonstra que as variáveis são passadas por referências para as funções e não por valor. Isso significa que se uma variável mutável for passada para a função, seu valor poderá ser alterado dentro dela. Porém, se ela for imutável, as alterações feitas dentro da função não surtirão efeito - é o que aconteceu no exemplo acima com y e num.

Perceba neste outro exemplo como isso funciona de um outro jeito:

Perceba que não importa se uma variável é passada por argumento ou não, ela será manipulada da mesma forma caso seja atribuída dentro de uma função.

Os exemplos e explicações de hoje podem parecer muito simples para quem já conhece pelo menos um pouco de JavaScript, mas são a porta de entrada para aqueles que desejam começar a aprender programação ou JavaScript. Se você ficou um pouco confuso depois que começamos a explicar as coisas usando funções, não se preocupe. Na próxima matéria especial explicaremos o que elas são, para que servem e suas peculiaridades.