Variáveis e tipos de dados em JavaScript. Parte 3 do curso de JavaScript do Iniciante ao Avançado em 10 postagens de blog.

Esta é a parte 3 da série de postagens do blog sobre JavaScript que o ajudará a explorar o tema de variáveis e tipos de dados em JavaScript. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a programar em JavaScript. Sem mais delongas, vamos começar com o terceiro tutorial.

Variáveis e tipos de dados em JavaScript – índice:

1. Variáveis
2. Tipos de dados básicos em JavaScript

Nesta postagem do blog, continuaremos de onde paramos na segunda postagem do blog. Neste estágio, você deve ter seu navegador Google Chrome aberto e, mais especificamente, ter seu console JavaScript aberto. Se por algum motivo você os fechou, seria um bom momento para abri-los novamente.

Se você estiver em um Mac, o atalho de teclado para abrir o console é pressionar “Option + Command + J”, depois de abrir o Chrome. Se você estiver usando um dispositivo Windows, pode usar o atalho de teclado “Control + Shift + J” para abrir o Console JavaScript, assim que abrir o Chrome. Ou você também pode ir ao menu no topo e acessar Visualizar -> Desenvolvedor -> Console JavaScript.

Variáveis

Variáveis em JavaScript ou em qualquer outra linguagem de programação são extremamente comuns. E isso por uma boa razão. As variáveis têm um papel muito crítico na programação. Em resumo, as variáveis permitem que você armazene alguns dados para mover os dados, modificá-los, atualizá-los ou excluí-los em seu programa. É um conceito tão importante que existem 3 maneiras de criar variáveis. A linguagem de programação para criar variáveis é chamada de “declaração de variáveis”, que basicamente significa que estamos declarando uma variável na memória do computador.

Para criar as variáveis, usaremos uma das 3 palavras-chave, que são: “var”, “let” e “const”. Uma das primeiras coisas que você deve saber sobre essas 3 palavras-chave é que até 2015, apenas a palavra-chave “var” era usada e as palavras-chave “let” e “const” foram introduzidas com um padrão JavaScript chamado ES6 ou ES2015.

Se você não tem ideia do que é ES6 ou ES2015, aqui está o que você deve saber sobre isso. Quando o JavaScript foi lançado pela primeira vez, diferentes empresas implementaram diferentes versões do JavaScript, e precisava haver um padrão para que seu código fosse executado de forma previsível e confiável em todos os principais navegadores. Assim, uma organização chamada ECMA (European Computer Manufacturing Association) criou um conjunto de padrões JavaScript que os navegadores deveriam implementar. Assim, desde que você siga esses padrões ao escrever JavaScript, seu código deve ser executado de forma previsível de acordo com esses padrões. Esse padrão é chamado de EcmaScript e eles têm lançado os padrões atualizados desde 1997. E desde 2015, eles têm lançado esses padrões anualmente, e, portanto, o padrão mais recente lançado é chamado de ES2021 no momento em que escrevo esta postagem no blog.

Mas nem todos os lançamentos são iguais, algumas diferenças de versão não são tão grandes, enquanto algumas introduzem mudanças bastante significativas na linguagem. As últimas mudanças importantes ocorreram com o ES2015, também chamado de ES6, pois foi o lançamento da versão seis da padronização do ECMAScript. Uma das mudanças significativas ocorreu nas declarações de variáveis.

Antes do ES6, apenas a palavra-chave “var” era usada e era a única maneira de declarar variáveis, daí o nome “var”. A palavra-chave var veio com flexibilidade que poderia causar problemas indesejados. Como era significativamente flexível em uso, era mais fácil cometer erros com variáveis se você fosse menos cuidadoso do que deveria. Por exemplo, se você declarou uma variável chamada “user1”, não pode re-declarar uma variável chamada user1 com as novas palavras-chave “let” e “const”, mas poderia fazer isso com a palavra-chave “var”. E se você esquecer que já tem um user1 em seu programa, na segunda vez que declarar o user1 com as informações de outro usuário, você estaria sobrescrevendo as informações do primeiro usuário, o que efetivamente excluiria as informações do primeiro usuário.

// isso pode causar confusão
var user1 = "John";
var user1 = "Jack";
// se você tentar fazer a mesma coisa 
// com let ou const você receberá um erro
let user1 = "John";
let user1 = "Jack";
// da mesma forma, você também receberá um erro
// se tentar fazer a mesma coisa com a palavra-chave const
const user1 = "John";
const user1 = "Jack";

Mas não é como se você não fosse ver a palavra-chave “var” sendo usada em algum lugar, você certamente a verá, especialmente em alguns cursos de JavaScript de nível iniciante. Especialmente se forem de alguns anos atrás, há muitos tutoriais que ainda mostrarão a antiga maneira de escrever JavaScript. Mas a realidade é que não é mais a melhor prática usar isso. Em vez disso, a melhor prática é usar as palavras-chave “let” ou “const” ao declarar variáveis, dependendo de suas necessidades. Mas de que necessidades estamos falando? Em resumo, se você planeja mudar o valor dentro de uma variável, você vai querer usar a palavra-chave “let”, se você sabe que não vai mudar o valor em uma variável, você vai querer usar “const” em vez disso. Vamos ver alguns exemplos de declarações de variáveis usando tanto let quanto const.

// podemos usar "let" quando queremos rastrear o nível do jogo do usuário
// porque sabemos que isso vai mudar
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// podemos usar a palavra-chave "const" ao declarar o ID do usuário
// porque sabemos que não vamos mudá-lo
const userId = 1010101999;

Se você também notou no código acima, com as melhores práticas mais recentes, escrevemos as palavras-chave de declaração apenas uma vez, e fazemos isso quando estamos declarando a variável pela primeira vez. Quando queremos mudar o valor dentro da variável mais tarde, não usamos nenhuma palavra-chave antes do nome da variável.

Quando queremos acessar os dados que essas variáveis ou constantes contêm, podemos simplesmente usar seus nomes. Por exemplo, se quisermos mostrar ao usuário seu nível de jogo e seu ID de usuário, fazemos isso com o seguinte código:

// podemos adicionar o userID ao final da frase com um sinal de mais
// explicaremos isso mais adiante no tutorial
alert("Seu ID de usuário é: " + userId);
// também podemos mostrar ao usuário seu nível de jogo como a seguir
alert("Seu nível de jogo atual é: " + gameLevel);
// alternativamente, podemos exibir diretamente 
// o conteúdo das variáveis mostrando-os dentro de um alerta
alert(userId);
alert(gameLevel);

Executar os dois últimos blocos de código forneceria as seguintes saídas:

Como nomear suas variáveis?

Ao nomear suas variáveis, existem certas regras e convenções que você deve considerar. A primeira consideração é quais caracteres você pode usar para nomear suas variáveis? Elas podem começar ou terminar com um número? Existe uma verdade comum não falada sobre nomear suas variáveis? Vamos responder a tudo isso e mais.

Diferentes linguagens de programação têm diferentes convenções para nomear variáveis. Em JavaScript, a convenção é nomeá-las com o que é chamado de “camel casing”, e funciona assim. Se o nome da variável tiver apenas uma palavra, você apenas escreve essa palavra em letras minúsculas. Se houver várias palavras no nome da variável, você escreve a primeira palavra em letras minúsculas e capitaliza todas as palavras subsequentes, escrevendo-as sem espaços ou outros sinais. Por exemplo, se estivermos fazendo um jogo, poderíamos nomear as variáveis assim:

// uma variável de uma única palavra
let strength = 50;
// um nome descritivo que inclui várias palavras
let numberOfArrowsLeft = 145;

Além de usar caracteres alfabéticos, também podemos usar números, o sinal de dólar e o sinal de sublinhado nos nomes das variáveis. É importante notar que você não pode começar o nome da variável com um número, mas pode terminá-lo com um número.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Note que só porque é possível, não queremos nomear nossas variáveis com nomes pouco claros ou com símbolos. E esse é outro tópico por si só. Ao nomear variáveis, a convenção é ter nomes claros e descritivos. Por exemplo, se formos nomear uma variável para denotar quantas flechas restam na bolsa de um arqueiro, devemos usar um nome descritivo, como o que usamos no exemplo acima. Se usássemos apenas:

let x = 145;

Esse nome não nos diria nada sobre qual valor ele contém. E mesmo alguns dias após escrever esse código, teríamos que ler o código ao redor para entender o que essa variável poderia significar. É por isso que, tanto para sua própria clareza ao escrever o código, quanto para seu eu futuro que pode revisar o código, é realmente importante que você se acostume a nomear suas variáveis de maneira clara e descritiva. Isso também se tornará ainda mais importante quando você começar a trabalhar com outras pessoas e mostrar seu código a elas.

Neste ponto, você pode estar pensando que: É ótimo que possamos mover os dados e até mesmo mudá-los usando variáveis. Mas que dados estamos falando aqui? Por que colocamos partes entre aspas e algumas partes não estão entre aspas? Para responder a tudo isso e mais, vamos ver os tipos de dados básicos em JavaScript.

Tipos de dados básicos em JavaScript

Diferentes tipos de dados são bons para fazer coisas diferentes. Neste tutorial sobre tipos de dados básicos em JavaScript, veremos os 3 tipos de dados mais básicos que são comumente usados em JavaScript. Mais adiante na série, aprenderemos sobre outros tipos de dados em JavaScript. Uma vez que você aprenda esses 3 primeiros tipos de dados básicos, será muito mais fácil aprender os outros tipos de dados. Os 3 tipos de dados que veremos neste tutorial são: Strings, Números e Booleanos. Sem mais delongas, vamos começar com o primeiro.

Strings

Se você tem acompanhado o tutorial desde o início, já trabalhou com o tipo de dado string! Quando escrevemos um alerta que dizia “Olá, Mundo!”, isso estava usando o tipo de dado string para armazenar o texto que escrevemos. Em JavaScript, existem 3 maneiras de representar strings. A primeira é cercar seu texto com aspas duplas. A segunda é cercar seu texto com aspas simples. E a terceira é cercar seu texto com crases. Todas as três se parecem com isso:

const string1 = "Algum texto aqui.";
const string2 = 'Algum texto aqui.';
const string3 = `Algum texto aqui.`;

Como você pode ver, a que usa “crases” parece bastante semelhante à aspas simples, mas é um pouco mais flexível. O uso de crases para criar strings é um recurso que foi introduzido com o ES6, para facilitar o trabalho com dados textuais. Ele oferece várias vantagens em relação às outras duas. Por convenção, você pode ver as aspas duplas ou as crases sendo usadas com mais frequência. Você pode encontrar as crases na tecla à esquerda do número 1, no seu teclado.

O uso de aspas duplas parece mais familiar e é mais fácil de entender à primeira vista, mas as crases oferecem mais vantagens no geral. Neste exemplo, todas as 3 funcionam da mesma maneira, pois é um exemplo simples. Para exibir todas as três ao mesmo tempo, ou até mesmo na mesma linha, uma coisa que podemos fazer é escrever seus nomes e usar o sinal de mais entre eles, de forma a adicionar as strings umas às outras.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Como você pode ver, todas as 3 são exibidas logo após uma delas terminar. Isso acontece porque apenas dissemos ao interpretador para adicionar as strings umas às outras. Se quisermos adicionar espaços entre elas, sempre podemos adicionar esse espaço com outra string.<p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

Também podemos verificar o tipo de dado de uma variável escrevendo “typeof” na frente dela. Por exemplo:

alert(typeof string1);

Números

Quando estamos trabalhando com números em JavaScript, geralmente estamos usando o tipo de dado “Number”. É o mais simples para começar e vem com quase nenhuma curva de aprendizado.

Quando digitamos um número, ele é representado no tipo número. E se atribuirmos esse número a uma variável ou constante, elas também terão o tipo de dado número.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Além dos números regulares, o JavaScript também fornece outros recursos que podem nos ajudar a escrever código mais seguro e previsível. Por exemplo, em JavaScript, podemos ter algo chamado “Infinity”, e é exatamente o que parece. Além disso, pode ser infinito positivo e infinito negativo. Vamos ver como isso se parece com um exemplo.

// podemos dividir por zero e isso não gera um erro
// em vez disso, retorna Inifinity
alert(13 / 0);

// da mesma forma, também podemos obter infinito negativo
alert(-25 / 0);

Como você já viu em alguns exemplos, também podemos fazer operações aritméticas com números. Desde a adição básica, subtração, multiplicação, divisão até operações aritméticas mais específicas da programação. Aprenderemos mais sobre elas no próximo tutorial.

Booleanos

Booleanos são extremamente comuns na programação. Na maioria das vezes, não usaremos explicitamente seus nomes, mas usaremos sua propriedade simples nos bastidores. Um booleano pode ter dois valores: “true” e “false” e eles são exatamente o que parecem. Muitas vezes você se verá escrevendo código para fazer uma comparação e uma conclusão com base no resultado dessa comparação.

Muitas vezes, essas comparações têm raízes em cenários da vida real e seguem uma lógica simples. A luz está acesa ou apagada? Está chovendo lá fora? Você está com fome? Este número é maior que o outro número? Este parágrafo é mais longo que o próximo? O usuário está em uma tela grande?

Há muitas vezes em que você não quer apenas ter um valor numérico ou um valor de string para as coisas, mas realmente quer uma resposta sim ou não. Em resumo, nesses momentos, usaremos o tipo de dado booleano.

// o primeiro número é maior que o segundo
alert(13 > 12);

// verifique o tipo da variável
let isRainyOutside = true;
alert(typeof isRainyOutside);

Executar este código nos daria a seguinte saída:

Agora você sabe sobre variáveis e tipos de dados em JavaScript. Na próxima postagem do blog usaremos esses tipos de dados para começar a tomar decisões em nosso código e muito mais!

Se você gosta do nosso conteúdo, não se esqueça de se juntar à comunidade do Facebook!