Olá, caro aluno!

Nesta videoaula, você vai conhecer e aprender a utilizar tipos de dados e algumas expressões típicas da linguagem JavaScript. Isso é essencial para que você possa desenvolver programas em JavaScript que manipulem esses dados e realizem operações sobre eles.

Os dados de um programa geralmente necessitam ser armazenados nas chamadas variáveis do programa, as quais podem ter seus valores modificados ao longo do tempo. As variáveis são referenciadas e manipuladas a partir de seus nomes, sendo consideradas como um espaço de memória do computador utilizado para armazenar um determinado tipo de dado.

Em muitas linguagens de programação, como Java e C, as variáveis possuem um tipo de dado associado. No entanto, como falei na aula anterior, em JavaScript não precisamos declarar o tipo da variável. Isso faz com que variáveis JavaScript possam ter, em momentos diferentes da execução do programa, valores de tipos de dados diferentes.

Ao longo desta videoaula, você verá detalhes sobre essa interessante característica de JavaScript.

Vamos lá?!

Introdução a Tipos de Dados

Tipos de dados é um conceito importante na programação. Isso porque, para conseguir trabalhar com as variáveis do programa, precisamos saber algo sobre o seu tipo.

Vamos supor que nós atribuíssemos o resultado da soma do texto "olá mundo" com o número 20 à variável de nome resultado (Figura 1). Para você, isso faz sentido? Qual seria o resultado? Teríamos um erro? Note que as respostas a essas perguntas são muito importantes, pois elas definem o comportamento da linguagem e, portanto, como poderemos utilizá-la.

Em JavaScript, na soma de um número com um texto, o número será interpretado como um texto e a adição será interpretada como um operador que une os dois textos. Dessa forma, a variável resultado receberá o valor "olá mundo20" (Figura 2). Vamos ver isso na prática?

Nesse exemplo, você verá como é que JavaScript se comporta ao somarmos o texto "olá mundo" com o numeral "20". Veja que estou alterando aquele componente de texto da página HTML. Temos o parágrafo que foi modificado para receber o valor da variável "t", ou seja, a variável "t" recebe a soma do texto "olá mundo" com o número "20" (Código 1).

Código 1 - 02_1 Texto e Número.html

Se você for ao HTML gerado, como vemos na Figura 3, o texto exibido é, de fato, "olá mundo20", ou seja, o JavaScript transformou o número "20" em um texto e os concatenou.

É importante ressaltar que JavaScript interpreta as expressões da esquerda para a direita. Portanto, sequências diferentes podem produzir resultados diferentes. Veja outro exemplo.

Neste exemplo, temos 3 textos na página HTML, organizados em 3 parágrafos. Vamos identificar o primeiro parágrafo (linha 13) com "texto1", o segundo (linha 14) com "texto2" e o terceiro, na linha 15, com "texto3" (Código 2).

Código 2 - 02_2 Da Esquerda para a Direita.html

A ideia é dar valores para esses 3 parágrafos e mostrar que JavaScript interpreta as suas expressões da esquerda para a direita. Então, veja a variável x que será o valor que irei atribuir na linha 19 ao "texto1". Ela recebe o resultado da expressão "olá mundo" + 12 + 8. Nesse momento, JavaScript vai pegar a expressão "olá mundo", identificar que é um texto e, ao tentar somar com o número 12, ele transforma 12 em um texto e junta esse texto a "olá mundo", resultando em "olá mundo12".

Depois, ele pega o texto "olá mundo12" e tenta novamente somar com o número 8. Para isso, ele transforma o número 8 em um texto e junta a "olá mundo12", resultando em "olá mundo128", como você pode ver aqui na página HTML (Figura 4), o resultado dessa primeira transformação, tá certo?

Na segunda transformação, temos a variável X maiúsculo (linha 22) e aproveito para fazer uma observação: JavaScript é case sensitive, ou seja, ela diferencia letras minúsculas de letras maiúsculas. Portanto, a variável x minúscula é diferente da variável X maiúscula, e essa variável X maiúsculo será o valor do "texto2", do segundo parágrafo.

Na linha 22 fiz diferente, usei parênteses, na expressão 12 mais 8 e, ao colocar parênteses, você coloca uma precedência para aquela expressão. Então, JavaScript interpretou "olá mundo" como um texto, mas ao somar, digamos assim, com o lado direito, ele primeiro valora o lado direito, 12 mais 8, resultando em 20. Ao final, o texto "olá mundo20" pode ser visto no segundo texto da página HTML (Figura 5).

Por fim, se trouxermos a soma 12 + 8 para o lado esquerdo da expressão da soma (linha 25), o que vai acontecer? Não precisamos usar os parênteses porque, como já expliquei, JavaScript interpreta as expressões da esquerda para a direita. Então, temos primeiro a soma 12 + 8, que resulta em 20. Após isso, teremos a soma, a junção com o texto "olá mundo", ou seja, teremos o texto "20olá mundo", conforme o resultado que você pode ver na página HTML (Figura 6).

Basicamente, os tipos de dados agrupam um conjunto de valores e são utilizados, por exemplo, para declarar o tipo de uma variável, ou seja, os possíveis valores que a variável pode assumir. É importante ressaltar que, em JavaScript, essa tipagem de variáveis não existe. Por isso, podemos afirmar que JavaScript possui tipos dinâmicos. Isso quer dizer que a mesma variável pode ser usada para armazenar valores de tipos diferentes. Por exemplo, uma variável camaleao pode receber o valor inteiro 2019 e depois receber o texto "Alo Mundo" (Figura 7).

Porém, a declaração de tipos das variáveis acontece em diversas linguagens de programação importantes, como, por exemplo, em Java, em C e em TypeScript, um superconjunto de JavaScript que possui, entre outras coisas, a tipagem das variáveis, que será vista ao longo do curso (Figura 8).

No dia a dia, usamos bastante alguns tipos de dados, como o tipo Inteiro, que representa o conjunto dos números inteiros, e os números de ponto flutuante, que representam o conjunto de números com componentes decimais, como no caso dos números 10,1 e 1.127,898.

Na verdade, na computação a notação utilizada não usa o separador de milhar e o separador decimal, segue o padrão americano. Usamos, portanto, o ponto (.), e não a vírgula (,), como separador decimal. Sendo assim, os números que mencionamos são representados como 10.1 e 1127.898 (Figura 9), ok?

Na próxima videoaula, você conhecerá melhor os tipos de dados existentes em JavaScript. Até lá!