O Valor dos Tipos de Operadores - Parte 1

O título deste capítulo é uma representação dos três assuntos que iremos aprender: Valores, Tipos e Operadores.

Na primeira parte, iremos ver sobre:

  1. Tipos de Dados
  2. Tipo Number
  3. Operadores Matemáticos
  4. Números Especiais
  5. Strings

Tipos de Dados

O que fazemos programando computadores é basicamente manipular dados. No JavaScript, chamamos esses dados de valores. Estes valores são divididos em dois tipos:

  • Tipos Primitivos
    • number (números)
    • string (sequência de caracteres/texto)
    • boolean (booleanos ou valores de verdade)
    • Tipos Especiais: null (nulo) e undefined (indefinido)

Todos os valores em JavaScript diferentes dos citados acima, são pertencentes ao tipo object (objeto). Vejamos quais são eles:

  • Tipos de Objetos
    • arrays (vetores)
    • funções
    • Date (data)
    • RegExp (expressões regulares)
    • Error

Bom, agora que vimos teoricamente os tipos de dados em JavaScript, vamos perceber tudo isso de forma real. Para isso, você deverá abrir o console do seu navegador (no Google Chrome você pode usar o atalho ctrl shift j.

Dentro da seção console existente nas ferramentas do desenvolvedor, você deverá digitar os comandos abaixo, para perceber que tudo isso que te falei ali em cima é verdade. O resultado esperado está indicado na frente da seta ->. Caso o resultado não seja o que você conseguiu, certifique-se de ter digitado corretamente o código.

Ah, já ia me esquecendo… Digite TODO o código, não copie apenas!!! Isso será muito importante para a memorização e internalização dos conceitos.

ps: Não acredite em meus resultados, faça todos os testes! =)

tip

Quando estamos dentro do console, a utilização do comando console.log() é desnecessária para visualizar o resultado de uma instrução, pois o resultado da operação sempre é retornado.

Vamos utilizar o console diretamente apenas para códigos curtos, pois para códigos maiores, iremos rodá-los através de nossa página html, e ai o comando console.log() será de grande utilidade.

 
 1 /* verificação de tipos primitivos */
 2 typeof 13 // tipo number
 3 // -> "number"
 4 typeof "javascript furtivo" // tipo string
 5 // -> "string"
 6 typeof true // tipo boolean
 7 // -> "boolean"
 8  
 9 /* tipos primitivos especiais */
10 var semValor = null; // tipo null
11 typeof semValor
12 // -> "object" 
13  
14 var semAtribuir; // tipo undefined
15 typeof semAtribuir
16 // -> "undefined"

Olhando o código acima, mais precisamente na parte de tipos primitivos especiais, você pode perceber que o tipo null na verdade é um object. Bom, mas por que isso?

Essa peculiaridade do JavaScript na verdade é um “erro” dos primóridios da linguagem que foi herdado pela ECMAScript. Teremos um tópico específico mais a frente para explicar essa questão.

Vamos ver agora no nosso console os tipos existentes de objetos.

 1 /* Tipos de Objeto */
 2  
 3 // objeto do tipo array (vetor)
 4 var guitarras = [ 'ibanez', 'music man', 'suhr' ];
 5 typeof guitarras; // -> "object"
 6  
 7 // objeto do tipo function
 8 var soma = function( valor1, valor2 ) { return valor1 + valor2; }
 9 typeof soma; // -> "function"
10  
11 // objeto do tipo Date
12 var agora = new Date();
13 typeof agora; // -> "object"
14  
15 // objeto do tipo RegExp
16 var minhaRegExp = /padrao/;
17 typeof minhaRegExp; // -> "object"
18  
19 // objeto do tipo Error
20 var perigo = new Error( 'Alguma coisa deu errado!' );
21 typeof perigo; // -> "object"

Muito bom! Agora já conhecemos todos os tipos de dados do JavaScript! Você pode parar um pouco para respirar e beber uma água, pois a partir de agora iremos aprofundar um pouco em cada tipo primitivo de dados que acabamos de ver. Os tipos de objetos são mais complexos, e por isso cada um terá um livro próprio (no mínimo)…

Number

Representamos números no JavaScript da mesma forma que escrevemos no nosso dia a dia. var numero = 13 é a forma que dizemos no JavaScript que a variável numero receceu o valor 13.

Números fracionários são representados com um ponto, ficando assim a representação: var numero = 1.3.

Quando tivermos trabalhando com um número muito grande ou muito pequeno, usamos notação científica através da letra e, ficando nosso código, no caso, assim: 1.313e13 que é igual a 1.313 x 10¹³.

Cálculos com números inteiros menores que 9 quadrilhões são garantidos de sempre serem precisos, porém não se pode dizer o mesmo para números fracionários, que devem ser tratados como aproximações.

Operadores e Operações

Agora que conhecemos um pouco mais sobre os números no JavaScript, vamos aprender a utilizar alguns operadores para então fazer alguns cálculos com estes números.

Temos os 4 operadores matemáticos básicos representados no JavaScript da seguinte forma:

  • +: efetua a adição de dois números (ou concatenação, no caso de strings);
  • -: efetua a subtração de dois números;
  • *: efetua a multiplicação de dois números;
  • /: efetua a divisão de dois números;
  • %: efetua a divisão entre dois números, e retorna o resto da divisão.

Agora que já conhecemos os números e operadores, vamos brincar um pouco no console. Digite as operações abaixo e confira se o resultado é o mesmo do indicado no comentário.

1 1.3 + 1.8 // -> 3.1
2  
3 1.3 - 1.17 // -> 0.13000000000000012 
4  
5 1.3 * 10 // -> 13
6  
7 13 / 2 // -> 6.5
8  
9 13 % 2 // -> 1

Números Especiais

Temos três tipos de números que não se comportam como números. Infinity, -Infinity e NaN. Os dois primeiros são gerados quando tentamos dividir algum número por zero, e o outro, Not a Number (NaN), surge quando há uma coerção de tipo de string para number, no caso, mal sucedida, pois a string não pode ser convertida em um número de fato.

Vamos ver como surgem estes números! De volta ao console! =)

1 // criando um número através do objeto Number
2 var test = Number( 'treze' ); 
3 test // -> NaN
4 typeof test // -> "number"
5  
6 13 / 0 // -> Infinity
7  
8 -13 / 0 // -> -Infinity

ps: Uma particularidade do NaN é que ele é o único valor em JavaScript que não é igual a ele mesmo. Como verificar isso? A melhor forma para saber se uma variável está com valor NaN é testando se ela é igual a ela mesmo (ou diferente).

Se você comparar a variável A com ela mesmo e o resultado for false, logo, A é igual a NaN. Vamos dar uma olhada mais de perto:

1 var A = NaN;
2  
3 A == A; // -> false
4 A != A; // -> true

Você poderia também verificar se uma variável está com o valor NaN usando o método isNaN(), porém o mesmo apresenta alguns comportamentos inesperados por fazer coerção dos valores para o tipo number. Veja mais aqui.

Strings

Este é o tipo de dados básico usado para representação de texto. Para o programa identificar uma string, tal deve estar contida entre aspas duplas ou simples, assim:

  • "isso é uma string" e
  • 'isso também é uma string'

ps: Geralmente, usamos aspas simples no JavaScript e aspas duplas no HTML.

Você pode colocar tudo dentro de uma string, mas alguns caracteres precisam ser colocados com uma certa atenção, como aspas, quebras de linha, tabulação entre outros, e toda a string deve ser escrita como uma simples expressão, apesar de poder ser escrita em várias linhas de código, como será demonstrado logo mais.

Para fazer o escape dos caracteres especiais, utilizamos o símbolo da barra invertida \. Esse sinal nos diz que temos algum caractere com significado especial na frase.

Vamos praticar um pouco essa “teoria das cordas”. 

 1 var 
 2   frase01 = 'Este é o parágrafo inicial...',
 3   frase02 = "... complementado por este trecho.",
 4   frase03 = '\nA partir daqui começa a ficar interessante...',
 5   frase04 = '\tagora com tabulação, e \'aspas\' também',
 6   texto = frase01 + frase02 + frase03 + frase04;
 7  
 8 texto;
 9 /*
10 -> "Este é o parágrafo inicial...... complementado por este trecho.
11 A partir daqui começa a ficar interessante...	agora com tabulação, e 'aspas' tamb\
12 ém"
13 */
14  
15 // Para escrever o mesmo texto acima como 
16 // uma sentença única, faríamos assim:
17 var texto2 = 'Este é o parágrafo inicial...\
18 ... complementado por este trecho.\
19 \nA partir daqui começa a ficar interessante...\
20 \tagora com tabulação, e \'aspas\' também';
21  
22 texto2;

ps:O caracter \ quando colocado no fim da linha, permite que você continue a string de outra linha. Isso é útil para formatação do código, melhorando a sua legibilidade. Use a forma que for mais conveniente e agradável para você.

Vamos encerrar esta primeira etapa por aqui, para que não fique muita informação de uma só vez. No próximo capítulo iremos ver mais sobre operadores, booleanos, coerção de tipo e mais algumas coisas.

Up next

O Valor dos Tipos de Operadores - Parte 2