DEV Community

Jean Dias
Jean Dias

Posted on

Variáveis em JavaScript

#javascript #webdev #programming

Vamos começar com um explicação simples do que é variáveis. Elas são locais onde você pode armazenar valores, por exemplo gostaria de salvar o nome de uma pessoa em seu site, você poderia criar uma variável com o nome de nomeDeUmaPessoa e atribuir o nome da pessoa para ela utilizando o sinal de igual ( = ), assim a variável iria conter o nome atribuído e em qualquer parte do site para poderia utilizar essa variável e o nome atribuído será exibido.

nomeDeUmaPessoa = “Jean Dias”

Para definir nomes de variáveis temos que seguir algumas regras para não dar erro:

  1. Não pode conter apenas números e nem começar com números: 123abc ou 1567
  2. Não pode conter espaços: nome De Uma Pessoa
  3. Não pode conter caracteres especiais ( * + & % )
  • No exemplo acima que montei utilizei um padrão de nomenclatura chamado Camel-case, é um excelente prática utilizar, nele cada palavra é separa começando com a letra maiúscula, sendo a primeira palavra sempre iniciada por minúscula.

NomeDeUmaPessoa, nomedeumapessoa, ou Nomedeumapessoa são formas incorretas para o padrão, mas irá funcionar normalmente, o padrão de nomenclatura não impacta na execução do programa, apenas deixa o código mais legível.

Agora voltando para o JavaScript, nele existem 3 formas de se declarar uma variável, cada uma com seu objetivo:

  • var //com ela você declara uma variável comum
  • let //com ela você declara uma variável de escopo
  • const //com ele você declara uma varável de escopo que não permite que o valor inicial seja alterado

Como usar:

var numero = 32;

let nome = “Jean Dias”;

const linguagemProgramacao = “JavaScript”;

  • Uma explicação simples do que seja escopo. Uma vez que é declarado uma variável com um determinado nome, este nome não poderá ser usado para declarar nenhuma outra variável, mas caso seja declarado uma variável de escopo, apenas dentro do escopo em si ela poderá ser utilizada, a fora do escopo ela poderá se recriada com o mesmo nome e outro valor sem problemas.

Por exemplo:

function funcaoTeste() {
    const x = 10;
}

const x = 5;
Enter fullscreen mode Exit fullscreen mode

No exemplo acima dentro do escopo da funcaoTeste quando utilizar a constante x ela terá o valor de 10, e fora do escopo da funcaoTeste a variável pode ser recriada com o mesmo nome x e terá outro valor.

As variáveis são importantes dentro de qualquer programa, elas te permitem armazenar valores que será necessário no decorrer da execução de um programa, além de permitir que o mesmo fique dinâmico.

Abaixo terá dois exemplos de programas JavaScript onde ambos será uma calculadora que apenas fará contas de soma entre dois números, no primeiro não iremos usar variáveis e no segundo iremos utilizar. Para o exemplo ficar mais completo irie criar um HTML para que você possa executar facilmente em sua maquina.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Uso de Variáveis</title>
</head>
<body>
    <h1>Página de exemplo para variáveis em JavaScript</h1>

    <script src="/src/main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Arquivo index.html

window.prompt("Digite um número:");
window.prompt("Digite outro número:");
document.writeln(10 + 10);
Enter fullscreen mode Exit fullscreen mode

Arquivo main.js dentro da pasta src

Caso você já fez outro tutorial meu sobre Web Server para HTML, seu código no Visual Studio Code estará dessa forma:

Não se preocupe com os demais arquivos caso você não tenha feito vou deixar o link nas referencias para o outro tutorial, mas a estrutura base para o código acima funcionar é essa destacada em vermelho.

Ao executar irá aparecer 2 popup perguntando números e no final você terá um resultado similar a esse:

Repare que em nosso código JavaScript não criamos variável alguma, isso vira um problema pois todo número que o usuário digitar não será utilizado em nada visto que os valores da soma estão fixos.

Agora vamos alterar o nosso main.js e utilizar variável para armazenar os valores que o usuário digitar.

let numero1 = window.prompt("Digite um número:");
let numero2 = window.prompt("Digite outro número:");
let resultado = parseInt(numero1) + parseInt(numero2);

document.writeln(resultado);
Enter fullscreen mode Exit fullscreen mode

Arquivo main.js dentro da pasta src

Agora temos algumas mudanças:

  1. Estamos salvando o valor digitado no popup dentro de variáveis
  2. Estamos somando os valores e adicionando na variável chamada resultado
  3. Note que para somar valores em JavaScript é preciso que os mesmo seja do tipo número por isso convertemos as variáveis de numero1 e numero2 para o tipo Inteiro com a função parseInt

Pronto assim ao executar nosso programa os valores que você digitar nos popups de fato serão somados e exibido em tela.

Mas comentei acima sobre tipos, esse detalhe precisamos explicar melhor.

Dentro de qualquer linguagem de programação, existem tipos de variáveis os mais comuns são:

  • String (Texto)
  • Integer (Número Inteiro)
  • Float (Número de Ponto Flutuante)
  • Boolean (Boleano → Verdadeiro ou Falso)

No JavaScript este tipos são:

  • string
  • number (Integer ou Float)
  • boolean

Os tipos permitem que você possa manipular os valores de forma precisa, no JavaScript não é necessário colocar de forma explicita qual o tipo de cada variável pois ele tem tipagem de variáveis de forma dinâmica (tipagem dinâmica), fazendo com que ao atribuir um valor o JavaScript identifique qual o tipo (String, Number ou Boolean), e atribui para a variável.

let nome = "Jean"; // string
let idade = 32; // number

document.writeln(nome + idade); // irá retornar -> Jean32
document.writeln(idade + idade); // irá retornar -> 64
Enter fullscreen mode Exit fullscreen mode

Nesse exemplo é possível notar que ao somar uma variável do tipo String com uma do tipo Number será feita a concatenação dos valores, e ao somar variáveis do tipo Number o resultado será uma soma numérica.

Agora um ponto no exemplo que criamos acima, os números digitados pelo usuário precisaram passar antes pela função parseInt, o motivo disto é que a função window.prompt que cria um popup na tela para o usuário digitar algo, sempre retorna uma string, com isso se o usuário digitar em ambos os popup, os números 15 e 7 respectivamente, sem utilizar a função parseInt, não iria ocorrer a soma, e sim uma concatenação, e na variável resultado não teria o valor de 22 e sim 157.

document.writeln(15 + 7); // irá retornar -> 22
document.writeln("15" + "7"); // irá retornar -> 157
Enter fullscreen mode Exit fullscreen mode

Espero que tenha ajudado os estudantes e aspirantes a JavaScript, com esse tutorial. Bons estudos!!!

Referências:

https://dev.to/jeanmfdias/aprendendo-html-css-javascript-utilizando-um-web-server-em-nodejs-30b1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

Top comments (0)