Variáveis ​​e tipos de dados em JavaScript. Parte 3 Curso de JavaScript do iniciante ao avançado em 10 posts

Esta é a parte 3 da série de postagens do blog JavaScript que o ajudará a explorar o tópico 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 codificar 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. Nesta fase, você deve ter seu navegador Google Chrome aberto e, mais especificamente, ter seu console JavaScript aberto. Se você por algum motivo 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, poderá usar o atalho de teclado de “Control + Shift + J”, para abrir o Console JavaScript, assim que abrir o Chrome. Ou você também pode ir ao menu na parte superior e ir para View -> Developer -> JavaScript Console.

Variáveis

Variáveis ​​em JavaScript ou qualquer outra linguagem de programação são extremamente comuns. E é por um bom motivo. As variáveis ​​têm um papel muito crítico na programação. Em poucas palavras, 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”, o 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 e são elas: “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, diferentes empresas implementaram diferentes versões de JavaScript, e tinha que 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ê esteja seguindo 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 EcmaScript e eles estão lançando os padrões atualizados desde 1997. E desde 2015, eles estão lançando esses padrões anualmente e, portanto, o padrão mais recente lançado é chamado ES2021 ao escrever 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 grandes mudanças na linguagem. As últimas grandes mudanças aconteceram com o ES2015 também chamado de ES6, pois foi o lançamento da versão seis da padronização ECMAScript. Uma das mudanças significativas veio para as 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 flexibilidades que podem causar problemas indesejados. Por ser 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”, você não pode declarar novamente uma variável chamada user1 com as novas palavras-chave “let” e “const”, mas você pode fazer isso com a palavra-chave “var”. E se você esquecer que já tem um user1 em seu programa, na segunda vez que você declarar o user1 com outras informações de usuários, você estará substituindo as informações do primeiro usuário real, o que efetivamente excluiria as informações do primeiro usuário.

// this can cause confusion
var user1 = "John";
var user1 = "Jack";
// if you try to do the same thing 
// with let or const you will get an error
let user1 = "John";
let user1 = "Jack";
// likewise you will also get an error
// if you try to do the same thing with the const keyword
const user1 = "John";
const user1 = "Jack";

Mas não é como se você não veja a palavra-chave “var” sendo usada em qualquer lugar, você certamente a verá especialmente em alguns cursos de JavaScript de nível iniciante. Especialmente se eles tiverem alguns anos, há muitos tutoriais que ainda mostrarão a maneira antiga de escrever JavaScript. Mas a realidade é que, não é mais a melhor prática usar isso. Em vez disso, a melhor prática é usar palavras-chave “let” ou “const” ao declarar variáveis, dependendo de suas necessidades. Mas de que necessidades estamos falando? Em poucas palavras, se você está planejando 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 de. Vamos ver alguns exemplos de declarações de variáveis ​​usando let e const.

// we can use "let" when we want to track the game level of the user
// because we know that it will change
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we can use the "const" keyword when declaring user ID
// because we know that we won't change it
const userId = 1010101999;

Se você também notou no código acima, com as práticas recomendadas mais recentes, escrevemos as palavras-chave declarativas apenas uma vez, e fazemos isso quando declaramos a variável pela primeira vez. Quando queremos alterar 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 seu nome. 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:

// we can add the userID to the end of the sentence with a plus sign
// we will explain this later on in the tutorial
alert("Your user ID is: " + userId);
// we can also show the user their game level like the following
alert("Your current game level is: " + gameLevel);
// alternatively we can directly display 
// the contents of the variables by showing them inside an alert
alert(userId);
alert(gameLevel);

A execução dos 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 é que caracteres podem usar para nomear suas variáveis? Eles podem começar ou terminar com um número? Existe uma verdade tácita comum para nomear suas variáveis? Vamos responder a tudo isso e muito mais.

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

// a single word variable
let strength = 50;
// a descriptive name that includes multiple words
let numberOfArrowsLeft = 145;

Além de usar caracteres alfabéticos, também podemos usar números, o cifrão e o sinal de sublinhado nos nomes das variáveis. É importante observar que você não pode iniciar 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";

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

let x = 145;

Esse nome não nos diria nada sobre o valor que ele possui. E mesmo alguns dias depois de escrever esse código, teríamos que ler o código ao redor para entender o que essa variável pode significar. É por isso que, tanto para sua própria clareza ao escrever o código, quanto para seu futuro eu, que poderá revisar o código, é muito 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 a elas seu código.

Neste ponto, você pode estar pensando que: É ótimo podermos mover os dados e até mesmo alterá-los usando variáveis. Mas de que dados estamos falando aqui? Por que colocamos peças em cotações e algumas peças não estão cotadas? Para responder a tudo isso e muito 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 em fazer coisas diferentes. Neste tutorial de 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. Depois de aprender 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, Numbers e Booleans. Sem mais delongas, vamos começar com o primeiro.

Cordas

Se você acompanha o tutorial desde o início, já trabalhou com o tipo de dados string! Quando escrevemos um alerta que dizia “Hello, World!” que estava usando o tipo de dados string para armazenar o texto que escrevemos. Em JavaScript existem 3 maneiras de representar strings. A primeira é colocar o texto entre aspas duplas. A segunda é colocar seu texto entre aspas simples. E o terceiro é cercar seu texto com back ticks. Todos os três se parecem com isso:

const string1 = "Some text here.";
const string2 = 'Some text here.';
const string3 = `Some text here.`;

Como você pode ver, aquele com os “back ticks” parece bastante com aspas simples, mas é um pouco descontraído. O uso de back ticks para criar strings é um recurso introduzido no ES6, para facilitar o trabalho com dados textuais. Ele oferece várias vantagens sobre os outros dois anteriores. Por convenção, você pode ver as aspas duplas ou os tiques inversos sendo usados ​​com mais frequência. Você pode encontrar os tiques de volta na tecla esquerda do número 1, em seu teclado.

O uso de aspas duplas parece mais familiar e é mais fácil de entender à primeira vista, mas os tiques inversos trazem mais vantagens em geral. Neste exemplo, todos os 3 funcionam da mesma maneira, pois é um exemplo simples. Para exibir os 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 certa forma somando as strings umas às outras.

alert(string1 + string2 + string3);

Como você pode ver, todos os 3 são exibidos logo após o término de um deles. Isso ocorre porque apenas disse ao interpretador para adicionar as strings umas às outras. Se quisermos adicionar espaços entre eles, sempre podemos adicionar esse espaço com outra string.

alert(string1 + " " + string2 + " " + string3);

Também podemos verificar os dados 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 dados “Number”. É o mais simples para começar e vem com quase nenhuma curva de aprendizado.

Ao digitar um número, ele é representado no tipo de número. E se atribuirmos esse número a uma variável ou constante, eles 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 que temos, o JavaScript também fornece outros recursos que podem nos ajudar a escrever um código mais seguro e previsível. Por exemplo, em JavaScript podemos ter algo chamado “Infinito”, e é exatamente o que parece. Além disso, pode ser infinito positivo e infinito negativo. Vamos ver como é com um exemplo.

// we can divide by zero and that does not throw an error
// instead it returns Inifinity
alert(13 / 0);

// similarly we can also get negative infinity
alert(-25 / 0);

Como você já viu com 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é ainda mais operações aritméticas específicas de programação. Vamos aprender mais sobre eles no próximo tutorial.

Booleanos

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

Na maioria das vezes, essas comparações são baseadas em cenários da vida real e seguem uma lógica simples. A luz está acesa ou apagada? Há chuva lá fora? 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 valor de string para as coisas, mas na verdade quer uma resposta sim ou não. Em poucas palavras, nesses momentos, usaremos o tipo de dados booleano.

// is the first number bigger than the second one
alert(13 > 12);

// check the variable type
let isRainyOutside = true;
alert(typeof isRainyOutside);

A execução desse 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!

Autor: Robert Whitney

Especialista e instrutor em JavaScript que treina departamentos de TI. Seu principal objetivo é aumentar a produtividade da equipe, ensinando outras pessoas a cooperar efetivamente durante a codificação.

Ver todas as postagens

Curso de JavaScript do iniciante ao avançado em 10 posts:

1. Como começar a codificar em JavaScript?
2. Noções básicas de JavaScript
3. Variáveis ​​e diferentes tipos de dados em JavaScript
4. Trechos e estruturas de controle
5. loops while e loops for
6. Matriz Java
7. Funções JavaScript
8. Objetos JavaScript
9. Métodos JavaScript e muito mais
10. Resumo do curso de JavaScript