Tipos de dados JavaScript

Índice

    Mostrar índice

JavaScript tem 8 tipos de dados

1. Cadeia
2. Número
3. Bigint
4. Booleano
5. Indefinido
6. Nulo
7. Símbolo
8. Objeto

O tipo de dados do objeto

O tipo de dados do objeto pode conter:

1. Um objeto
2. Uma matriz
3. Um encontro

Exemplos

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

Observação

Uma variável JavaScript pode conter qualquer tipo de dados.

O conceito de tipos de dados

Na programação, os tipos de dados são um conceito importante.

Para poder operar com variáveis, é importante saber algo sobre o tipo.

Sem tipos de dados, um computador não pode resolver isso com segurança:

let x = 16 + "Volvo";

Faz algum sentido adicionar “Volvo” aos dezesseis? Será que produzirá um erro ou produzirá um resultado?

JavaScript tratará o exemplo acima como:

let x = "16" + "Volvo";

Observação

Ao adicionar um número e uma string, o JavaScript tratará o número como um corda.

Exemplo

let x = 16 + "Volvo";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Exemplo

let x = "Volvo" + 16;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a string and a number, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript avalia expressões da esquerda para a direita. Diferentes sequências podem produzir resultados diferentes:

JavaScript:

let x = 16 + 4 + "Volvo";

Resultado:

20Volvo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript:

let x = "Volvo" + 16 + 4;

Resultado:

Volvo164

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

No primeiro exemplo, o JavaScript trata 16 e 4 como números, até chegar a “Volvo”.

No segundo exemplo, como o primeiro operando é uma string, todos os operandos são tratados como strings.

Os tipos de JavaScript são dinâmicos

JavaScript possui tipos dinâmicos. Isso significa que a mesma variável pode ser usada segurar diferentes tipos de dados:

Exemplo

let x;       // Now x is undefined
x = 5;       // Now x is a Number
x = "John";  // Now x is a String

Sequências JavaScript

Uma string (ou string de texto) é uma série de caracteres como "John Doe".

Strings são escritas entre aspas. Você pode usar aspas simples ou duplas:

Exemplo

// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:
let carName2 = 'Volvo XC60';

Você pode usar aspas dentro de uma string, desde que elas não correspondam às aspas ao redor da string:

Exemplo

// Single quote inside double quotes:
let answer1 = "It's alright";
 

// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';

Você aprenderá mais sobre strings posteriormente neste tutorial.

Números JavaScript

Todos os números JavaScript são armazenados como números decimais (ponto flutuante).

Os números podem ser escritos com ou sem decimais:

Exemplo

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34;

Notação exponêncial

Números extra grandes ou extra pequenos podem ser escritos com métodos científicos (notação exponêncial:

Exemplo

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

Observação

A maioria das linguagens de programação possui muitos tipos de números:

Números inteiros (inteiros):
byte (8 bits), curto (16 bits), int (32 bits), longo (64 bits)

Números reais (ponto flutuante):
float (32 bits), duplo (64 bits).

Os números Javascript são sempre de um tipo:
double (ponto flutuante de 64 bits).

Você aprenderá mais sobre números posteriormente neste tutorial.

JavaScript BigInt

Todos os números JavaScript são armazenados em formato de ponto flutuante de 64 bits.

JavaScript BigInt é um novo tipo de dados (ES2020) que pode ser usado para armazenar valores inteiros grandes demais para serem representados por um número JavaScript normal.

Exemplo

let x = BigInt("123456789012345678901234567890");

Você aprenderá mais sobre BigInt posteriormente neste tutorial.

Booleanos JavaScript

Os booleanos só podem ter dois valores: true ou false.

Exemplo

let x = 5;
let y = 5;
let z = 6;
(x == y)       
  // Returns true
(x == z)       // Returns 
  false

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 5;
let z = 6;

document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

Booleanos são frequentemente usados em testes condicionais.

Você aprenderá mais sobre booleanos posteriormente neste tutorial.

Matrizes JavaScript

Matrizes JavaScript são escritas entre colchetes.

Os itens da matriz são separados por vírgulas.

O código a seguir declara (cria) um array chamado cars, contendo três itens (nomes de carros):

Exemplo

const cars = ["Saab", "Volvo", "BMW"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>
const cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Os índices de array são baseados em zero, o que significa que o primeiro item é [0], o segundo é [1], e assim por diante.

Você aprenderá mais sobre arrays posteriormente neste tutorial.

Objetos JavaScript

Objetos JavaScript são escritos com chaves {}.

Objeto propriedades são escritas como pares nome:valor, separados por vírgulas.

Exemplo

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

O objeto (pessoa) no exemplo acima possui 4 propriedades: firstName, sobrenome, idade e cor dos olhos.

Você aprenderá mais sobre objetos posteriormente neste tutorial.

O tipo de Operador

Você pode usar o operador JavaScript typeof para encontrar o tipo de uma variável JavaScript.

O operador typeof retorna o tipo de uma variável ou expressão:

Exemplo

typeof ""             // Returns 
 "string"
typeof "John"         // Returns 
 "string"
typeof "John Doe"     // Returns 
 "string"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>

Exemplo

typeof 0              // Returns 
 "number"
  typeof 314            // Returns 
 "number"
  typeof 3.14           // Returns 
 "number"
  typeof (3)            // Returns 
 "number"
typeof (3 + 4)        // Returns 
 "number"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>

</body>
</html>

Você aprenderá mais sobre typeof posteriormente neste tutorial.

Indefinido

Em JavaScript, uma variável sem valor tem o valor indefinido. O tipo também é indefinido.

Exemplo

let car;    // Value is undefined, 
    type is undefined

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html>

Qualquer variável pode ser esvaziada, definindo o valor como indefinido. O tipo também será indefinido.

Exemplo

   car = undefined;    // Value is undefined, 
    type is undefined

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car = "Volvo";
car = undefined;

document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>

</body>
</html>

Valores vazios

Um valor vazio não tem nada a ver com indefinido.

Uma string vazia possui um valor legal e um tipo.

Exemplo

let car = "";    // The value is  "", the typeof is "string"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>