Tipos de dados JavaScript (Data Types)


Os softwares lidam frequentemente com uma grande quantidade de dados, os quais podem assumir uma variedade de formas e propósitos. Cada tipo de dado possui suas características específicas como o uso e implementações subjacentes. Possuem também conceitos abstratos que permitem organizar e classificar os dados com base em seus valores e nas operações que podem ser realizadas sobre eles.

Por exemplo, considere o tipo de dado int, amplamente utilizado em diversas linguagens de programação. Matematicamente, sabemos que os números inteiros variam de infinito negativo até o infinito positivo, incluindo todos os números inteiros entre esses extremos. No entanto, no contexto das máquinas, os números inteiros são finitos, limitados a uma faixa específica.

Existem situações em que um tipo de dado representa um único valor sem possibilidade de realizar operações sobre ele. Em outros casos, um tipo de dado pode representar um conjunto quase infinito de valores (limitado pela memória disponível), com suporte a uma ampla gama de operações.

Dinamismo

JavaScript é reconhecido por ser uma linguagem dinâmica, apresentando tipos também dinâmicos. Ao contrário de algumas linguagens, as variáveis em JavaScript não estão rigidamente vinculadas a um tipo específico de valor. Na verdade, uma variável pode receber e, posteriormente, reatribuir valores de qualquer tipo:

let x = 42; // x Agora é um número
x = "Ola"; // x Agora é uma string
x = true; // x Agora é um booleano

Embora as coerções implícitas sejam convenientes em muitos casos, elas podem ocasionalmente gerar bugs sutis, especialmente quando as conversões ocorrem em momentos inesperados ou na direção contrária à esperada (por exemplo, de string para número, em vez de número para string). Para symbol e BigInts, o JavaScript proibiu intencionalmente certas conversões implícitas de tipo.

Tipos Primitivos

Os tipos primitivos em JavaScript são fundamentais para o funcionamento da linguagem. Entre eles, temos os objetos de wrapper, que são objetos que fornecem funcionalidades adicionais e métodos em torno dos tipos primitivos correspondentes. Por exemplo, o objeto String fornece métodos como toUpperCase() e substring(), que são úteis para manipulação de strings.

Quando tentamos acessar propriedades em valores primitivos, o JavaScript automaticamente converte o valor primitivo em um objeto wrapper correspondente, permitindo o acesso à propriedade desejada. No entanto, é importante notar que acessar propriedades em valores null ou undefined resulta em uma exceção TypeError, que pode ser tratada usando o operador de encadeamento opcional (?.).

Esses objetos de wrapper são úteis para fornecer funcionalidades adicionais aos tipos primitivos, tornando mais fácil e conveniente trabalhar com eles em JavaScript.

typetypeof return valueobject wrapper
null“object”N/A
undefined“undefined”N/A
boolean“boolean”boolean
Number“Number”Number
bigInt“bigInt”bigInt
string“string”string
symbol“symbol”symbol
Primitive Types

Na maioria das vezes, um valor primitivo é representado diretamente no nível mais baixo da implementação da linguagem.

Null

Em JavaScript, null não é uma referência a um objeto inexistente ou um endereço de memória nulo que não aponta para nenhum local válido na memória do sistema como em algumas outras linguagens. Ele é apenas um valor especial que representa “nada”, “vazio” ou “valor desconhecido”.

let age = null;

Undefined

O valor undefined cria um tipo próprio assim como null e tem como significado “valor não atribuído”, ou seja, se uma variável for declarada, mas não atribuída, então seu valor será undefined:

let age;

alert(age); // exibe "undefined"

É possível também atribuir explicitamente undefined a uma variável:

let age = 100;

// change the value to undefined
age = undefined;

alert(age); // "undefined"

Mas não é recomendado o seu uso. O comum é a utilização do null para atribuir um valor “vazio” ou “desconhecido a uma variável, enquanto undefined é reservado como valor padrão para coisas não atribuídas.

Boolean

O tipo booleano possui apenas dois valores: verdadeiro e falso. Este tipo é comumente usado para armazenar valores sim/não: verdadeiro significa “sim, correto” e falso significa “não, incorreto”.

let verificaNome = true; // sim, nome verificado
let verificaIdade= false; // não, idade não verificada

Os valores booleanos também se aplicam a comparações:

let ehMaior = 4 > 1;

alert( ehMaior ); // sim, o resultado afirma que 4 é maior que 1.

Number

O tipo de dado Number representa números, tanto inteiros quanto de ponto flutuante. Esses números podem ser usados em uma variedade de operações matemáticas, como adição, subtração, multiplicação e divisão, entre outras.

let n = 123;
n = 12.345;

Além dos números regulares, o tipo “number” também inclui valores especiais:

  • Infinity: O infinito na matemática representa um valor especial maior que qualquer número. Podemos obtê-lo como resultado da divisão por zero:

Obtendo pelo resultado com a divisão por “0”:

alert( 1 / 0 ); 

Referenciando diretamente:

alert( Infinity ); 
  • Infinity: Similar ao “Infinity”, mas negativo.
  • NaN (Not-a-Number): Representa um erro computacional e é retornado quando uma operação matemática é indefinida ou incorreta.

Por exemplo:

alert( "sou string" / 2 ); // NaN, tal divisão é incorreta pois não se pode dividir string por number

Se um valor NaN estiver envolvido em qualquer parte de uma expressão matemática, ele propagará o resultado como NaN. No entanto, uma exceção é a operação "NaN ** 0", que retorna 1.

BigInt

O tipo “Number” tem limitações em relação à representação segura de números inteiros. Embora seja capaz de armazenar números inteiros consideravelmente grandes, como até 1,7976931348623157 * 10^308, há um ponto onde a precisão é comprometida. Especificamente, números inteiros maiores que (2^53-1) ou menores que -(2^53-1) não podem ser representados com precisão dentro do tipo number.

Em termos práticos, isso significa que valores inteiros ímpares além do limite de (2^53-1) não podem ser armazenados como “number”. Embora para muitos casos de uso, o intervalo entre -(2^53-1) e (2^53-1) seja suficiente, certas aplicações como criptografia demandam a capacidade de lidar com números inteiros realmente grandes.

Para atender a essa necessidade, o JavaScript introduziu o tipo BigInt, que permite representar números inteiros de comprimento arbitrário. Um valor BigInt é criado anexando o sufixo “n” ao final de um número inteiro:

// o "n" no final significa que é um BigInt
const bigInt = 1234567890123456789012345678901234567890n;

Sendo assim, podemos trabalhar com números inteiros muito grandes sem perder a precisão necessária para aplicações críticas.

String

São sequências de caracteres, que podem incluir letras, números, símbolos e espaços. Podendo ser definidas utilizando aspas simples (”), aspas duplas (“”) ou acento grave (“).

// Aspas simples
alert('hello');

// Aspas duplas
alert("hello");

// Backticks
alert(`hello`);

Não há alguma diferença em usar aspas duplas ou simples no JavaScript, porém o uso de Backticks é marcado com uma “funcionalidade estendida”. Eles nos permitem incorporar variáveis ​​e expressões em uma string envolvendo-as em ${…}.

let nome = "John";

// incorporando uma variável
alert( `Olá, ${nome}!` ); // Olá, John!

// incorporando uma expressão
alert( `O resultado é: ${1 + 2}` ); // O resultado é 3

A expressão dentro de ${…} é avaliada e o resultado é incorporado à string. Dentro desses delimitadores, você pode colocar qualquer coisa: desde variáveis como nome, expressões aritméticas ou algo mais complexo. É importante notar que essa funcionalidade de incorporação só está disponível dentro de crases (“); outras formas de citação sendo aspas simples ou duplas, não possuem essa capacidade, como abordado anteriormente.

Symbol


É um tipo de dado especial utilizado para criar identificadores únicos para objetos. Enquanto os tipos primitivos como strings e números, podem conter apenas uma única entidade, os objetos são usados para armazenar coleções de dados e entidades mais complexas.

Quando se trata de Symbol, sua principal característica é sua unicidade. Cada elemento criado é único, o que significa que dois elementos nunca serão iguais, mesmo que tenham a mesma descrição. Isso os torna úteis para criar propriedades de objetos que devem ser exclusivas e não entrar em conflito com outras propriedades.

No entanto, os detalhes sobre o tipo de dado em questão geralmente são discutidos após uma compreensão completa de objetos, pois ambos são frequentemente utilizados em conjunto para criar propriedades especiais. Essas propriedades podem ser acessadas e manipuladas de forma distinta das propriedades tradicionais de objetos.

O operador typeof é útil para determinar o tipo de dado de uma variável ou expressão. Quando aplicado, o typeof retornará 'symbol', o que permite identificar facilmente se um valor é ou não um symbol. Isso é útil em situações em que é necessário processar valores de diferentes tipos de maneira distinta ou realizar verificações rápidas de tipo.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

O resultado de typeof null ser um “object” é oficialmente reconhecido como um erro a muito tempo do typeof.

Mas seu uso não ocasionará problemas com o código por si só, apenas quando houver divergência na verificação de tipos. Isso porque, “computacionalmente” falando, null não deveria ser um object mas sim um tipo primitivo próprio. Este é um dos bugs mais famosos do JavaScript, que não teve como ser consertado em versões posteriores pela particularidade do JavaScript de ser uma linguagem interpretada no lado “cliente” da requisição.

Portanto, concluímos “Tipos de dados” imaginando uma caixa de ferramentas. Cada ferramenta na caixa tem um propósito específico e é armazenada de uma maneira particular.

Para cada tipo podemos dizer que:

  1. Number: São como chaves inglesas e parafusos. Por exemplo, você tem a chave inglesa número 10 e o parafuso número 8.
  2. Strings: São como etiquetas ou rótulos em suas ferramentas e usados para identificar ou descrever algo. Por exemplo, você pode ter uma etiqueta com o nome da marca ou algum tipo de rótulo fornecendo informações sobre a ferramenta.
  3. Booleanos: Imagine que você tem um interruptor em cada ferramenta que pode estar ligado (true) ou desligado (false). Por exemplo, você pode ter um interruptor na sua parafusadeira que, quando ativado, permanece em true, e quando desativado, permanece em false.
  4. Null e Undefined: Às vezes, em sua caixa de ferramentas, você pode ter espaços vazios onde deveria haver uma ferramenta, mas ainda não está lá (undefined). Ou você pode ter uma gaveta que está totalmente vazia (null), sem ferramentas dentro dela.
READ MORE

O que é jQuery? Um Tok em umas das bibliotecas JavaScript mais usada da Web

Quer dominar jQuery, mas ainda não está familiarizado com JavaScript? Não se preocupe! Comece sua jornada agora mesmo clicando aqui e descubra como fazer a web ganhar vida!

jQuery – Write Less, Do More

A biblioteca é um projeto da Fundação JavaScript, surgiu como resposta à necessidade de simplificar os scripts interpretados no client-side. Seu objetivo principal é capacitar os desenvolvedores a alcançarem mais com menos esforço, adotando o lema “Write Less, Do More” (Escreva menos, faça mais) como mantra da comunidade.

Com o jQuery, tarefas que normalmente exigiriam longos e complexos blocos de código podem ser simplificadas para uma única linha. Desde a implementação de efeitos visuais dinâmicos até a manipulação de eventos interativos, essa biblioteca possibilita que os desenvolvedores atinjam seus objetivos de forma rápida e eficiente, ao mesmo tempo que promove a escrita de código mais limpo, legível e conciso. Isso resulta em uma compreensão aprimorada do código para todos os envolvidos no projeto.

Demostração

// Em JavaScript puro
var botaoOcultar = document.getElementById('ocultarConteudo');
var conteudoDiv = document.querySelector('.conteudo');

botaoOcultar.addEventListener('click', function() {
  if (conteudoDiv.style.display === 'none') {
    conteudoDiv.style.display = 'block';
  } else {
    conteudoDiv.style.display = 'none';
  }

Minha div .conteudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

// Em jQuery 
$("#ocultarConteudo").click(function() {
  $(".conteudo").toggle();
});

Demostração

Minha div .conteudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Suas principais Funcionalidades

  • Resolução da incompatibilidade entre os navegadores.
  • Redução de código para otimização e desempenho.
  • Reutilização do código através de plugins.
  • Integração com uma vasta quantidade de plugins criados por outros desenvolvedores.
  • Facilidade para acessar e manipular o DOM de forma simplificada.
  • Compatibilidade com AJAX (Asynchronous JavaScript And XML) para comunicação assíncrona com o servidor.
  • Implementação segura de recursos do CSS1, CSS2 e CSS3 para garantir consistência visual e comportamento.
  • Adoção de programação encadeada, em que cada método retorna um objeto, para melhor legibilidade e manutenção do código.

Seletores

No jQuery, os filtros são métodos que permitem selecionar elementos específicos de um conjunto de elementos correspondentes a um seletor. Eles são úteis para refinar a seleção de elementos, permitindo escolher elementos com base em diferentes critérios, como classe, ID, atributos, etc.

$(“*”)Seleciona todos os elementos da página.
$(this)Seleciona o elemento atual que será manipulado dentro de uma função.
$(“p”)Seleciona todas as instâncias da tag < p >.
$(“.example”)Seleciona todos os elementos com a classe “example” aplicada.
$(“[type=’text’]”)Seleciona qualquer elemento com o atributo type aplicado como “text”.
$(“p:first-of-type”)Seleciona o primeiro elemento < p > encontrado na página.

Verifica se pelo menos um dos elementos selecionados possui a classe especificada.

var hasMenuClass = $("#m2").hasClass("menu");

Remove elementos indesejados com base em uma função que retorna true para os elementos desejados e false para os indesejados.

$("p").filter(function(i) {
  return i === 3;
});

Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro.


var ids = $("div").map(function() {
  return $(this).attr("id");
});

Esses são apenas alguns exemplos de filtros que você pode usar no jQuery para interagir com os elementos da página de forma mais simples.


Veja na documentação oficial do jQuery mais exemplos

READ MORE