Tipos de Dados e Variáveis
Nossos projetos em JavaScript sempre envolverão a manipulação de dados para a geração de informações. Supomos, dessa forma, que os usuários dos sistemas que você irá implementar sempre fornecerão dados e irão interagir com os elementos visuais dispostos. Essa interação pode e deve ser manipulada por meio de JavaScript.
A seguir, vamos definir, inicialmente, um estudo de caso para que possamos, então, imergir nos aspectos técnicos da linguagem.
Estudo de caso
Para ficar mais fácil de compreendermos o básico da linguagem JavaScript, vamos assumir o seguinte projeto de desenvolvimento web:
Você foi contratado(a) para implementar uma plataforma web que possibilita a venda online (delivery) de saladas. O contratante (dono do Delivery) precisa, por exemplo, cadastrar todas as saladas que compõem o seu cardápio. Os seus cliente, por sua vez, fazem pedidos online analisando esse cardápio
Para esse exemplo, podemos imaginar algumas funcionalidades essenciais. Vamos elencar apenas 3 (três) para fins didáticos:
- O sistema deve permitir o cadastramento de ingredientes;
- O sistema deve permitir o cadastramento de saladas;
- O sistema deve permitir a venda de saladas.
Não pense muito nas demais ações e funcionalidades possíveis, pois, essas 3 (três) já vão nos render diversos exemplos de implementação. Por enquanto, a ideia é isolar um problema e resolvê-lo separadamente. Isso ajuda na resolução do todo
Então, com essas funcionalidades em mente, vamos pensar em um protótipo visual. É importante, nesse momento, imaginarmos como o dono do Delivery irá utilizar essas funcionalidades em seus dispositivos. Vamos assumir que ele irá fazer tudo do seu celular.
Observe o protótipo a seguir:
Neste protótipo, as interfaces gráficas dispostas contemplas as funcionalidades de cadastramento e venda de saladas. Apesar do visual complexo, a entrada de dados para ambas funcionalidades será simplificada.
Nesse contexo, a entrada de dados é o processo de inserção de dados em um sistema, aplicativo ou programa de computador para que estes possam ser processados, armazenados ou utilizados de alguma forma. A entrada de dados pode ser feita de diversas formas, como digitação manual, leitura de códigos de barras, reconhecimento óptico de caracteres, importação de arquivos, dentre outros. Fique tranquilo que teremos logo mais uma seção específica para lidar com a entrada de dados em JavaScript.
Variáveis
Como mencionamos anteriormente, a entrada de dados é essencial para que tenhamos dados para processar. Mas, os dados inseridos por um usuário precisam ser armazenados em algum lugar do dispositivo que está executando o seu programa.
Para o exemplo da plataforma de delivery que estamos lidando, adicionei a informação de que o usuário tende a usar um celular/smartphone para a entrada de dados. Vamos avaliar esse processo de entrada de dados para o cadastramento de uma nova salada no sistema.
Uma Salada no sistema tem as seguintes propriedades:
No exemplo, a definição da estrutura Salada está simplificada, seja por conta das propriedades, seja por conta dos tipos de dados envolvidos. No protótipo apresentado, também é possível que o usuário coloque uma foto para cada salada, selecione ingredientes de uma lista e, até mesmo, cadastre possíveis tamanhos/porções. Mas, a ideia é simplificar os exemplos inciais. Os tipos de dados possíveis em JavaScript serão descritos em breve.
Enfim, as propriedades nome, ingredientes e valor são inseridas e devem ser armazenadas. Com estamos lidando com um software, para cada processamento imaginável que envolverá esses dados, vamos considerar que tais dados são armazenados na memória do dispositivo. Para isso, vamos pensar nessa memória como sendo uma estantes com vários nichos, como na imagem a seguir:
A estante com nichos (A), na vida real, pode acondicionar diversos itens, cada um disposto em um nicho específico. Pensando em organização, podemos até colocar uma etiqueta de identificação (B) em cada nicho, para que fique mais fácil a identificação ou categorização dos itens que ficarão guardados nessa estante. Então, se alguém me diz que guardou uma mochila no nicho 13, eu sei onde encontrar esse item dentre os diversos outros que podem estar ali.
Como analogia para nossos sistema de delivery, a parte (C) da imagem tem a mesma proposta da estante com nichos. Pegamos para nós os 3 primeiros nichos, guardamos os valores nome, ingredientes e valor e os "etiquetamos", para sabermos exatamente o que guardamos ali. Além de saber o que guardamos, anotamos o tipo de item que foi armazenado. Cada um desses espaços pode ser chamado de variável. Além disso, cada variável tem um tipo de dado atribuído.
Na estante, ou melhor, na memória de nosso dispositivo, temos o seguinte:
- A variável nome, que é do tipo String (valor de texto), armazena o valor "Dallas 1";
- A variável ingredientes, que é do tipo String (valor de texto), armazena os ingredientes "Alface; Tomate; Cebola";
- A variável valor, que é do tipo Number (valor numérico), armazena o valor "10.99";
Os tipos de dados que foram mencionados, juntamente com outros tipos, serão descritos e explicados em breve. Agora, apenas entenda que cada dado armazenado em uma variável tem um tipo.
Agora, depois desse exemplo e das analogias utilizadas, vamos definir formalmente o que é uma variável. As variáveis são elementos fundamentais em qualquer linguagem de programação, incluindo JavaScript. Elas permitem que nós programadores consigamos armazenar e manipular dados durante a execução do código. Esse armazenamento pode ser feito na Memória RAM, por exemplo. Um navegador web consegue, por meio da linguagem JavaScript, acessar os valores destas variáveis sempre que preciso.
Logo mais, aprenderemos a declarar essas variáveis em JavaScript, para que consigamos armazenar e utilizar os dados que queremos processar.
Declaração de Variáveis
Existem três maneiras de declarar uma variável em JavaScript:
let: Em JavaScript, a sintaxe mais adequada para declarar uma variável é usando a palavra-chave let seguida pelo nome da variável. Essa palavra-chave é usada para declarar uma variável cujo valor pode ser alterado posteriormente.
let valorSalada = 30;const: Essa palavra-chave é usada para declarar uma variável cujo valor não pode ser alterado posteriormente. Uma vez declarada, a variável torna-se imutável
const PI = 3.14;
PI = 10; // operação proibida, pois não há como alterar um valor constante (const)var: Essa palavra-chave também pode ser utilizada para a definição de variáveis, mas, atualmente, é considerada obsoleta e recomenda-se a sua substituição por let.
var valorSalada = 30; // em desuso
Nestes 2 últimos exemplos de declaração de variáveis, colocamos um comentário de texto utilizando os símbolos //. Tudo que está escrito após // não é interpretado durante a execução do código. O texto é compreendido como sendo um comentário de código, para que possamos lembrar o que está sendo executado em um dado momento.
Também é possível comentarmos código com /* */ quando precisamos criar comentários com mais de uma linha de texto. Ex:
/*
O valor de cada salada é armazenado
na variável valorSalada. Os valores
reais podem ser conferidos no arquivo
tabela.pdf
*/
var valorSalada = 30;
Nomeando Variáveis
As variáveis em JavaScript podem ter qualquer nome atribuído, desde que algumas regras sejam respeitadas:
- Comece os nomes de variáveis com uma letra, underscore (_) ou cifrão ($);
- Números não são permitidos como primeiro caractere na nomeação de uma variável;
- As variáveis são sensíveis a maiúsculas e minúsculas. A variável nomeSalada é diferente da variável NomeSalada;
- Não podemos criar variáveis utilizando palavras reservadas da linguagem, como: double, else, case, cath, if, long, new, short, let. Esses nomes são de uso exclusivo da linguagem.
O exemplo a seguir demonstra nomeações de variáveis permitidas:
let nomeSalada = "Salada Dallas Magnifiqué";
let nome_salada = "Salada Dallas Magnifiqué";
let _preco = 25;
let $preco = 19.99;
Atribuição de variáveis
Atribuição de Variáveis Após declarar uma variável, podemos atribuir um valor a ela usando o operador de atribuição =.
let nomeSalada = "Salada Dallas Prime";
Tipos de dados
Você deve ter observado nos exemplos anteriores que as variáveis criadas durante a atribuição (sinal =) receberam valores com formatos distintos, como os exemplos a seguir:
let nomeSalada = "Salada Dallas Prime";
let precoSalada = 30.99;
Por meio da palavra reservada let conseguimos criar duas variáveis, uma chamada nomeSalada e outra chamada precoSalada. Para a primeira variável, o valor atribuído é "Salada Dallas Primer", com aspas duplas. Já na variável seguinte, o valor atribuído é um valor numérico decimal. Consegue perceber que são dados com tipos distintos? Um valor é textual, o outro é numérico.
Se eu precisar, em algum momento, calcular quanto o cliente deve pagar em seu pedido, supondo que ele pediu 3 saladas distintas, sabemos que o preço de cada uma das saladas escolhidas deve ser considerado. O preço final para o cliente, nesse exemplo, seria algo como:
Preço Final = preço da Salada 1 + preço da Salada 2 + preço da Salada 3
Note que estamos realizando uma operação de soma entre estes 3 valores. Como será a linguagem JavaScript que fará essa operação, vamos assumir que:
- A linguagem deve conseguir armazenar variáveis cujo conteúdo é um valor numérico;
- A linguagem deve conseguir realizar operações matemáticas com estes valores numéricos.
Nessa breve análise, já podemos inferir que:
- Tipos de dados são importantes para cada uma das variáveis criadas;
- Operações matemáticas (soma, subtração, multiplicação, divisão, dentre outras) devem ser realizadas por meio de operadores específicos.
Então, vamos entender como JavaScript lida com estas situações. Aqui já lhe informamos que JavaScript é uma linguagem de programação dinamicamente tipada, o que significa que os tipos de dados são determinados automaticamente em tempo de execução, conforme um valor é atribuído a uma variável. Essa é a regra e apenas a aceitamos.
No exemplo das variáveis nomeSalada e precoSalada observamos que, em momento algum, eu especifiquei o tipo de dados desejado. Eu apenas atribui valores após o sinal igual(=). A tipagem (definição de tipo) foi feita automaticamente pela linguagem. Em outra linguagens de programação, como C#, por exemplo, a tipagem já é de nossa responsabilidade, como no exemplo a seguir:
float valorSalada = 30.99;
Nesse exemplo, a palavra reservada float vem antes do nome da variável para indicar que o valor atribuído é um valor numérico de ponto flutuante (valor decimal). Mas, não se preocupe com as outras linguagens agora. Só assuma que JavaScript lhe dá essa "colher de chá".
Tipos de dados primitivos
Em JavaScript, os tipos de dados primitivos (pré-definidos para a linguagem) são os seguintes:
string
number
boolean
undefined
null
symbol
object
String
Strings, em JavaScript, são sequências de caracteres (texto em geral). A representação de Strings em JavaScript se dá por meio da utilização de aspas simples ou aspas duplas.
Exemplo:
'Texto qualquer' // string com 14 caracteres (espaço conta como um caractere)
"Texto qualquer" // também é uma string
'Texto ' + 'qualquer' // concatenação de Strings
let mensagem = "Compra realizada com sucesso!"; // string atribuída à variável mensagem
As Strings são objetos JavaScript que também tem diversas funcionalidades extras implementadas que nos auxiliam a manipular textos. Ex:
"olá".charAt(0) // retorna a letra 'o'
"olá, mundo".replace("olá", "adeus") // retorna 'adeus, mundo'
"olá".toUpperCase() // retorna OLÁ
Templates Strings
As Templates Strings em JavaScript, também conhecidas como template literals, são uma forma de criar strings de texto que permitem incorporar expressões JavaScript em seu conteúdo. Eles foram introduzidos no ES6 (também conhecido como ECMAScript 2015) e são uma maneira mais conveniente e legível de criar strings complexas em comparação com as strings padrão de JavaScript.
Para criar uma template string, você usa a sintaxe de crase (``) em vez de aspas simples ou duplas. Dentro de uma template string, você pode usar a sintaxe ${} para incorporar expressões JavaScript.
Por exemplo, você pode criar uma template string para exibir uma mensagem de saudação personalizada com base no nome de usuário fornecido:
const usuario = 'Maria';
const mensagem = `Olá, ${usuario}! Bem-vindo(a) de volta.`;
console.log(mensagem); // Saída: Olá, Maria! Bem-vindo(a) de volta.
Observe como usamos a sintaxe ${} para incorporar a variável usuário na string de saudação. Ao usar uma template string, podemos facilmente criar strings mais complexas sem precisar concatenar várias strings e variáveis.
Além disso, as template strings também oferecem suporte a várias linhas, permitindo que você crie strings de várias linhas sem precisar usar caracteres de escape ou concatenar várias strings. Aqui está um exemplo:
const multiplasLinhas = `
Esta é uma string
de várias linhas
que pode ser facilmente criada
usando uma template string
`;
console.log(multiplasLinhas);
Esse último exemplo de Template String resulta em algo como:
Esta é uma string
de várias linhas
que pode ser facilmente criada
usando uma template string
Em síntese, as Templates Strings são uma adição útil à linguagem, permitindo que os desenvolvedores criem strings complexas com mais facilidade e legibilidade. Nada como ter a vida facilitada na hora de dar manutenção no nosso código.
Number
Um tipo de dado que representa valores numéricos. Os números podem ser inteiros ou decimais.
Exemplo:
let quantidadeIngredientes = 5;
let precoSalada = 19.99;
Boolean
Um tipo de dado que representa verdadeiro ou falso.
Exemplo:
let ativo = true;
let logado = false;
Undefined
Um tipo de dado que representa a ausência de valor. Quando uma variável é declarada, mas não atribuída um valor, ela é undefined.
Exemplo:
let nomeSalada;
Null
Um tipo de dado que representa a ausência intencional de valor.
Exemplo:
let nomeSalada = null;
Symbol
Um tipo de dado que representa um identificador exclusivo.
Exemplo:
let simbolo = Symbol("id");
Objeto
Objeto é um tipo de dado que representa uma coleção de dados aninhados em uma estrutura específica. Os objetos são organizados por conjuntos de propriedades e valores, como no exemplo a seguir
Exemplo:
let salada = {
nome: "Salada Dalas 2",
valor: 20.50,
ingredientes: "Pepino, Repolho, Tomate, alface"
};
O esqueleto de um objeto segue sempre a mesma sintaxe:
{
propriedade1: valor1,
propriedade2: valor2,
propriedadeN: valorN,
}
Os valores possíveis para cada propriedade devem respeitar os tipos de dados do Javascript. Então, o exemplo do objeto salada nos mostra que:
- a variável salada é do tipo Object e armazena 3 propriedades (nome, valor, ingredientes);
- a propriedade nome tem um valor textual (String);
- a propriedade valor tem um valor numérico (Number);
- a propriedade ingredientes tem um valor textual (String);
Conclusão
Além dos tipos de dados primitivos e objeto, também existem outros tipos de dados em JavaScript, como funções, arrays, datas, dentre outros. É importante entender os diferentes tipos de dados em JavaScript para poder escrever código eficiente e correto.
Nos exemplos que trouxemos para este material, nos momentos mais propícios, iremos retomar cada um dos tipos de dados e suas possibilidades. Por enquanto, é importante saber que a linguagem considera um tipo para cada dados que você manipula.