Entendendo Tipos de Dados em JavaScript

Tutoriais
JavaScript

Introdução

Os tipos de dados são usados para classificar um tipo particular de dados em linguagens de programação. Por exemplo, um número e uma string de caracteres são tipos diferentes de dados que serão tratados de maneira diferente pelo JavaScript.

Isso é importante porque o tipo de dados específico que você usa determinará quais valores você pode atribuir a ele e o que pode fazer com ele. Isso quer dizer que, para ser capaz de fazer operações com variáveis no JavaScript, é importante entender o tipo de dados de qualquer variável fornecida.

Neste tutorial, vamos examinar como os tipos de dados funcionam no JavaScript, bem como os tipos de dados importantes nativos da linguagem. Isso não é uma investigação exaustiva dos tipos de dados, mas ajudará você a se familiarizar com as opções disponíveis no JavaScript.

Tipagem Dinâmica

O JavaScript possui tipos de dados dinâmicos, o que significa que a verificação de tipo é feita em tempo de execução, em vez de em tempo de compilação. Os tipos de dados do Python também são dinamicamente tipados.

Com linguagens tipadas dinamicamente, uma variável do mesmo nome pode ser usada para armazenar diferentes tipos de dados.

Por exemplo, a variável t, definida como uma variável pela palavra-chave let (observe que let mantém uma variável dada limitada em escopo), pode ser atribuída para conter diferentes tipos de dados, ou pode ser inicializada mas deixada indefinida:

let t = 16;			// t é um número
let t = "Teresa";	// t é uma string
let t = true;		// t é um booleano
let t;				// t é indefinido

Cada uma das variáveis t acima pode ser definida para qualquer tipo de dados disponível em JavaScript; elas não precisam ser explicitamente declaradas com um tipo de dados antes de serem usadas.

Números

O JavaScript tem apenas um tipo de número, não há uma designação separada para inteiros e números de ponto flutuante. Por causa disso, números podem ser escritos em JavaScript com ou sem decimais:

let num1 = 93;
let num2 = 93.00;

Em ambos os casos acima, o tipo de dados é um número e é o mesmo independentemente de o número ter ou não pontos decimais.

A notação exponencial científica pode ser usada em JavaScript para abreviar números muito grandes ou muito pequenos, como nos exemplos a seguir:

let num3 = 987e8;		// 98700000000
let num4 = 987e-8;		// 0.00000987

Os números em JavaScript são considerados precisos até 15 dígitos. Isso significa que os números serão arredondados após o 16º dígito ser alcançado:

let num5 = 999999999999999;		// permanece como 999999999999999
let num6 = 9999999999999999;	// arredondado para 10000000000000000

Além de representar números, o tipo de número JavaScript também possui três valores simbólicos disponíveis:

  • Infinity — um valor numérico que representa um número positivo que se aproxima do infinito
  • -Infinity — um valor numérico que representa um número negativo que se aproxima do infinito
  • NaN — um valor numérico que representa um não-número, significando não é um número

Infinity ou -Infinity serão retornados se você calcular um número fora do maior número possível disponível em JavaScript. Isso também ocorrerá para valores que estão indefinidos, como quando se divide por zero:

let num7 = 5 / 0;	// irá retornar Infinity
let num8 = -5 / 0;	// irá retornar -Infinity

Em termos técnicos, Infinity será exibido quando um número excede o número 1.797693134862315E+308, que representa o limite superior em JavaScript.

Da mesma forma, -Infinity será exibido quando um número ultrapassa o limite inferior de -1.797693134862316E+308.

O número Infinity também pode ser usado em loops:

while (num9 != Infinity) { 
	// O código aqui será executado até num9 = Infinity
}

Para números que não são números legais, será exibido NaN. Se você tentar realizar uma operação matemática com um número e um valor não numérico, NaN será retornado. Este é o caso no exemplo a seguir:

let x = 20 / "Shark";	// x será NaN

Como o número 20 não pode ser dividido pela string "Shark" porque não pode ser avaliado como um número, o valor retornado para a variável x é NaN.

No entanto, se uma string puder ser avaliada como um valor numérico, a expressão matemática pode ser realizada em JavaScript:

let y = 20 / "5";	// y será 4

No exemplo acima, como a string "5" pode ser avaliada como um valor numérico em JavaScript, ela é tratada como tal e funcionará com o operador matemático para divisão, /.

Ao atribuir o valor NaN a uma variável usada em uma operação, o resultado será o valor de NaN, mesmo quando o outro operando é um número legal:

let a = NaN;
let b = 37;
let c = a + b; 	// c será NaN

Só existe um tipo de dado numérico em JavaScript. Ao trabalhar com números, qualquer número que você inserir será interpretado como o tipo de dados para números; você não precisa declarar que tipo de dado está inserindo porque o JavaScript é dinamicamente tipado.

Cadeias de caracteres

A string is a sequence of one or more characters (letters, numbers, symbols). Strings are useful in that they represent textual data.

Em JavaScript, as cadeias de caracteres existem dentro de aspas simples ' ou aspas duplas ", então para criar uma cadeia de caracteres, envolva uma sequência de caracteres entre aspas:

let singleQuotes = 'This is a string in single quotes.';

let doubleQuotes = "This is a string in double quotes.";

Você pode optar por usar aspas simples ou aspas duplas, mas seja qual for a sua escolha, você deve permanecer consistente dentro de um programa.

O programa “Olá, mundo!” demonstra como uma cadeia de caracteres pode ser usada na programação de computadores, já que os caracteres que compõem a frase Olá, mundo! no alert() abaixo formam uma cadeia de caracteres.

hello.html
<!DOCTYPE HTML>
<html>
<head>
<script>
function helloFunction() {
    alert("Hello, World!");
}
</script>
</head>
<body>
<p><button onclick="helloFunction()">Click me</button></p>
</body>
</html>

Quando executamos o código e clicamos no botão Clique em mim, receberemos uma mensagem pop-up com a seguinte saída:

Output
Hello, World!

Assim como outros tipos de dados, podemos armazenar cadeias de caracteres em variáveis:

let hw = "Hello, World!";

E exibir a cadeia de caracteres no alert() chamando a variável:

hello.html
...
<script>
let hw = "Hello, World!";
function helloFunction() {
    alert(hw);
}
</script>
...

Output
Hello, World!

Há muitas operações que podemos realizar em cadeias de caracteres dentro de nossos programas para manipulá-las e alcançar os resultados que estamos buscando. As cadeias de caracteres são importantes para comunicar informações ao usuário e para o usuário comunicar informações de volta ao programa.

Booleanos

O tipo de dados Booleano pode ser um de dois valores, verdadeiro ou falso. Os Booleans são usados para representar os valores de verdade associados ao ramo lógico da matemática, que informa os algoritmos na ciência da computação.

Muitas operações na matemática nos dão respostas que se avaliam como verdadeiras ou falsas:

  • maior que
    • 500 > 100 verdadeiro
    • 1 > 5 falso
  • menor que
    • 200 < 400 verdadeiro
    • 4 < 2 falso
  • igual
    • 5 = 5 verdadeiro
    • 500 = 400 falso

Assim como com outros tipos de dados, podemos armazenar um valor Booleano em uma variável:

let myBool = 5 > 8;	// falso

Como 5 não é maior que 8, a variável myBool tem o valor de falso.

Conforme você escreve mais programas em JavaScript, você ficará mais familiarizado com como os Booleans funcionam e como diferentes funções e operações que avaliam verdadeiro ou falso podem mudar o curso do programa.

Matrizes

Uma matriz pode conter múltiplos valores dentro de uma única variável. Isso significa que você pode conter uma lista de valores dentro de uma matriz e iterar por eles.

Cada item ou valor que está dentro de uma matriz é chamado de elemento. Você pode se referir aos elementos de uma matriz usando um número de índice.

Assim como as strings são definidas como caracteres entre aspas, as matrizes são definidas tendo valores entre colchetes [ ].

Uma matriz de strings, por exemplo, parece com isso:

let fish = ["shark", "cuttlefish", "clownfish", "eel"];

Se chamarmos a variável de fish, receberemos a seguinte saída:

["shark", "cuttlefish", "clownfish", "eel"]

As matrizes são um tipo de dado muito flexível porque são mutáveis, ou seja, podem ter valores de elementos adicionados, removidos e alterados.

Objetos

O tipo de dados objeto do JavaScript pode conter muitos valores como pares nome:valor. Esses pares fornecem uma maneira útil de armazenar e acessar dados. A sintaxe literal de objeto é composta por pares nome:valor separados por dois-pontos com chaves em ambos os lados { }.

Geralmente usado para armazenar dados relacionados, como as informações contidas em um ID, um literal de objeto JavaScript parece com isso, com espaços em branco entre as propriedades:

let sammy = {firstName:"Sammy", lastName:"Shark", color:"blue", location:"ocean"};

Alternativamente, e especialmente para literais de objeto com um grande número de pares nome:valor, podemos escrever este tipo de dados em várias linhas, com um espaço em branco após cada dois pontos:

let sammy = {
    firstName: "Sammy",
    lastName: "Shark",
    color: "blue",
    location: "Ocean"
};

A variável de objeto sammy em cada um dos exemplos acima possui 4 propriedades: firstName, lastName, color e location. Estes são passados como valores separados por dois pontos.

Trabalhando com Múltiplos Tipos de Dados

Embora cada programa que você criar contenha múltiplos tipos de dados, é importante ter em mente que geralmente você estará realizando operações dentro do mesmo tipo de dados. Ou seja, você estará realizando operações matemáticas em números, ou fatiando strings.

Quando você usa um operador que funciona através de tipos de dados, como o operador + que pode adicionar números ou concatenar strings, você pode obter resultados inesperados.

Por exemplo, ao usar o operador + com números e strings juntos, os números serão tratados como uma string (portanto, serão concatenados), mas a ordem dos tipos de dados influenciará na concatenação.

Então, se você criar uma variável que realiza a seguinte concatenação, o JavaScript interpretará cada elemento abaixo como uma string:

let o = "Ocean" + 5 + 3;

Se você chamar a variável o, você obterá o seguinte valor retornado:

Output
Ocean53

No entanto, se você começar com números, os dois números serão somados antes de serem interpretados como uma string quando o programa atingir "Oceano", então o valor retornado será a soma dos dois números concatenados com a string:

let p = 5 + 3 + "Ocean";

Output
8Ocean

Devido a esses resultados inesperados, você provavelmente estará realizando operações e métodos dentro de um único tipo de dados em vez de entre eles. No entanto, o JavaScript não retorna erros ao misturar tipos de dados, como algumas outras linguagens de programação fazem.

Conclusão

Neste ponto, você deve ter uma compreensão melhor de alguns dos principais tipos de dados disponíveis para você usar em JavaScript.

Cada um desses tipos de dados se tornará importante à medida que você desenvolver projetos de programação na linguagem JavaScript.

Source:
https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript