Você está na página 1de 23

Estrutura do código

A primeira coisa que estudaremos são os blocos de construção do código.

statements
As instruções são construções de sintaxe e comandos que executam ações.

Já vimos uma declaração, alert(Alô, mundo!'), que mostra a mensagem “Alô, Mundo!”.

Podemos ter quantas instruções em nosso código quisermos. As instruções podem ser separadas
por ponto e vírgula.

Por exemplo, aqui dividimos “Alô Mundo” em dois alertas:


alert('Alô'); alert('Mundo');

Normalmente, as instruções são escritas em linhas separadas para tornar o código mais legível:
alert('Alô');
alert('Mundo');

Ponto e vírgula
Um ponto e vírgula pode ser omitido na maioria dos casos quando existe uma quebra de linha.

Isso também funcionaria:


alert('Alô')
alert('Mundo')

Aqui, o JavaScript interpreta a quebra de linha como um ponto e vírgula “implícito”. Isso é


chamado de inserção automática de ponto e vírgula .

Na maioria dos casos, uma nova linha implica um ponto e vírgula. Mas “na maioria dos
casos” não significa “sempre”!

Há casos em que uma nova linha não significa um ponto e vírgula. Por exemplo:
alert(3 +
1
+ 2);

O código é gerado porque o JavaScript não insere ponto e vírgula aqui. É intuitivamente óbvio que
se a linha terminar com um sinal de mais "+", então é uma “expressão incompleta”, então um
ponto e vírgula ali seria incorreto. E neste caso, isso funciona como pretendido.

Mas há situações em que o JavaScript “falha” em assumir um ponto e vírgula onde ele é
realmente necessário.

Erros que ocorrem em tais casos são muito difíceis de encontrar e corrigir.

Um exemplo de erro
Se você está curioso para ver um exemplo concreto de tal erro, confira este código:
alert("Alô");
[1, 2].forEach(alert);

Não há necessidade de pensar sobre o significado dos colchetes  e  ainda. Vamos estudá-los mais
tarde. Por enquanto, lembre-se apenas do resultado da execução do código: ele mostra Alô,
then 1, then 2.

Agora vamos remover o ponto e vírgula após o alert:

alert("Alô")

[1, 2].forEach(alert);

A diferença em relação ao código acima é de apenas um caractere: o ponto e vírgula no final da


primeira linha desapareceu.

Se executarmos esse código, apenas o primeiro será exibido  (e há um erro, talvez seja necessário
abrir o console para vê-lo). Não há mais números.

Isso ocorre porque o JavaScript não assume um ponto e vírgula antes dos
colchetes [...]. Portanto, o código no último exemplo é tratado como uma única instrução.

Veja como o vê isso:


alert("Alô")[1, 2].forEach(alert);

Parece estranho, certo? Essa fusão neste caso é simplesmente errada. Precisamos colocar um


ponto e vírgula depois  para que o código funcione corretamente.

Isso pode acontecer em outras situações também.

Recomendamos colocar ponto e vírgula entre as instruções, mesmo que sejam separadas por
novas linhas. Esta regra é amplamente adotada pela comunidade. Vamos notar mais uma vez
–  deixar de fora o ponto e vírgula na maioria das vezes. Mas é mais seguro – especialmente para
um iniciante – usá-los.

Comentá rios
Com o passar do tempo, os programas tornam-se cada vez mais complexos. Torna-se necessário
adicionar  que descrevam o que o código faz e por quê.

Os comentários podem ser colocados em qualquer lugar de um script. Eles não afetam sua
execução porque o mecanismo simplesmente os ignora.

Os comentários de uma linha começam com dois caracteres de barra //.

O resto da linha é um comentário. Pode ocupar uma linha inteira própria ou seguir uma
declaração.

Como aqui:
// Este comentário ocupa sua própria linha
alert('Alô');
alert('Mundo'); // Este comentário segue a uma declaração

Comentários de várias linhas começam com uma barra e um asterisco /*e terminam com um
asterisco e uma barra */.

Assim:
/* Um exemplo de comentário com duas mensagens.
Este é um comentário de múltiplas linhas.
*/
alert('Alô');
alert('Escola!');

O conteúdo dos comentários é ignorado, portanto, se colocarmos código dentro /* … */de , ele
não será executado.

Às vezes, pode ser útil desabilitar temporariamente uma parte do código:


/* Comentando o código
alert('Alô');
*/
alert(`Turma`);

Use teclas de atalho!


Na maioria dos editores, uma linha de código pode ser comentada pressionando a tecla de atalho
para um comentário de linha única e algo como – para comentários de várias linhas (selecione um
pedaço de código e pressione a tecla de atalho). 
No Visual Studio Code, (selecione antes as linhas de texto a serem comentadas) tecle
simultaneamente CTRL + SHIFT + C e elas serão comentadas com //.

Comentários aninhados não são suportados!


Pode não haver /*...*/dentro de outro /*...*/.

Esse código morrerá com um erro:


/*
/* Este tipo de comentário dentro de outro comentário não é
suportado !?!? */
*/
alert( 'Mundo' );

O modo moderno, "use strict"


Por muito tempo, o JavaScript evoluiu sem problemas de compatibilidade. Novos recursos foram
adicionados ao idioma, enquanto a funcionalidade antiga não foi alterada.

Isso tinha o benefício de nunca quebrar o código existente. Mas a desvantagem era que qualquer
erro ou uma decisão imperfeita feita pelos criadores do JavaScript ficava presa na linguagem para
sempre.
Este foi o caso até 2009, quando o ECMAScript 5 (ES5) apareceu. Ele adicionou novos recursos à
linguagem e modificou alguns dos existentes. Para manter o código antigo funcionando, a
maioria dessas modificações está desativada por padrão. Você precisa habilitá-los
explicitamente com uma diretiva especial: "use strict".

“use strict”
A diretiva se parece com uma string:  ou . Quando está localizado no topo de um script, todo o
script funciona da maneira “moderna”.

Por exemplo:
"use strict";

// Este código trabalha na forma moderna


...

Muito em breve vamos aprender funções (uma forma de agrupar comandos), então vamos
adiantar que  pode ser colocado no início de uma função. Fazer isso habilita o modo estrito
apenas nessa função. Mas geralmente as pessoas o usam para todo o script.

Certifique-se de que esteja no topo


Certifique-se de que  está no topo de seus scripts, caso contrário, o modo estrito pode não ser
ativado.

O modo estrito não está ativado aqui:


alert("some code");
// "use strict" abaixo é ignorado – A declaração precisa esstar no topo
do código.

"use strict";

// O modo estrict não está ativado.

Apenas comentários podem aparecer acima "use strict".

Não há como cancelar use strict


Não há diretiva como "no use strict" essa reverte o mecanismo para o comportamento
antigo.

Uma vez que entramos no modo estrito, não há como voltar atrás.

Console do navegador
Quando você usa um console de desenvolvedor para executar código, observe que ele não
funciona use strict por padrão.

Às vezes, quando use strict faz a diferença, você obtém resultados incorretos.

Então, como realmente use strict no console?


Primeiro, você pode tentar pressionar para inserir várias linhas e colocar em cima, assim:
Shift+Enter use strict

'use strict'; < Shift+Enter para uma nova linha >


// ...seu código
<Tecle Enter para executar>

Funciona na maioria dos navegadores, especificamente Firefox e Chrome.

Se isso não acontecer, por exemplo, em um navegador antigo, há uma maneira feia, mas confiável,
de garantir use strict. Coloque-o dentro deste tipo de wrapper:
(function() {
'use strict';

// ...seu código aqui...


})()

Devemos “use strict”?


A pergunta pode parecer óbvia, mas não é assim.

Pode-se recomendar iniciar scripts com "use strict"… Mas sabe o que é legal?

O JavaScript moderno suporta “classes” e “módulos” – estruturas de linguagem avançadas


(certamente chegaremos a elas), que são habilitadas use strict automaticamente. Portanto, não
precisamos adicionar a diretiva "use strict", se as usarmos.

Então, por enquanto "use strict"; é um convidado bem-vindo no topo de seus


scripts. Mais tarde, quando seu código estiver todo em classes e módulos, você poderá
omiti-lo.

A partir de agora, temos que saber sobre use strict em geral.

Variáveis
Na maioria das vezes, um aplicativo JavaScript precisa trabalhar com informações. Aqui estão dois
exemplos:
1. Uma loja online – as informações podem incluir mercadorias sendo vendidas e um carrinho de compras.
2. Um aplicativo de bate-papo – as informações podem incluir usuários, mensagens e muito mais.

Variáveis são usadas para armazenar essas informações.

Uma variável
Uma variável é um “armazenamento identificado” para dados. Podemos usar variáveis para
armazenar guloseimas, visitantes e outros dados.

Para criar uma variável em JavaScript, use a palavra chave  let.


A instrução abaixo cria (em outras palavras:  ) uma variável com o nome “message”:
let message;

Agora, podemos colocar alguns dados nele usando o operador de atribuição =:


let message;
message = 'Alô'; // store the string 'Alô' in the variable named message

A string agora é salva na área de memória associada à variável. Podemos acessá-lo usando o


nome da variável:
let message;
message = 'Alô!';
alert(message); // shows the variable content

Para ser conciso, podemos combinar a declaração e atribuição da variável em uma única linha:
let message = 'Alô!'; // define the variable and assign the value
alert(message); // Alô!

Também podemos declarar várias variáveis em uma linha:


let usuario = 'John', idade = 25, messagem = 'Alô';
Isso pode parecer mais curto, mas não recomendamos. Por uma questão de melhor legibilidade,
use uma única linha por variável.

A variante de várias linhas é um pouco mais longa, mas mais fácil de ler:
let user = 'John';
let age = 25;
let message = 'Alô';

Algumas pessoas também definem múltiplas variáveis neste estilo multilinha:


let user = 'John',
age = 25,
message = 'Alô';
…Ou mesmo no estilo “vírgula-primeiro”:
let user = 'John'
, age = 25
, message = 'Alô';
Tecnicamente, todas essas variantes fazem a mesma coisa. Então, é uma questão de gosto pessoal
e estética.
Var ao invés de let

Em scripts mais antigos, você também pode encontrar outra palavra-chave: var em vez de let:

var message = 'Alô';

A var palavra-chave é  a mesma que let. Ele também declara uma variável, mas de uma maneira
um pouco diferente, tipo “velha escola”.
Existem diferenças sutis entre let e var, mas elas ainda não importam para nós. Vamos abordá-
los em detalhes no capítulo O velho "var" .

Uma analogia da vida real


Podemos entender facilmente o conceito de “variável” se a imaginarmos como uma “caixa” de
dados, com um adesivo com um nome exclusivo.

Por exemplo, a variável message pode ser imaginada como uma caixa rotulada "message"com o
valor "Alô!"nela:

Podemos colocar qualquer valor na caixa.

Também podemos alterá-lo quantas vezes quisermos:


let message;
message = 'Alô!';
message = 'Mundo!'; // valor alterado
alert(message);

Quando o valor é alterado, os dados antigos são removidos da variável:

Também podemos declarar duas variáveis e copiar dados de uma para a outra.
let Alô = 'Alô Mundo!';
let message;
// copia 'Alô Mundo' de Alô para dentro de message
message = Alô;

// agora duas variáveis pegam os mesmos dados


alert(Alô); // Alô Mundo!
alert(message); // Alô Mundo!

Declarar duas vezes aciona um erro

Uma variável deve ser declarada apenas uma vez.

Uma declaração repetida da mesma variável é um erro:


let message = "Tarefa atrasada!";
// repetir 'let' gera um erro
let message = "Tarefa atualizada!"; // SyntaxError: 'message' has
already been declared

Portanto, devemos declarar uma variável uma vez e depois nos referir a ela sem let.

Nomenclatura de variável
Existem duas limitações em nomes de variáveis em JavaScript:
1. O nome deve conter apenas letras, dígitos ou os símbolos  $ e _.
2. O primeiro caractere não deve ser um dígito.
Exemplos de nomes válidos:
let userName;
let test123;

Quando o nome contém várias palavras, camelCase é comumente usado. Ou seja: as palavras vão
uma após a outra, cada palavra exceto a primeira começando com uma letra maiúscula: 
minhaVariávelDeNomeMuitoLongo.

O que é interessante – o cifrão '$'e o sublinhado '_' também podem ser usados em nomes. 


São símbolos regulares, assim como as letras, sem nenhum significado especial.

Estes nomes são válidos:


let $ = 1; // foi declarada uma variavel com o nome "$"
let _ = 2; // a variável agora, tem o nome "_"

alert($ + _); // 3

Exemplos de nomes de variáveis incorretos:


let 1a; // não pode iniciar com dígito
let my-name; // hifens '-' também não é permitido no nome.

JavaScript é case-sensitive

Variáveis nomeadas apple e AppLE são duas variáveis diferentes.

Letras não latinas são permitidas, mas não recomendadas

É possível usar qualquer idioma, incluindo letras cirílicas ou até hieróglifos, assim:
let имя = '...';
let 我 = '...';
Tecnicamente, não há nenhum erro aqui. Esses nomes são permitidos, mas existe uma
convenção internacional para usar o inglês em nomes de variáveis. Mesmo se estivermos
escrevendo um roteiro pequeno, ele pode ter uma longa vida pela frente. Pessoas de outros países
podem precisar lê-lo algum tempo.
Palavras reservadas

Existe uma lista de palavras reservadas , que não podem ser usadas como nomes de variáveis
porque são usadas pela própria linguagem.

Por exemplo: let, class, return e function são reservados.

O código abaixo dá um erro de sintaxe:


let let = 5; // Erro: o nome let da variável é palavra reservada!
let return = 5; // Também não pode nomear variável com return: erro!
Uma missão sem use strict

Normalmente, precisamos definir uma variável antes de usá-la. Mas antigamente era tecnicamente
possível criar uma variável por uma mera atribuição do valor sem usar let. Isso ainda funciona
agora se não colocarmos use strict nossos scripts para manter a compatibilidade com scripts
antigos.
// nota: não defina "use strict" neste exemplo
num = 5; // a variável num é criada se ainda não existe
alert(num); // 5

Esta é uma prática ruim e causaria um erro no modo estrito:


"use strict";

num = 5; // error: num não foi definido

Constantes
Para declarar uma variável constante (imutável), use const em vez de let:

const myBirthday = '18.04.1982';


Variáveis declaradas usando constsão chamadas de “constantes”. Eles não podem ser
reatribuídos. Uma tentativa de fazer isso causaria um erro:
const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // erro. Não pode reatribuir à constante!

Quando um programador tem certeza de que uma variável nunca mudará, ele pode declará-
la constpara garantir e comunicar claramente esse fato a todos.

Constantes maiúsculas

Existe uma prática generalizada de usar constantes como aliases para valores difíceis de lembrar
que são conhecidos antes da execução.

Tais constantes são nomeadas usando letras maiúsculas e sublinhados.

Por exemplo, vamos fazer constantes para cores no chamado formato “web” (hexadecimal):
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color


let color = COLOR_ORANGE;
alert(color); // #FF7F00

Benefícios:
 COLOR_ORANGE é muito mais fácil de lembrar do que "#FF7F00".
 É muito mais fácil digitar errado "#FF7F00" do que COLOR_ORANGE.
 Ao ler o código, COLOR_ORANGE é muito mais significativo do que  #FF7F00.

Quando devemos usar maiúsculas para uma constante e quando devemos nomeá-la
normalmente? Vamos deixar isso claro.

Ser uma “constante” significa apenas que o valor de uma variável nunca muda. Mas há constantes
que são conhecidas antes da execução (como um valor hexadecimal para vermelho) e há
constantes que são  em tempo de execução, durante a execução, mas não mudam após sua
atribuição inicial.

Por exemplo:
const pageLoadTime = /* tempo que uma pagina leva pra carregar */;

O valor de pageLoadTime não é conhecido antes do carregamento da página, por isso é


nomeado normalmente. Mas ainda é uma constante porque não muda após a atribuição.
Em outras palavras, as constantes nomeadas em maiúsculas são usadas apenas como aliases para
valores “codificados permanentemente”.

Nomeie as coisas corretamente


Falando em variáveis, há mais uma coisa extremamente importante.

Um nome de variável deve ter um significado claro e óbvio, descrevendo os dados que ela
armazena.

A nomenclatura de variáveis é uma das habilidades mais importantes e complexas na


programação. Uma rápida olhada nos nomes das variáveis pode revelar qual código foi escrito por
um iniciante versus um desenvolvedor experiente.

Em um projeto real, a maior parte do tempo é gasto modificando e estendendo uma base de
código existente, em vez de escrever algo completamente separado do zero. Quando voltamos a
algum código depois de fazer outra coisa por um tempo, é muito mais fácil encontrar informações
bem rotuladas. Ou, em outras palavras, quando as variáveis têm bons nomes.

Por favor, gaste algum tempo pensando no nome correto para uma variável antes de declará-
la. Fazer isso irá recompensá-lo generosamente.

Algumas regras boas de seguir são:


Use nomes legíveis como userName ou shoppingCart.
 Fique longe de abreviações ou nomes curtos como a, b, c, a menos que você realmente saiba o que
está fazendo.
 Faça nomes extremamente descritivos e concisos. Exemplos de nomes ruins são data e value. Tais
nomes não dizem nada. Não há problema em usá-los se o contexto do código tornar excepcionalmente
óbvio quais dados ou valores a variável está referenciando.
 Concorde com os termos dentro de sua equipe e em sua própria mente. Se um visitante do site for
chamado de “usuário”, devemos nomear variáveis relacionadas currentUser ou newUser em vez
de currentVisitor ou newManInTown.
Parece simples? Na verdade, é, mas criar nomes de variáveis descritivos e concisos na prática não
é. Vá em frente.
Reutilizar ou criar?

E a última nota. Existem alguns programadores preguiçosos que, em vez de declarar novas


variáveis, tendem a reutilizar as já existentes.

Como resultado, suas variáveis são como caixas nas quais as pessoas jogam coisas diferentes sem
trocar seus adesivos. O que há dentro da caixa agora? Quem sabe? Precisamos nos aproximar e
verificar.

Esses programadores economizam um pouco na declaração de variáveis, mas perdem dez vezes
mais na depuração.

Uma variável extra é boa, não má.

Os minificadores e navegadores JavaScript modernos otimizam o código o suficiente para não


criar problemas de desempenho. Usar variáveis diferentes para valores diferentes pode até ajudar
o mecanismo a otimizar seu código.

Resumo
Podemos declarar variáveis para armazenar dados usando as palavras-chave var, let ou const.

 let – é uma declaração de variável moderna.


 var – é uma declaração de variável antiga. Normalmente não o usamos, mas abordaremos diferenças
sutis letno capítulo O antigo "var" , caso você precise delas.
 const – é como let, mas o valor da variável não pode ser alterado.

As variáveis devem ser nomeadas de uma maneira que nos permita entender facilmente o que
está dentro delas.

Tarefas
Trabalhando com variáveis

1. Declare duas variáveis: admin e name.


2. Atribua o valor "John" a name.
3. Copie o valor de name para admin.
4. Mostre o valor de admin usando  alert (deve produzir “John”).
Solução

Dando o nome certo


1. Crie uma variável com o nome do nosso planeta. Como você nomearia tal variável?
2. Crie uma variável para armazenar o nome de um visitante atual de um site. Como você nomearia essa
variável?
solução
Const em maiúsculas?

Examine o seguinte código:

const birthday = '18.04.1982';

const age = someCode(birthday);

Aqui temos uma birthday data constante e o age é calculado birthday com a ajuda de


algum código (não é fornecido por brevidade e porque os detalhes não importam aqui).

Seria correto usar maiúsculas para birthday? Para age? Ou mesmo para ambos?


const BIRTHDAY = '18.04.1982'; // make uppercase?

const AGE = someCode(BIRTHDAY); // make uppercase?

Tipos de dados
Um valor em JavaScript é sempre de um determinado tipo. Por exemplo, uma string ou um
número.

Existem oito tipos de dados básicos em JavaScript. Aqui, vamos abordá-los em geral e nos
próximos capítulos vamos falar sobre cada um deles em detalhes.

Podemos colocar qualquer tipo em uma variável. Por exemplo, uma variável pode em um
momento ser uma string e então armazenar um número:
// no error
let message = "Alô";
message = 123456;

As linguagens de programação que permitem tais coisas, como JavaScript, são chamadas de
“tipadas dinamicamente”, o que significa que existem tipos de dados, mas as variáveis não estão
vinculadas a nenhum deles.

Number
let n = 123;
n = 12.345;
O tipo de  representa números inteiros e de ponto flutuante.

Existem muitas operações para números, por exemplo, multiplicação *, divisão /, adição +,
subtração - e assim por diante.

Além dos números regulares, existem os chamados “valores numéricos especiais” que também
pertencem a este tipo de dados: Infinity, -Infinity e NaN.
 Infinity representa o infinito matemático ∞. É um valor especial que é maior que qualquer
número.

Podemos obtê-lo como resultado da divisão por zero:


alert( 1 / 0 ); // Infinity

Ou apenas referenciá-lo diretamente:


alert( Infinity ); // Infinity
 NaN representa um erro computacional. É resultado de uma operação matemática incorreta ou
indefinida, por exemplo:
alert( "not a number" / 2 ); // NaN, esta divisão não é lógica

NaN é pegajoso. Qualquer outra operação matemática sobre NaN retornos NaN:

alert( NaN + 1 ); // NaN


alert( 3 * NaN ); // NaN
alert( "not a number" / 2 - 1 ); // NaN
Portanto, se houver um NaN em algum lugar em uma expressão matemática, ela se propaga para
todo o resultado (há apenas uma exceção a isso:  NaN ** 0 é 1).

Operações matemáticas são seguras

Fazer matemática é “seguro” em JavaScript. Podemos fazer qualquer coisa: dividir por zero, tratar
strings não numéricas como números, etc.

O script nunca irá parar com um erro fatal (“morrer”). Na pior das hipóteses, teremos NaN
como resultado.

Valores numéricos especiais pertencem formalmente ao tipo “número”. Claro que não são
números no sentido comum desta palavra.

BigInt
Em JavaScript, o tipo “number” não pode representar valores inteiros maiores que (253-1) (isto
é  9007199254740991), ou menores que -(253-1)para negativos. É uma limitação técnica
causada por sua representação interna.

Para a maioria dos propósitos, isso é suficiente, mas às vezes precisamos de números realmente
grandes, por exemplo, para criptografia ou carimbos de data e hora com precisão de
microssegundos.

O tipo BigInt foi adicionado recentemente à linguagem para representar inteiros de


comprimento arbitrário.

Um valor BigInt é criado anexando n ao final de um inteiro:

// o "n" ao final significa que é um a BigInt


const bigInt = 1234567890123456789012345678901234567890n;
Como os números BigInt raramente são necessários, não os abordamos aqui, mas dedicamos a
eles um capítulo separado BigInt . Leia-o quando precisar de números tão grandes.
Problemas de compatibilidade

No momento, BigInt é suportado no Firefox/Chrome/Edge/Safari, mas não no IE.

Você pode verificar a tabela de compatibilidade do  BigInt para saber quais versões de um


navegador são suportadas.

String
Uma string em JavaScript deve estar entre aspas.
let str = "Alô";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

Em JavaScript, existem 3 tipos de citações.


1. Aspas duplas: "Alô".
2. Aspas simples: 'Alô'.
3. Crase: `Alô`.

Aspas simples e duplas são aspas “simples”. Praticamente não há diferença entre eles em
JavaScript.

Crase são citações de “funcionalidade estendida”. Eles nos permitem incorporar variáveis e


expressões em uma string envolvendo-as em ${…}, por exemplo:

let nome = "João";

// incorporado à variavel
alert( `Alô, ${nome}!` ); // Alô, João!

// incorporado na expressão
alert( `o resultado é ${1 + 2}` ); // o resultado é 3

A expressão interna ${…} é avaliada e o resultado se torna parte da string. Podemos colocar


qualquer coisa lá: uma variável como nome ou uma expressão aritmética como 1 + 2 ou algo
mais complexo.

Observe que isso só pode ser feito em crases. Outras cotações não têm essa funcionalidade de
incorporação!
alert( "o resultado é ${1 + 2}" ); // o resultado é ${1 + 2} (aspas
duplas não dá resultado)

Não há tipo de caractere .


Em alguns idiomas, existe um tipo especial de “caractere” para um único caractere. Por exemplo,
na linguagem C e em Java é chamado de “char”.

Em JavaScript, não existe esse tipo. Só existe um tipo: string. Uma string pode consistir em zero
caracteres (estar vazio), um caractere ou muitos deles.

Booleano (tipo lógico)


O tipo booleano tem apenas dois valores: true e false.

Este tipo é comumente usado para armazenar valores sim/não: true significa “sim, correto”
e false significa “não, incorreto”.

Por exemplo:
let campoNomeChecado = true; // sim, o campo nome está checado
let campoIdadeChecado = false; // não, o campo nome não esta checado

Os valores booleanos também vêm como resultado de comparações:


let maior = 4 > 1;
alert( maior ); // true (A comparação do resultado é "yes")

Abordaremos os booleanos mais profundamente no capítulo Operadores lógicos .

O valor “nulo”
O valor null especial não pertence a nenhum dos tipos descritos acima.

Ele forma um tipo separado próprio que contém apenas o valor null:

let idade = null;

Em JavaScript, null não é uma “referência a um objeto inexistente” ou um “ponteiro nulo” como


em algumas outras linguagens.

É apenas um valor especial que representa “nada”, “vazio” ou “valor desconhecido”.

O código acima indica que idade é desconhecido.

O valor “indefinido”
O valor especial undefined também se destaca. Faz um tipo próprio, assim como null.

O significado de undefined é “valor não atribuído”.

Se uma variável é declarada, mas não atribuída, seu valor é undefined:

let idade;
alert(idade); // mostra "undefined"

Tecnicamente, é possível atribuir explicitamente undefined a uma variável:


let idade = 100;

// altera o valor para undefined


idade = undefined;
alert(idade); // "undefined"

…Mas não recomendamos fazer isso. Normalmente, null costuma-se atribuir um valor “vazio” ou
“desconhecido” a uma variável, enquanto undefined é reservado como valor inicial padrão para
coisas não atribuídas.

Objetos e Símbolos
O tipo object é especial.

Todos os outros tipos são chamados de “primitivos” porque seus valores podem conter apenas
uma única coisa (seja uma string ou um número ou qualquer outra coisa). Em contraste, os objetos
são usados para armazenar coleções de dados e entidades mais complexas.

Sendo tão importante, os objetos merecem um tratamento especial. Nós vamos lidar com eles
mais tarde no capítulo Objetos , depois que aprendermos mais sobre primitivas.

O tipo symbol é usado para criar identificadores exclusivos para objetos. Temos que mencioná-lo
aqui por uma questão de completude, mas também adiar os detalhes até conhecermos os objetos.

O tipo de operador
O operador typeof retorna o tipo do argumento. É útil quando queremos processar valores de
tipos diferentes de forma diferente ou apenas queremos fazer uma verificação rápida.

Uma chamada para typeof x retorna uma string com o nome do 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)

As últimas três linhas podem precisar de explicação adicional:


1. Math é um objeto interno que fornece operações matemáticas. 
2. O resultado de typeof null é "object". Esse é um erro oficialmente reconhecido no typeof, vindo
dos primeiros dias do JavaScript e mantido para compatibilidade. Definitivamente, null não é um
objeto. É um valor especial com um tipo separado próprio. O comportamento de typeof está errado
aqui.
3. O resultado de typeof alert é "function", porque alert é uma função.  As funções pertencem ao
tipo de objeto. Mas os typeof trata de forma diferente, retornando "function". Isso também vem dos
primeiros dias do JavaScript. Tecnicamente, tal comportamento não é correto, mas pode ser conveniente na
prática.

A sintaxe typeof(x)
Você também pode encontrar outra sintaxe: typeof(x). É o mesmo que typeof x.

Para deixar claro: typeof é um operador, não uma função. Os parênteses aqui não fazem parte
de typeof. É o tipo de parênteses usado para agrupamento matemático.

Normalmente, esses parênteses contêm uma expressão matemática, como (2 + 2), mas aqui
eles contêm apenas um argumento (x). Sintaticamente, eles permitem evitar um espaço entre
o typeofoperador e seu argumento, e algumas pessoas gostam disso.

Algumas pessoas preferem typeof(x), embora a sintaxe typeof x seja muito mais comum.

Resumo
Existem 8 tipos de dados básicos em JavaScript.
 Number para números de qualquer tipo: inteiro ou ponto flutuante, os inteiros são limitados por 
±(253-1)
 Bigint é para números inteiros de comprimento arbitrário.
 String para cordas. Uma string pode ter zero ou mais caracteres, não há um tipo de caractere único
separado.
 Boolean para true/ false.
 Null para valores desconhecidos – um tipo autônomo que tem um único valor null.
 Undefined para valores não atribuídos – um tipo autônomo que tem um único valor undefined.
 Object para estruturas de dados mais complexas.
 Symbol para identificadores exclusivos.

O operador typeof nos permite ver qual tipo está armazenado em uma variável.

 Geralmente usado como typeof x, mas typeof(x) também é possível.


 Retorna uma string com o nome do tipo, como "string".
 Para retornos  null "object" – isso é um erro na linguagem, não é realmente um objeto.

Nos próximos capítulos, vamos nos concentrar nos valores primitivos e, quando estivermos
familiarizados com eles, passaremos para os objetos.

Tarefas
Aspas de string
importância: 5

Qual é a saída do script?

let name = "Ilya";


alert( `Alô ${1}` ); // ?
alert( `Alô ${"name"}` ); // ?
alert( `Alô ${name}` ); // ?

Interaçã o: alerta, prompt, confirm


Como usaremos o navegador como nosso ambiente de demonstração, vamos ver algumas
funções para interagir com o usuário: alert, prompt e confirm.

alerta
Esse nós já vimos. Ele mostra uma mensagem e espera que o usuário pressione “OK”.

Por exemplo:
alert("Alô");

Uma mini-janela com uma mensagem é chamada de  janela modal. A palavra “modal” significa
que o visitante não pode interagir com o resto da página, pressionar outros botões, etc, até que
tenha lidado com a janela. Neste caso – até que eles pressionem “OK”.

prompt
A função prompt aceita dois argumentos:

result = prompt(title, [default]);


Mostra uma janela modal com uma mensagem de texto, um campo de entrada para o visitante e
os botões OK/Cancelar.
title

O texto que será mostrado ao usuário.

default

Um segundo parâmetro opcional, o valor inicial para o campo de entrada.

Os colchetes na sintaxe[...]
Os colchetes default na sintaxe acima indicam que o parâmetro é opcional, não obrigatório.

O visitante pode digitar algo no campo de entrada de prompt e pressionar OK. Em seguida,
obtemos esse texto no arquivo result. Ou eles podem cancelar a entrada pressionando
Cancelar ou pressionando a tecla  Esc , então obtemos null como o result.

A chamada para prompt retorna o texto do campo de entrada ou null se a entrada foi


cancelada.

Por exemplo:
let idade = prompt(Quanto anos você tem?', 100);
alert(`Você tem ${idade} anos!`); // Você tem 100 anos!

No Internet Explorer: forneça sempre um default

O segundo parâmetro é opcional, mas se não for fornecido, o Internet Explorer inserirá o
texto "undefined" no prompt.

Execute este código no Internet Explorer para ver:


let teste = prompt("Teste");
Portanto, para que os prompts tenham uma boa aparência no IE, recomendamos sempre fornecer
o segundo argumento:
let teste = prompt("Teste", ''); // <-- for IE

confirm
A sintaxe: result = confirm (question);

A função confirm mostra uma janela modal com um question e dois botões: OK e Cancelar.

O resultado é true se OK for pressionado e false caso contrário.

Por exemplo:
let ehChefe = confirm("Você é o chefe?");
alert(ehChefe); // true se OK for pressionado.

Resumo
Cobrimos 3 funções específicas do navegador para interagir com os visitantes:
alert

mostra uma mensagem.

prompt

mostra uma mensagem pedindo ao usuário para inserir texto. Retorna o texto ou, se o botão Cancelar
ou  Esc for clicado, null.

confirm

mostra uma mensagem e espera que o usuário pressione “OK” ou “Cancelar”. Retorna true para
OK e false para Cancel/ Esc.

Todos esses métodos são modais: eles pausam a execução do script e não permitem que o
visitante interaja com o restante da página até que a janela seja descartada.

Existem duas limitações compartilhadas por todos os métodos acima:


1. A localização exata da janela modal é determinada pelo navegador. Normalmente, fica no centro.
2. A aparência exata da janela também depende do navegador. Não podemos modificá-lo.

Esse é o preço da simplicidade. Existem outras maneiras de mostrar janelas mais agradáveis e


interação mais rica com o visitante, mas se “sinos e assobios” não importam muito, esses métodos
funcionam bem.

Tarefas
Uma página simples
importância: 4

Crie uma página da Web que solicite um nome e o gerencie.

Execute a demonstração

Conversõ es de tipo
Na maioria das vezes, operadores e funções convertem automaticamente os valores dados a eles
para o tipo correto.

Por exemplo, alertconverte automaticamente qualquer valor em uma string para mostrá-lo. As


operações matemáticas convertem valores em números.

Há também casos em que precisamos converter explicitamente um valor para o tipo esperado.

Ainda não falando sobre objetos


Neste capítulo, não abordaremos objetos. Por enquanto, falaremos apenas sobre primitivos.

Mais tarde, depois de aprendermos sobre objetos, no capítulo Conversão de objetos para


primitivos veremos como os objetos se encaixam.

Conversão de String
A conversão de string acontece quando precisamos da forma de string de um valor.

Por exemplo, alert(value) faz isso para mostrar o valor.

Também podemos chamar a função String(value) para converter um valor em uma string:

let valor = true;


alert(typeof valor); // boolean

valor = String(valor); // agora o valor é string "true"


alert(typeof valor); // string

A conversão de strings é principalmente óbvia. A false torna -se "false", null torna -


se "null", etc.
Conversão Numérica
A conversão numérica acontece em funções e expressões matemáticas automaticamente.

Por exemplo, quando a divisão /é aplicada a não números:


alert( "6" / "2" ); // 3, strings are converted to numbers

Podemos usar a função Number(value) para converter explicitamente um valor em um


número:
let str = "123";
alert(typeof str); // string
let num = Number(str); // torna-se um numero 123
alert(typeof num); // number

A conversão explícita geralmente é necessária quando lemos um valor de uma fonte baseada em
string, como um formulário de texto, mas esperamos que um número seja inserido.

Se a string não for um número válido, o resultado dessa conversão será NaN. Por exemplo:

let idade = Number(" uma string arbitrária ao invés de um número");


alert(idade); // NaN, conversão falhou

Regras de conversão numérica:


Valor Torna-se…
undefined NaN
null 0
true and false 1e0
Os espaços em branco do início e do fim são removidos. Se a string restante estiver vazia
string
resultado será 0. Caso contrário, o número é “lido” da string. Um erro dá NaN.
Exemplos:
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN (erro de leitura em "z")
alert( Number(true) ); // 1
alert( Number(false) ); // 0

Observe isso null e undefined se comporte de maneira diferente aqui: null torna-se zero


enquanto undefined torna -se NaN.

A maioria dos operadores matemáticos também realiza essa conversão, veremos isso no próximo
capítulo.

Conversão booleana
A conversão booleana é a mais simples.

Isso acontece em operações lógicas (mais tarde conheceremos testes de condição e outras coisas
semelhantes), mas também pode ser executado explicitamente com uma chamada
para Boolean(value).
A regra de conversão:

 Valores que são intuitivamente “vazios”, como 0, uma string vazia, null, undefined, e NaN,
tornam-se false.
 Outros valores se tornam true.

Por exemplo:
alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("Alô") ); // true


alert( Boolean("") ); // false

Observe: a string com zero "0"étrue


Algumas linguagens (nomeadamente PHP) tratam "0" como false. Mas em JavaScript, uma
string não vazia é sempre true.

alert( Boolean("0") ); // true


alert( Boolean(" ") ); // espaços, também true (qualquer string não
vazia é true)

Resumo
As três conversões de tipo mais usadas são para string, para número e para booleano.

String Conversion
Ocorre quando produzimos algo. Pode ser realizado com String(value). A conversão para
string geralmente é óbvia para valores primitivos.

Numeric Conversion
Ocorre em operações matemáticas. Pode ser realizado com Number(value).

A conversão segue as regras:


Valor Torna-se…
Undefined NaN
Null 0
true / false 1/0
A string é lida “como está”, os espaços em branco de ambos os lados são ignorados. 
String
Uma string vazia se torna 0. Um erro dá NaN.
Boolean Conversion
Ocorre em operações lógicas. Pode ser realizado com Boolean(value).

Segue as regras:
Valor Torna-se…
0, null, undefined, NaN,"" false
qualquer outro valor true
A maioria dessas regras são fáceis de entender e memorizar. As exceções notáveis em que as
pessoas geralmente cometem erros são:

 Undefined é NaN como um número, não 0.


 "0"e strings somente de espaço como " " são verdadeiras como booleanas.

Os objetos não são abordados aqui. Voltaremos a eles mais tarde no capítulo Conversão de


objetos para primitivos que é dedicada exclusivamente a objetos depois de aprendermos coisas
mais básicas sobre JavaScript.

Você também pode gostar