O objetivo deste manual é apresentar rapidamente os conceitos básicos do JavaScript para que você possa começar a programar aplicativos.

Em vez de abordar todas as teorias e conceitos de JavaScript, ensinamos apenas os blocos de construção mais importantes da linguagem. Abordaremos aspectos como variáveis, tipos de dados, funções, objetos, arrays e classes. Você também aprenderá a combinar tudo isso para criar um programa pequeno, porém sólido.

Também deixaremos de fora HTML, CSS e o uso de JavaScript no navegador. Este tutorial se concentra apenas em JavaScript como linguagem de programação e usa o terminal para executar o código.

Este tutorial também tem exercícios para cada seção, o que lhe dá tempo para praticar o que aprendeu e "gravar" o conhecimento em seu cérebro.

Este manual é totalmente gratuito aqui nesta página. Se você quiser a  versão Kindle ou impressa deste tutorial  , pode pagar uma pequena taxa. Isso me ajudará a criar um tutorial de JavaScript aprofundado que ajudará você a construir um aplicativo web completo.

Índice

• 1 - Introdução ao JavaScript
  • Para que você aprenda JavaScript
  • JavaScript vs Java
• 2 - Como configurar seu computador
  • Como instalar o VSCode
  • Como instalar o Node.js
• 3 - Introdução rápida ao console
• 4 - Hora de dizer Olá, mundo!
• 5 - Estrutura do código JavaScript
  • Declarações
  • Comentários
  • Fluxo de execução
  • Exercício #1
• 6 - Variáveis JavaScript
  • Nomenclatura de variáveis
  • Variável constante
  • A palavra-chave var
  • Exercício #2
  • Resumo
• 7 - Tipos básicos de dados em JavaScript
  • Strings em JavaScript
  • Números (inteiros e flutuantes) em JavaScript
  • Booleanos em JavaScript
  • Indefinido em JavaScript
  • Nulo em JavaScript
• 8 - Conversão de tipo e coerção
  • Tipo coerção
  • Regras de coerção de tipo
  • Por que você deve evitar a coerção de tipo
• 9 - Operadores em JavaScript
  • Operadores aritméticos
  • O operador de destino
  • Os operadores de comparação
  • Operadores lógicos
  • O operador typeof
  • Exercício #3
• 10 - Matrizes JavaScript
  • Posição do índice da matriz
  • Métodos especiais para manipulação de arrays
  • Exercício #4
• 11 - Fluxos de Controle (Condicionais) em JavaScript
  • Uma instrução if...else
  • Um switch de instrução...case
  • O corpo da instrução switch
  • Casos de uso da instrução Switch
  • Exercício #5
• 12 - Fluxos de Controle (Loops) em JavaScript
  • Uma declaração para
  • Quando usar o loop for?
  • Uma instrução enquanto
  • Quando usar o loop while?
  • Exercício #6
• 13 - Funções em JavaScript
  • Como criar sua própria função
  • Parâmetros e argumentos da função
  • Parâmetros padrão
  • Parâmetros padrão e nulo
  • A declaração de retorno
  • Escopo de variável
  • O parâmetro de descanso
  • Função de seta
  • Funções de seta simples e multilinha
  • Função de seta sem parênteses arredondadas
  • A função de seta não possui argumentos de vinculação
  • Como converter uma função normal em uma função de seta facilmente
  • Exercício #7
• 14 - Objetos em JavaScript
  • Como acessar valores de objetos
  • Como adicionar uma nova propriedade ao objeto
  • Como modificar propriedades de objetos
  • Como excluir propriedades de objetos
  • Como verificar se existe uma propriedade em um objeto
  • Exercício #8
• Exercício final: construir uma caixa registradora
• Conclusão
• Soluções

1 - Introdução ao JavaScript

O JavaScript foi criado em abril de 1995 por Brendan Eich. Na época, ele trabalhou no desenvolvimento de um navegador para uma empresa chamada Netscape. Foi-lhe dito que ele tinha apenas 10 dias para projetar e codificar um protótipo funcional de uma linguagem de programação que pudesse rodar no navegador.

Ele conseguiu criar uma linguagem que atrai programadores não profissionais, como o Microsoft Visual Basic.

O motivo pelo qual ele recebeu apenas 10 dias foi que a Netscape lançou seu navegador, que na época competitiva com a Microsoft.

No início, o JavaScript não era tão poderoso quanto é hoje, pois foi projetado originalmente para adicionar interação e animação a páginas da web. Foi somente em 2005, com o lançamento do jQuery e do AJAX, que o JavaScript começou a ser usado em todos os sites.

As pessoas simplesmente não tinham uma alternativa fácil ao jQuery e ao AJAX para manipulação de DOM e envio de requisições assíncronas. Além disso, uma comunidade ativa de desenvolvedores JavaScript continuava adicionando novos recursos à biblioteca.

Então, o Google lançou seu moderno navegador Chrome, e o Facebook começou a atrair mais pessoas para a internet. O JavaScript começou a crescer para atender às ambições desses gigantes da internet.

Os navegadores começaram a desenvolver APIs que pudessem ser usadas em JavaScript. O JavaScript pode recuperar informações como endereços IP e localizações geográficas do navegador, dando mais poder às empresas de internet para localizar os recursos de seus sites.

Então outra inovação aconteceu para tornar o JavaScript ainda mais poderoso.

Um ambiente do lado do servidor chamado Node.js foi lançado em 2009, permitindo que JavaScript fosse executado no lado do servidor, assim como PHP, Java, Python, Ruby e muitos outros. Também foi permitido que desenvolvedores desenvolvessem aplicações web full-stack usando apenas JavaScript.

Hoje, JavaScript é uma linguagem que pode gerar aplicativos web, de desktop e móveis.

Aqui está uma citação de Tim O'Reilly, fundador da O'Reilly Media:

Aprender JavaScript costumava significar que você não era um desenvolvedor sério. Hoje, não aprender JavaScript significa a mesma coisa.

Aprender JavaScript agora é essencial para pessoas que desejam ser desenvolvedores web.

Por que aprender JavaScript?

Há 4 boas razões pelas quais você precisa aprender e entender profundamente JavaScript:

1. JavaScript é a única linguagem que funciona no navegador
2. É bastante fácil de aprender (mas difícil de dominar)
3. É uma linguagem essencial para criar aplicações web
4. Existem muitas oportunidades de carreira para desenvolvedores JavaScript

Aprender JavaScript abre enormes oportunidades para você se tornar um desenvolvedor front-end, back-end ou mobile.

Basicamente, aprender JavaScript é uma porta de entrada para melhorias de carreira em tecnologia.

JavaScript vs Java

No início, o JavaScript se chama LiveScript. Depois, foi renomeado para JavaScript porque Java era uma linguagem de programação muito popular.

Como a maioria dos desenvolvedores de software já estava familiarizada com Java, o nome JavaScript foi pensado para ajudar a comercializar JavaScript como uma ótima linguagem de programação e atrair o interesse dos desenvolvedores da época.

Só para esclarecer, JavaScript e Java são duas linguagens de programação completamente diferentes. Você não precisa saber Java para aprender JavaScript (ou vice-versa). :)

2 - Como configurar seu computador

Para escrever um programa usando JavaScript, você precisa instalar 2 ferramentas gratuitas que estão disponíveis para todos os sistemas operacionais.

A primeira ferramenta a ser instalada é o Visual Studio Code.

Como instalar o VSCode

O Visual Studio Code, ou VSCode, é um programa de edição de texto criado para a escrita de código. Além de ser gratuito, o VSCode é de código aberto e está disponível em todos os principais sistemas operacionais.

Você pode usar o VSCode no Windows, macOS e Linux, então se não tiver um editor de texto no seu computador, recomendo que você instale o VSCode aqui.

Agora que você tem um editor de texto para escrever o código JavaScript, precisa de um software para repeti-lo. Vamos instalar o Node.js em seguida.

Como instalar o Node.js

Para executar JavaScript fora do navegador, você precisa instalar o Node.js, que é essencialmente um executor de JavaScript.

Basta acessar o site do Node.js em nodejs.org e baixar a versão LTS mais recente para o seu computador. Após a conclusão do download, instale-o no seu sistema.

Você precisa executar o Node.js usando o console, então abra seu aplicativo de linha de comando ou terminal e execute o seguinte comando:

node -v

Este comando exibirá a versão do seu Node.js recém-instalado no console.

3 - Introdução rápida ao console

O console é uma interface baseada em texto que você pode usar para digitar e executar comandos no seu computador. No Windows, é chamado de Linha de Comando. No macOS e Linux, é conhecido como Terminal.

Você não usará todos os comandos disponíveis no console. Na verdade, você só precisa conhecer 7 comandos básicos para executar o código JavaScript.

Primeiro, abra o programa de console no seu computador e digite o  pwdcomando:

pwd

Este é o comando que você usa para descobrir em qual diretório seu terminal está atualmente.  pwdé uma abreviação de print working directory.

Para alterar o diretório de trabalho, você precisa executar o  cdcomando.

Aqui está um exemplo para mover um diretório filho:

cd directory_name/directory_name

Para mover para um diretório pai, especifique  ..o lado do comando:

cd ..

Para subir mais de um diretório, use../..

Para limpar o console de comandos e saídas anteriores, use o  clearcomando:

clear

Para imprimir a lista de arquivos e diretórios no diretório atual, execute o  lscomando:

ls

Para criar um novo arquivo, use o  touchcomando seguido do nome do arquivo e extensão:

touch index.js

O comando acima criará um novo arquivo JavaScript nomeado  index.jsno diretório de trabalho atual.

Para criar um novo diretório, use o  mkdircomando seguido do nome do diretório:

mkdir my_project

Para executar JavaScript usando Node.js, especifique  nodeo nome do arquivo no seguinte formato:

node index.js

Você verá qualquer saída do código no mesmo console.

Há muitas coisas que você pode fazer com o console, mas esses 7 comandos são suficientes porque só precisamos dele para executar o código JavaScript.

Em seguida, vamos executar seu primeiro programa JavaScript!

4 - Hora de dizer Olá, mundo!

É hora de executar seu primeiro programa JavaScript usando o Node.

No console, crie um novo arquivo JavaScript chamado  index.jsusando o  touchcomando.

touch index.js

Em seguida, abra o arquivo usando o VSCode e escreva a seguinte linha de código no arquivo:

console.log("Hello World!");

De volta ao console, execute este script com o Node:

node index.js

O console deve executar o  index.jsarquivo e imprimir "Olá, mundo!".

Você acabou de executar seu primeiro programa JavaScript usando Node.js. Excelente!

Quando você executa o  node index.jscomando, o programa Node.js começa a ler o script linha por linha, de cima para baixo.

O  nodeprograma vê que você escreveu a palavra  console.logseguida de parênteses  (), então ele sabe que você está instruindo-o a imprimir algo. O programa então lê o que você colocou entre parênteses e imprime no console.

No seu VSCode ou outro programa editor de texto, você verá diferentes partes do seu código destacadas com núcleos diferentes. Este é um recurso do editor de texto chamado  destaque de sintaxe  e é muito útil para ajudá-lo a distinguir diferentes partes do código.

A  logpalavra-chave é uma função, então ela é destacada em um cor, enquanto as palavras entre parênteses têm outra cor.

Uma função é simplesmente um trecho de código usado para executar uma tarefa específica. A  log()função é usada para "imprimir" o que você coloca entre parênteses.

Por outro lado, a  consolepalavra-chave é um objeto, que é uma propriedade autônoma que dá acesso a determinadas funcionalidades.

Aprenderemos mais sobre funções e objetos mais tarde. Por enquanto, lembre-se de que a  console.log()palavra-chave é usada para imprimir coisas no console.

Em seguida, vamos começar a aprender a estrutura do código JavaScript.

5 - Estrutura do código JavaScript

Um programa de computador é uma série de trechos de código escritos em um arquivo de texto. Esses arquivos de texto são então executados por meio de um software desenvolvido especialmente para apresentá-los. O software Node.js que você baixou acima é uma ferramenta que processa o código JavaScript.

Antes de obrigarmos, vamos entender a estrutura do código.

Declarações

Uma instrução é uma instrução exclusiva para o computador funcionar. Pense nela como uma frase, mas para computadores. Podemos terminar uma instrução usando um ponto e vírgula,  ;assim como podemos terminar uma frase com um ponto..

Você pode escrever várias instruções em uma única linha, mas a convenção é escrever uma instrução por linha:

// This is hard to read
console.log("Hello World!"); console.log("I'm learning JavaScript");

// Now it's better
console.log("Hello World!");
console.log("I'm learning JavaScript");

Cada declaração é uma expressão de alguma ação que precisa ser realizada pelo software que executa o código.

Comentários

Na programação, comentários são textos que usamos para comunicar o contexto do código escrito no arquivo.

Para escrever um comentário em JavaScript, você precisa adicionar duas barras  //antes do comentário, conforme mostrado abaixo:

// This is a comment
// This is also a comment

// Below print two lines of statements
console.log("Hello World!");
console.log("I'm learning JavaScript");

Os comentários são ignorados pelo processador de linguagem, então você pode usá-los para desabilitar algum código sem precisar excluí-lo.

O código abaixo mostra como desabilitar a segunda instrução print:

console.log("Hello World!");
// console.log("I'm learning JavaScript");

Fluxo de execução

Um processador de linguagem como o Node.js executa instruções em uma abordagem de cima para baixo. A instrução escrita na primeira linha será realizada antes da segunda linha e, em seguida, continuará até a última linha:

console.log("Hello World!");
console.log("I'm learning JavaScript");

// Printing numbers
console.log(1);
console.log(2);
console.log(3);

Saída:

Hello World!
I'm learning JavaScript
1
2
3

Se você quiser imprimir os números antes do texto, precisará mover as  console.log()linhas correspondentes para o topo.

Exercício #1

Tente imprimir seu nome, idade e ocupação no console.

A saída ficaria assim:

John Doe
19
Student

Agora que você entende a estrutura básica do código JavaScript, vamos continuar aprendendo sobre variáveis.

6 - Variáveis JavaScript

Antes de explicar o que é uma variável, quero que você altere o código que escreveu no  index.jsarquivo.

Altere o código nesse arquivo da seguinte maneira:

let message = "Hello World!"
console.log(message)

Em seguida, execute o código usando o  node index.jscomando. Você verá a mesma saída de quando escreve a mensagem "Olá, Mundo!" diretamente dentro da console.log() função. Como isso pode ser possível?

Isso ocorre porque a mensagem escrita no código acima é uma  variável  .

Na programação, uma variável é simplesmente um nome que você dá um valor para que possa acessá-lo posteriormente. Você pode pensar em uma variável como um rótulo que pode ser associado a um valor determinado, para que você possa se referir ao valor usando o rótulo.

Para declarar uma variável, você precisa digitar a palavra-chave logo let após o nome da variável.

A primeira linha do código diz ao JavaScript para associar a  messagevariável ao valor  Hello World!:

let message = "Hello World!"

Na segunda linha, o JavaScript é instruído a imprimir o valor de message , e é exatamente isso que ele faz.

Você pode alterar o valor de sua variável reatribuindo outro valor da seguinte maneira:

message = "Hello World!"
print(message)
message = "Nice weather!"
print(message)

Execute o arquivo e você verá duas linhas impressas como saída:

Hello World!
Nice weather!

Variáveis são usadas para referenciar dados para que você possa usar os mesmos dados várias vezes em seu programa.

A seguir, veremos algumas regras para nomear variáveis em JavaScript.

Nomenclatura de variáveis

JavaScript tem algumas regras de nomenclatura que você precisa conhecer para evitar erros de nomenclatura.

Os nomes de variáveis podem conter apenas letras do alfabeto, números e sublinhados (  _). Isso significa que você pode nomear sua variável como  message,  message_1,  message_2.

O primeiro caractere do nome da variável não pode ser um número.  message_1está bem. 1_message não está.

Você não pode usar palavras-chave reservadas como ",  consoleporque elas são usadas pelo JavaScript para fazer certas coisas. Existem muitas outras palavras-chave usadas pelo JavaScript que você aprenderá nas seções seguintes, como  if"  for, e while .

Os nomes de variáveis são diferenciais de minúsculas, o que significa que  Message,  MESSAGE, e  messagepodem ser usados para criar três variáveis diferentes. Mas é claro que não recomendo usar nomes semelhantes, pois isso causa confusão.

Às vezes, você precisa de mais de uma palavra para declarar o nome de uma variável. JavaScript tem duas convenções de nomenclatura usadas mundialmente:

1. camelCase
2. snake_case

Camel case é uma convenção de nomenclatura que usa uma letra guardada como o primeiro caractere das palavras subsequentes. Veja um exemplo:

let myAwesomeVariable

A convenção de nomenclatura "snake case" usa um sublinhado para separar palavras. Veja um exemplo:

let my_awesome_variable

Ambas são convenções de nomenclatura aceitáveis, mas você deve seguir uma delas em seu código para evitar confusão.

Variável constante

Há momentos em que você precisa armazenar um valor que nunca muda em uma variável.

Uma variável constante é uma variável que não muda de valor enquanto o programa está em execução. Em outras linguagens de programação, alterar o valor de uma constante produzirá um erro.

Em JavaScript, uma variável constante é declarada usando uma  constpalavra-chave.

A seguir mostramos como declarar 2 constantes em JavaScript:

const FILE_SIZE_LIMIT = 2000
const MAX_SPEED = 300

A convenção de nomenclatura para uma constante é usar todas as letras protegidas, embora usar letras minúsculas também funcione. As letras são apenas um padrão para destacar as constantes.

A palavra-chave var

A  varpalavra-chave é usada para declarar variáveis com escopo global. Esta palavra-chave era a única que você poderia usar para demonstrar variáveis antes do JavaScript lançar a nova palavra-chave  lete  constem 2015.

A partir de hoje, você deve evitar o uso  varse puder, pois  varpode introduzir bugs que você pode evitar usando a let palavra-chave.

Para mostrar o que quero dizer, considere o seguinte exemplo:

if(true) {
    var name = "Nathan";
}

console.log(name)

O código acima imprimirá a  namevariável perfeitamente, mas não deveria, porque a variável  nameé declarada dentro do if bloco.

Isso ocorre porque qualquer variável declarada usando a var palavra-chave é acessível de qualquer lugar. O escopo dessa variável é global.

Por outro lado, a let palavra-chave tem um escopo de bloco, o que significa que a variável só é acessível a partir do bloco e de todos os seus filhos do bloco.

Mas por que você se preocupa em definir o escopo da variável? Isso ocorre porque, quando você tem centenas ou milhares de linhas de código, pode ser frustrante rastrear um erro que ocorre devido a variações globais.

Existe um princípio no desenvolvimento de software chamado “princípios de menor exposição”, o que significa que você não expõe nenhuma parte do seu programa que seja desnecessária.

O escopo de uma variável em bloco garante que ela seja exposta e acessível somente em partes de sua base de código que desative a variável.

Uma variável declarada usando a  letpalavra-chave é idêntica a uma variável declarada usando,  varexceto pelo nível de escopo.

if(true) {
    let name = "Nathan";
}

console.log(name)  // Error: name is not defined

varIsso também significa que agora você tem as palavras -  chave  lete  constpara declarar uma variável. O que usar?

Em geral, você pode declarar uma variável com  constprimeiro. Ao codificar sua aplicação e perceber que precisa alterar a atribuição da variável, você pode alterar a declaração para  let.

Se você souber desde o início que o valor da variável mudará, poderá usá-lo  letimediatamente. Só não use "  varhoje" ou as pessoas podem ficar bravas com você.

Exercício #2

Escreva um programa com três variáveis, cada uma com o seguinte valor:

1. A primeira variável contém seu nome
2. A segunda variável contém sua idade
3. A terceira variável contém sua ocupação

Em seguida, imprima as variáveis usando o  console.log()método . Aqui está o exemplo de saída:

John Doe
Student
19

Resumo

A maneira como você usa variáveis para criar um programa que faz o que você quer que ele faça é uma das habilidades mais importantes que você pode ter como programador.

Mas antes de aprender mais sobre como usar variáveis, vamos aprender sobre tipos de dados em JavaScript.

7 - Tipos básicos de dados em JavaScript

Tipos de dados são simplesmente definidos para diferentes tipos de dados conhecidos por uma linguagem de programação.

Um tipo de dado contém especificações sobre o que você pode ou não fazer com esses dados.

Para lhe mostrar um exemplo que auxilia o cérebro, tenho certeza de que você concorda que  2 + 2 = 4?

Bem, JavaScript também concorda com isso:

console.log(2 + 2);

// Output: 4

Mas e se você tentar somar um número com letras, como mostrado abaixo?

console.log(2 + "ABC");

Saída:

2ABC

Um número e letras farão com que o JavaScript concatene ou junte os valores.

Nesta seção, você aprenderá os tipos básicos de dados que o JavaScript conhece:

• Cordas
• Números
• Booleanos
• Nulo
• Indefinido

Você também verá como esses diferentes tipos de reagem aos operadores, conforme  +mostrado no exemplo acima.

Primeiro, vamos começar com strings.

Strings em JavaScript

Strings são simplesmente dados definidos como uma série de caracteres.

Você viu um exemplo de dados de string anteriormente quando chama a  console.log()função para imprimir uma mensagem:

let message = "Hello, Sunshine!";
console.log(message); // Hello, Sunshine!

Uma string precisa estar entre aspas. Você pode usar aspas duplas ou simples, mas elas precisam ser iguais.

Você receberá um erro ao usar aspas diferentes, como este:

// Invalid or unexpected token
let message = "Hello';

Você pode unir duas ou mais strings em uma só com o  +símbolo de mais. Não se esqueça de adicionar um espaço antes da próxima string, ou você obterá uma string sem espaços!

let message = "Hello " + "and " + "Goodbye!";
console.log(message);

// Output: Hello and Goodbye!

Ao imprimir o valor de uma variável, você também pode adicionar strings na  console.log()função diretamente da seguinte maneira:

let message = "Hello, Dave!";

console.log("The message is: " + message);

// Output: The message is: Hello, Dave!

Isso é particularmente útil quando você tem várias strings para console.log em uma frase, como a seguir:

let name = "John";
let topic = "JavaScript";

console.log(name + " is learning " + topic + " today");

// Output: John is learning JavaScript today

Ou você também pode usar o formato de strings do modelo, que permite que você incorpore uma variável diretamente dentro da string da seguinte maneira:

let name = "John";
let topic = "JavaScript";

console.log(`${name} is learning ${topic} today`);

// Output: John is learning JavaScript today

Para usar o formato de strings do modelo, você precisa usar o acento grave (`) caractere de crase para quebrar a string em vez de aspas.

A variável é incorporada na string usando o símbolo de dólar e chaves como em ${variable} .

Dessa forma, o JavaScript sabe que você está referenciando uma variável dentro da string.

Quando você tem várias strings para imprimir em uma única linha, o formato de strings do modelo é mais conveniente porque você não precisa quebrar a string com aspas e concatenações.

Em seguida, as cordas também podem representar números. Coloque os números entre aspas da seguinte maneira:

let score = "10" + "30";
console.log(score);

// Output: 1030

Quando você une dois números de string com um  +símbolo, o JavaScript unirá os dois números em vez de realizar uma adição aritmética.

É assim que as strings funcionam em JavaScript. Vamos analisar os números a seguir.

Números (inteiros e flutuantes) em JavaScript

Os tipos de dados numéricos representam diferentes tipos de números. Existem dois tipos de números em JavaScript:

• Inteiros
• Carros alegóricos

Um inteiro é um número inteiro sem decimais e frações. Abaixo, você vê exemplos de dois inteiros  xe  y:

let x = 1;
let y = 2;

console.log(x + y);

// Output: 3

Por outro lado, floats referem-se a números com pontos decimais como este:

let f = 1.2;
let z = 2.35;

console.log(f + z);

// Output: 3.55

Para criar um float, você precisa escrever um número e usar  .para definir os valores decimais.

Com tipos de números, você pode executar operações aritméticas como adição  +, subtração  -, divisão  /e multiplicação  *da mesma forma que usa uma calculadora.

Booleanos em JavaScript

Boolean é um tipo que representa  truee  falsevaloriza.

Você pode pensar nos booleanos como um interruptor de luz que só pode estar em uma de duas posições: ligado ou desligado.

O mesmo ocorre com valores booleanos em linguagens de programação. Eles são usados quando o JavaScript precisa tomar uma decisão: ir para a esquerda ou para a direita? Certo ou errado?

Veja como criar valores booleanos em JavaScript:

let on = true;
let off = false;

Este tipo de dado é frequentemente usado quando você precisa tomar uma decisão usando um fluxo de controle. Você verá que os valores booleanos são muito úteis no desenvolvimento de um programa mais adiante na Seção 9.

Indefinido em JavaScript

Indefinido é um tipo de dado em JavaScript usado para representar uma variável que ainda não recebeu nenhum valor.

Sempre que você declarar uma variável sem nenhum valor, o  undefinedvalor atribuído será a essa variável. Por exemplo:

let first_name;

console.log(first_name); // undefined

Você também pode entender  undefineduma variável explicitamente da seguinte maneira:

let last_name = undefined;

Mas isso geralmente não é recomendado, porque o JavaScript tem outro valor chamado  nullque é usado para marcar uma variável como vazia.

Nulo em JavaScript

O  nullvalor é um tipo de dado especial que representa um valor vazio ou desconhecido. Veja como atribuir uma variável como nula:

let first_name = null;

O código acima significa que o valor  first_nameestá vazio ou desconhecido.

A esta altura, você deve estar se perguntando: qual é a diferença entre  undefinede  null? Eles parecem ter um propósito semelhante.

E você está certo. Ambos  undefinede  nullsão valores que não representam nada, e outras linguagens de programação geralmente têm apenas um, que é  null.

Em JavaScript, o  undefinedvalor é reservado como valor padrão quando uma variável é declarada, enquanto null significa que você atribuiu intencionalmente um valor "vazio" para a variável.

Essa pequena diferença aparecerá mais tarde, quando você aprender sobre funções no Capítulo 13.

Por enquanto, tenha em mente que o JavaScript trata  undefinedcomo valor vazio "padrão" e  nullcomo valor vazio "intencional".

8 - Conversão de Tipo e Coerção

Às vezes, você pode querer converter um tipo de dado em outro para que o programa seja executado conforme o esperado.

Por exemplo, suponha que você precise converter uma string em um inteiro para poder realizar uma adição entre números.

Se você tiver um dos números como uma string, ou JavaScript, uma vez de adicionar:

let x = "7";
let y = 5;

console.log(x + y); // 75

Para somar os dois números corretamente, você precisa converter a  xvariável em um inteiro.

A conversão de dados de um tipo para outro também é conhecida como conversão de tipo ou conversão de tipo. Existem 3 funções frequentemente usadas para realizar a conversão de tipo:

• Number()
• String()
• Boolean()

Como o nome indica, essas funções de conversão de tipo tentarão convertem qualquer valor especificado dentro dos parênteses para o tipo de mesmo nome.

Para converter uma string em um inteiro, você pode usar a  int()função:

let x = "7";
let y = 5;

// Convert x to integer
x = Number(x);

console.log(x + y); // 12

Por outro lado, a  String()função converte um valor de outro tipo em uma string. Se você digitar  String(true), receberá "true" de volta.

Passar um valor do mesmo tipo que a função não tem efeito. Ela apenas retornará o mesmo valor.

Tipo coerção

Em JavaScript, a coerção de tipo é um processo em que um valor de um tipo é implicitamente convertido em outro tipo.

Isso é feito automaticamente pelo JavaScript para que seu código não cause erros. Mas, como você verá nesta seção, uma coerção desse tipo pode, na verdade, causar comportamentos indesejados no programa.

Vamos considerar o que acontece quando você realiza uma adição entre a  numberea  stringem JavaScript:

console.log(1 + "1");

Como você viu na seção anterior, o JavaScript considerará o número como uma string e unirá as duas letras como  11em vez de adicioná-las (  1 + 1 = 2)

Mas você precisa saber que outras linguagens de programação não respondem da mesma maneira.

Linguagens de programação como Ruby ou Python responderam interrompendo o programa e exibindo um erro como resposta. A resposta será algo como "Não é possível realizar a adição entre um número e uma string".

Mas o JavaScript verá isso e dirá: "Não posso fazer a operação que você solicita  como está  , mas posso fazer-la se o número  1for convertido para um  string,  então farei exatamente isso  ."

E é exatamente isso que é uma coerção de tipo. O JavaScript percebe que não sabe como executar seu código, mas não interrompe o programa e responde com um erro.

Em vez disso, ele alterará o tipo de dados de um dos valores sem avisar você.

Embora a coerção de tipo não cause erros, a saída também é algo que você não quer.

Regras de coerção de tipo

As regras de coerção de tipos nunca são declaradas claramente em lugar nenhum, mas eu mesmo descobri algumas regras testando vários códigos bobos.

Parece que o JavaScript primeiro converterá os tipos de dados  stringquando encontrar tipos de dados diferentes:

1 + "1" // "11"
[1 ,2] + "1" // "1,21"
true + "1" // "true1"

Mas a ordem dos valores é importante quando você tem um objeto. Escrever objetos primeiro sempre retorna um valor numérico  1:

{ a: 1 } + "1" // 1
"1" + { a: 1 } // "1[object Object]"
true + { a: 1 } // "true[object Object]"
{ a: 1 } + 1 // 1

JavaScript pode calcular entre tipos booleanos e numéricos, porque valores booleanos  truee  falseimplicitamente têm o valor numérico de  1e  0:

true + 1 // 1+1 = 2
false + 1 // 0+1 = 1
[1,2] + 1 // "1,21"

A coerção de tipo é sempre realizada  implicitamente  . Quando você atribui o valor como uma variável, o tipo de variável nunca muda fora da operação:

let myNumber = 1;
console.log(myNumber + "1"); // prints 11
console.log(myNumber); // still prints number 1 and not string

Você pode tentar descobrir mais por conta própria, mas espero que agora você entenda que tipo de coerção é e como ela funciona.

Por que você deve evitar a coerção de tipo

Os desenvolvedores de JavaScript geralmente são divididos em dois grupos quando falam sobre coerção de tipos:

• Aqueles que acham que é um recurso
• Aqueles que acham que é um bug

Se você me perguntar, eu recomendo que você evite usar coerção de tipo no seu código ou tempo todo.

O motivo é que nunca encontrei um problema em que a coerção de tipo fosse necessária para a solução e, quando preciso converter um tipo em outro, é sempre melhor fazer isso explicitamente:

let price = "50";
let tax = 5;

let totalPrice = Number(price) + Number(tax);

console.log(totalPrice);

Usar funções de conversão de tipo explícito, como  Number()e ,  String()tornará seu código claro e transparente. Você não precisa adivinhar o tipo de dado correto necessário no seu programa.

A coerção de tipo é um dos recursos exclusivos do JavaScript que pode confundir iniciantes, por isso é bom esclarecê-lo logo no início.

A seguir, aprenderemos sobre operadores JavaScript.

9 - Operadores em JavaScript

Como o nome indica, os operadores são símbolos que você pode usar para realizar transações em seus dados.

Você viu alguns exemplos de uso do  +operador "mais" para unir várias strings e somar dois números. É claro que JavaScript é mais de um operador, como você descobrirá nesta seção.

Como você já aprendeu sobre tipos de dados e conversão anteriormente, aprender operadores deve ser relativamente fácil.

Operadores aritméticos

Os operadores aritméticos são usados para realizar operações matemáticas como adições e subtrações.

Esses operadores são frequentemente usados com tipos de dados numéricos. Veja um exemplo:

console.log(10 - 3); // 7
console.log(2 + 4); // 6

No total, existem 8 operadores aritméticos em JavaScript:

Esses operadores são bem simples, então você pode experimentá-los por conta própria.

Como você viu na seção anterior, o  +operador também pode ser usado em dados de strings para mesclar várias strings como uma:

let message = "Hello " + "human!";
console.log(message); // Hello human!

Quando você adiciona um número e uma string, o JavaScript executará uma coerção de tipo e tratará o valor numérico como um valor de string:

let sum = "Hi " + 89;
console.log(sum); // Hi 89

Usar qualquer outro operador aritmético com strings fará com que o JavaScript retorne um  NaNvalor.

O operador de destino

O próximo operador a aprender é o operador de atribuição, que é representado pelo  =sinal de igual.

Em JavaScript, o operador de atribuição é usado para especificar dados ou um valor a uma variável.

Você já viu alguns exemplos de uso do operador de atribuição antes, então aqui vai um lembrete:

// Assign the string value 'Hello' to the 'message' variable
let message = "Hello";

// Assign the Boolean value true to the 'on' variable
let on = true;

Você deve ter notado que o sinal de igual tem um significado bastante diferente na programação do que em matemática, e você está certo!

A operadora de atribuição não é usada para comparar se um número é igual a outro número na programação.

Se você quiser fazer esse tipo de comparação, precisará usar o  ==operador igual a.

Operadores de atribuição também podem ser combinados com operadores aritméticos, para que você possa adicionar ou subtrair valores do operando esquerdo.

Veja a tabela abaixo para os tipos de operadores de atribuição:

Em seguida, vamos dar uma olhada nos operadores de comparação.

Os operadores de comparação

Operadores de comparação são usados para comparar dois valores. Os operadores nesta categoria retornarão valores booleanos:  trueor  false.

A tabela a seguir mostra todos os operadores de comparação disponíveis em JavaScript:

Aqui estão alguns exemplos de uso desses operadores:

console.log(9 == 9); // true

console.log(9 != 20); // true

console.log(2 > 10); // false

console.log(2 < 10); // true

console.log(5 >= 10); // false

console.log(10 <= 10); // true

Os operadores de comparação também podem ser usados para comparar cordas como este:

console.log("ABC" == "ABC"); // true

console.log("ABC" == "abc"); // false

console.log("Z" == "A"); // false

As comparações de strings diferenciam as hierarquias de minúsculas, como mostrado no exemplo acima.

JavaScript também tem duas versões de cada operador de comparação: flexível e estrito.

No modo estrito, o JavaScript comparará os tipos sem executar uma coerção de tipo.

Você precisa adicionar mais um  =símbolo de igual ao operador da seguinte maneira

console.log("9" == 9); // true
console.log("9" === 9); // false

console.log(true == 1); // true
console.log(true === 1); // false

Você deve usar operadores de comparação estritos, a menos que tenha um motivo específico para não fazê-lo.

Operadores lógicos

Os operadores lógicos são usados para verificar se uma ou mais expressões resultam em  Trueou  False.

Existem três operadores lógicos que o JavaScript possui:

Esses operadores só podem retornar valores booleanos. Por exemplo, você pode determinar se "7 é maior que 2" e "5 é maior que 4":

console.log(7 > 2 && 5 > 4); // true

Esses operadores lógicos seguem as leis da lógica matemática:

1. &&Operador AND - se qualquer expressão retornar  false, o resultado seráfalse
2. ||Operador OR - se qualquer expressão retornar  true, o resultado serátrue
3. !Operador NOT - nega a expressão, retornando o oposto.

Vamos fazer um pequeno exercício. Tente executar estas instruções no seu computador. Consegue adivinhar os resultados?

console.log(true && false);

console.log(false || false);

console.log(!true);

Esses operadores lógicos serão úteis quando você precisar afirmar que um requisito específico foi atendido em seu código.

O  typeofoperador

JavaScript permite verificar o tipo de dados usando o  typeofoperador. Para usar o operador, você precisa chamá-lo antes de especificar os dados:

let x = 5;
console.log(typeof x) //  'number'

console.log(typeof "Nathan") // 'string'

console.log(typeof true) // 'boolean'

O  typeofoperador retorna o tipo dos dados como uma string. O tipo 'number' representa os tipos inteiro e flutuante, enquanto a string e o booleano representam seus respectivos tipos.

Exercício #3

Adivinhe o resultado desses operadores em ação:

console.log(19 % 3);
console.log(10 == 3);
console.log(10 !== "10");
console.log(2 < "10");
console.log("5" > 2);
console.log((false && true) || false);

10 - Matrizes JavaScript

Um array é um tipo de dado de objeto que pode ser usado para armazenar mais de um valor. Um array pode ser uma lista de strings, números, booleanos, objetos ou uma mistura de todos eles.

Para criar uma matriz, você precisa usar colchetes  []e separar os itens com uma vírgula.

Veja como criar uma lista de strings:

let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];

Você pode pensar em uma matriz como uma lista de itens, cada um armazenado em um compartimento de armário:

Você também pode declarar um array vazio sem nenhum valor:

let birds = [];

Uma matriz também pode ter uma mistura de valores como esta:

let mixedArray = ['Bird', true, 10, 5.17]

A matriz acima contém uma string, um booleano, um inteiro e um float.

Posição do índice da matriz

JavaScript lembra a posição dos elementos dentro de um array. A posição de um elemento também é chamada de número de índice.

Voltando ao exemplo do armário, você pode pensar nos números de índice como os números do armário. O número de índice começa da  0seguinte forma:

Para acessar ou alterar o valor de um array, você precisa adicionar a notação de colchetes  [x]ao lado do nome do array, onde  xé o número de índice daquele elemento. Veja um exemplo:

// Access the first element in the array
myArray[0];

// Access the second element in the array
myArray[1];

Suponha que você queira imprimir a string "Coruja" do  birdsarray. Veja como fazer isso.

let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];

console.log(birds[0]); // Owl
console.log(birds[1]); // Eagle

Pronto. Você precisa digitar o nome do array, seguido do número do índice entre colchetes.

Você também pode receber um novo valor a um índice específico usando a operadora de atribuição.

Vamos substituir 'Papagaio' por 'Abutre':

let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];
birds[2] = 'Vulture';

console.log(birds);
// ['Owl', 'Eagle', 'Vulture', 'Falcon']

Como o índice da matriz começa em zero, o valor 'Parrot' é armazenado no índice 2 e não 3.

Métodos especiais para manipulação de arrays

Como array é um objeto, você pode chamar métodos fornecidos pelo JavaScript para manipular os valores do array.

Por exemplo, você pode usar o  push()método para adicionar um item ao final do array:

let birds = ['Owl', 'Eagle'];

birds.push('Sparrow');

console.log(birds);
// ['Owl', 'Eagle', 'Sparrow']

Outro método chamado  pop()pode ser usado para remover um item do final de uma matriz:

let birds = ['Owl', 'Eagle', 'Sparrow'];

birds.pop();

console.log(birds);
// ['Owl', 'Eagle']

O  unshift()método pode ser usado para adicionar um item da frente no índice 0:

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

fishes.unshift('Sardine');

console.log(fishes);
// ['Sardine', 'Salmon', 'Goldfish', 'Tuna']

Por outro lado, o  shift()método pode ser usado para remover um item do índice 0:

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

fishes.shift();

console.log(fishes);
// ['Goldfish', 'Tuna']

O indexOf() método pode ser usado para encontrar e retornar o índice de um item na matriz.

O método retornará  -1quando o item não for encontrado dentro do array:

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

let pos = fishes.indexOf('Tuna');

console.log(pos); // 2

Para obter o tamanho de um array, você pode acessar uma  lengthpropriedade:

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

console.log(fishes.length); // 3

Observe que não adicionamos parênteses ao lado da  lengthpalavra-chave acima. Isso ocorre porque  lengthé uma propriedade do objeto array e não um método.

Aprenderemos mais sobre objetos nos próximos tutoriais.

Exercício #4

Crie uma matriz chamada  colorsque inclua como núcleos "vermelho", "verde" e "azul".

Primeiro, adicione o cor "preta" após o último índice do array. Em seguida, imprima o array.

Em seguida, remova o valor "vermelho" e troque as posições de "verde" e "azul". Imprima a matriz.

Por fim, adicione o cor "amarelo" no primeiro índice do array e imprima o array.

O resultado da saída é o seguinte:

[ 'red', 'green', 'blue', 'black' ]
[ 'blue', 'green', 'black' ]
[ 'yellow', 'blue', 'green', 'black' ]

Você precisa modificar o array original usando os métodos explicados nesta seção.

11 - Fluxos de Controle (Condicionais) em JavaScript

Até agora, o código JavaScript que você escreveu é executado linha por linha, de cima para baixo. Mas e se você quiser executar algumas linhas de código somente quando uma determinada condição for atendida?

Um programa de computador geralmente precisa levar em conta muitas condições diferentes que podem surgir durante sua execução.

Isso é semelhante à forma como um ser humano toma decisões na vida. Por exemplo, você tem dinheiro para pagar as férias no Japão? Se sim, vá. Se não, economize mais!

É aqui que entra o fluxo de controle.  O fluxo de controle  é um recurso em uma linguagem de programação que permite executar seletivamente código específico com base nas diferentes condições que podem surgir.

O uso de fluxos de controle permite que você defina vários caminhos que um programa pode seguir com base nas condições nele apresentadas.

Existem dois tipos de fluxos de controle comumente usados em JavaScript: condicionais e loops.

Esta seção se concentrará em declarações condicionais como:

1. if...elsedeclaração
2. switch...casedeclaração

Você aprenderá sobre instruções de loop na próxima seção.

Uma instrução if...else

UM if instrução permite que você crie um programa que será executado somente se uma condição específica for atendida.

A sintaxe da  ifinstrução é a seguinte:

if (condition) {
  // code to execute if condition is true
}

Vejamos um exemplo. Digamos que você queira tirar férias que exijam 5.000 dólares.

Usando o  ifextrato, veja como você verifica se tem saldo suficiente:

let balance = 7000;

if (balance > 5000) {
  console.log("You have the money for this trip. Let's go!");
}

Execute o código acima uma vez e você verá uma string impressa no terminal.

Agora altere o valor do  balancepara 3000 e você não obterá nenhuma resposta.

Isso acontece porque o código dentro da  ifinstrução só é executado quando a condição é true .

Após a  ifdeclaração, você pode escrever outra linha de código abaixo dela, da seguinte maneira:

let balance = 7000;

if (balance > 5000) {
  console.log("You have the money for this trip. Let's go!");
}
console.log("The end!");

A segunda  console.log()chamada acima será realizada independentemente do valor que você espera à balance variável.

Se você quiser que ele seja executado somente quando a  ifcondição for atendida, coloque uma linha dentro das chaves também:

let balance = 7000;

if (balance > 5000) {
  console.log("You have the money for this trip. Let's go!");
  console.log("The end!");
}

Em seguida, suponha que você execute algum código somente quando a  ifcondição da instrução não for atendida.

É aqui que  elseentra a instrução. Uma  elseinstrução é usada para executar código somente quando uma  ifinstrução não é cumprida.

Aqui está um exemplo:

let balance = 7000;

if (balance > 5000) {
  console.log("You have the money for this trip. Let's go!");
} else {
  console.log("Sorry, not enough money. Save more!");
}
console.log("The end!");

Agora altere o valor de  balancepara menor que  5000, e você ativará o  elsebloco no exemplo.

O JavaScript também tem uma  else ifinstrução que permite que você escreva outra condição para verificar caso a  ifcondição da instrução não seja atendida.

Considere o exemplo abaixo:

let balance = 7000;

if (balance > 5000) {
  console.log("You have the money for this trip. Let's go!");
} else if (balance > 3000) {
  console.log("You only have enough money for a staycation");
} else {
  console.log("Sorry, not enough money. Save more!");
}
console.log("The end!");

Quando o  balancevalor for menor que  5000, o  else ifextrato verificará se  balanceé maior que  3000. Caso seja, o programa recomendará que você faça umas férias em casa.

Você pode escrever quantas  else ifinstruções precisar, e cada uma delas será realizada somente se a instrução anterior não for atendida.

Juntas, as  if..else..else ifinstruções permitem que você execute diferentes blocos de código dependendo da condição enfrentada pelo programa.

Um switch de instrução...case

A  switchinstrução é parte da sintaxe principal do JavaScript que permite controlar o fluxo de execução do seu código.

Geralmente, é considerada uma alternativa à  if..elseinstrução que fornece um código mais legível, especialmente quando você tem muitas condições diferentes para avaliar.

Aqui está um exemplo de uma  switchinstrução funcional. Explicarei o código abaixo:

let age = 15;
switch (age) {
  case 10:
    console.log("Age is 10");
    break;
  case 20:
    console.log("Age is 20");
    break;
  default:
    console.log("Age is neither 10 or 20");
}

Primeiro, você precisa passar uma expressão a ser avaliada pela  switchinstrução entre pais. No exemplo, a  agevariável é passada como argumento para avaliação.

Em seguida, você precisa escrever os  casevalores que a  switchinstrução tentará responder à sua expressão. O  casevalor é imediatamente seguido por dois pontos (  :) para marcar o início do bloco case:

case "apple":

Tenha em mente o tipo de dado de  casevalor que você deseja receber à expressão. Se você quiser responder a um  string, você precisa colocar um  string.  switchInstruções  não realizarão coerção de tipo  quando você tiver um  numbercomo argumento, mas coloque um  stringpara o caso:

switch (1) {
  case "1":
    console.log("Hello World!");
    break;
}

A expressão numérica não corresponde ao valor da caixa da string, então o JavaScript não registrará nada no console.

O mesmo vale para valores booleanos. O número  1não será convertido como  truee o número  0não será convertido como  false:

switch (0) {
  case true:
    console.log("Hello True!");
    break;
  case false:
    console.log("Bonjour False!");
    break;
  default:
    console.log("No matching case");
}

O corpo da instrução switch

O  switchcorpo da declaração é composto por três palavras-chave:

• casepalavra-chave para iniciar um bloco de caso
• breakpalavra-chave para evitar que a  switchinstrução seja realizada na próximacase
• defaultpalavra-chave para executar um trecho de código quando nenhuma correspondência  casefor encontrada.

Quando sua expressão encontrar um  case, o JavaScript executará o código após a  caseinstrução até encontrar a  breakpalavra-chave. Se você omitir a  breakpalavra-chave, a execução do código continuará para o próximo bloco.

Veja o exemplo a seguir:

switch (0) {
  case 1:
    console.log("Value is one");
  case 0:
    console.log("Value is zero");
  default:
    console.log("No matching case");
}

Quando você executa o código acima, o JavaScript imprimirá o seguinte log:

> "Value is zero"
> "No matching case"

Isso ocorre porque, sem a  breakpalavra-chave,  switcho continuará avaliando a expressão em relação aos casos restantes, mesmo quando um caso correspondente já tiver sido encontrado.

Sua avaliação de switch pode corresponder a mais de um caso, portanto, a  breakpalavra-chave é comumente usada para sair do processo quando uma correspondência é encontrada.

Por fim, você também pode colocar expressões como  casevalores:

switch (20) {
  case 10 + 10:
    console.log("value is twenty");
    break;
}

Mas você precisa ter em mente que o valor de um  casebloco  deve ser atribuído exatamente  ao  switchargumento.

Um dos erros mais comuns ao usar a  switchdeclaração é que as pessoas pensam que  caseo valor é avaliado como  trueou  false.

Os seguintes  caseblocos não funcionarão em  switchinstruções:

let age = 5;

switch (age) {
  case age < 10:
    console.log("Value is less than ten");
    break;
  case age < 20:
    console.log("Value is less than twenty");
    break;
  default:
    console.log("Value is twenty or more");
}

Você precisa se lembrar das diferenças entre as avaliações  ife:case

• ifo bloco será executado quando a condição de teste  for avaliada comotrue
• caseo bloco será executado quando a condição de teste  corresponder exatamenteswitch  ao argumento fornecido

Casos de uso da instrução Switch

A regra geral quando você considera entre  ife  switché esta:

Você só usa  switchquando o código é difícil de escrever usandoif

Por exemplo, além do que você deseja escrever o nome de um dia da semana com base no número do dia da semana

Veja como você pode escrever:

let weekdayNumber = 1;

if (weekdayNumber === 0) {
  console.log("Sunday");
} else if (weekdayNumber === 1) {
  console.log("Monday");
} else if (weekdayNumber === 2) {
  console.log("Tuesday");
} else if (weekdayNumber === 3) {
  console.log("Wednesday");
} else if (weekdayNumber === 4) {
  console.log("Thursday");
} else if (weekdayNumber === 5) {
  console.log("Friday");
} else if (weekdayNumber === 6) {
  console.log("Saturday");
} else {
  console.log("The weekday number is invalid");
}

Não sei você, mas o código acima parece bem trabalhoso para mim! Embora não haja nada de errado com o código acima, você pode torná-lo mais bonito com  switch:

let weekdayNumber = 1;

switch (weekdayNumber) {
  case 0:
    console.log("Sunday");
    break;
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  default:
    console.log("The weekday number is invalid");
}

Quando você tem muitas condições para avaliar o mesmo bloco, você provavelmente combinará várias  ifcondições usando o operador lógico  AND (  &&)  ou  OR(  ||)  :

let myFood = "Banana";

if (myFood === "Banana" || myFood === "Apple") {
  console.log("Eat fruits everyday to keep you healthy.");
}

if (myFood === "Chocolate Cake") {
  console.log("Enjoy the sweet treat.");
}

Você pode substituir o código acima usando o botão de instrução. O segredo é empilhar vários  casescomo um só, assim:

let myFood = "Banana";

switch (myFood) {
  case "Banana":
  case "Apple":
    console.log("Eat fruits everyday to keep you healthy.");
    break;
  case "Chocolate Cake":
    console.log("Enjoy the sweet treat.");
    break;
}

Infelizmente,  switchnão é possível substituir várias  ifcondições que o  &&operador utiliza devido à forma como a  caseavaliação funciona. Você precisa usar uma  ifinstrução para isso.

Exercício #5

Uma escola primária está oferecendo recompensas diferentes com base na nota do aluno:

• Os alunos que tiraram A ganharão um Chocolate
• Os alunos que tiraram B ganharão um biscoito
• Os alunos que tiraram C ganharão um doce
• Para qualquer outro valor, imprima "Nenhuma recompensa a dar".

Crie uma chamada variável  gradeque armazenará a nota do aluno.

Exemplo de saída:

You got an A, so here's a Chocolate for you!
You got a B, here's a Cookie for you!
You got a C, there's room for improvement and here's your Candy!

Você pode usar uma instrução  if...elseou uma  switch...caseinstrução.

12 - Fluxos de Controle (Loops) em JavaScript

Ao programar um aplicativo em JavaScript, muitas vezes você precisará escrever um trecho de código que precisa ser executado repetidamente.

Digamos que você queira escrever um programa que imprima os números de 1 a 10 no console. Você pode fazer isso chamar  console.log10 vezes, assim:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

// and so on..

Isso funciona, mas há uma maneira melhor de escrever esse tipo de tarefa repetitiva.

Uma  instrução Loop  é outra categoria de instrução de fluxo de controle usada para executar um bloco de código várias vezes até que uma determinada condição seja atendida.

Existem duas instruções de loop usadas em JavaScript:

• Uma  fordeclaração
• Uma  whiledeclaração

Vamos aprender como usar essas afirmações na prática.

Uma declaração para

Em vez de repetir 10 vezes para imprimir os números de 1 a 10, você pode usar a  for instrução e escrever apenas uma única linha de código da seguinte maneira:

for (let x = 0; x < 10; x++) {
  console.log(x);
}

Pronto! A  for instrução é seguida por parênteses ( ()) que contêm 3 expressões:

• A  initialization expressão em que você declara uma variável para ser usada como fonte da condição do loop. Representada como  x = 1 no exemplo.
• A  condition expressão em que a variável em inicialização será avaliada para uma condição específica. Representada como  x < 11 no exemplo.
• A  arithmetic expressão em que o valor da variável é incrementado ou decrementado ao final de cada loop.

Essas expressões são separadas por ponto e vírgula ( ;)

Após as expressões, as chaves ( {}) serão usadas para criar um bloco de código que será executado pelo JavaScript enquanto a  condition expressão retornar  true.

Você pode identificar qual expressão é qual prestando atenção ao ponto e vírgula ( ;) que termina a declaração.

for ( [initialization]; [condition]; [arithmetic expression]) {
  // As long as condition returns true,
  // This block will be executed repeatedly
}

A expressão aritmética pode ser uma expressão de incremento ( ++) ou decremento ( --). Ela é executada uma vez sempre que a execução do código entre chaves termina:

for (let x = 10; x >= 1; x--) {
  console.log(x);
}

Ou você também pode usar operadores aritméticos abreviados como  += e ,  -= como mostrado abaixo:

// for statement with shorthand arithmetic expression
for (let x = 1; x < 20; x += 3) {
  console.log(x);
}

Aqui, o x será incrementado em 3 cada vez que o loop for executado.

Quando o loop terminar, o JavaScript continuará a executar qualquer código que você escrever abaixo do  for corpo:

for (let x = 1; x < 2; x++) {
  console.log(x);
}
console.log("The for loop has ended");
console.log("Continue code execution");

Quando usar um loop for

O loop for é útil  quando você sabe quantas vezes  precisa executar uma tarefa repetitiva.

Por exemplo, digamos que você esteja escrevendo um programa para lançar uma moeda. Você precisa descobrir quantas vezes a moeda cai em cara quando lançada 10 vezes. Você pode fazer isso usando o  Math.random método:

• Quando o número for menor do que  0.5 você precisa incrementar o  tails contador
• Quando o número for  0.5 e para cima você deve incrementar o  heads contador

let heads = 0;
let tails = 0;
for (x = 1; x <= 10; x++) {
  if (Math.random() < 0.5) {
    tails++;
  } else {
    heads++;
  }
}

console.log("Tossed the coin ten times");
console.log(`Number of heads: ${heads}`);
console.log(`Number of tails: ${tails}`);

O exemplo acima mostra onde o  for loop oferece a abordagem mais eficaz.

Agora vamos ver um exercício alternativo sobre cara ou coroa onde o  for laço não é eficaz:

Descubra quantas vezes você precisa lançar uma moeda até que ela caia em cara.

Desta vez, você não sabe  quantas vezes  precisa lançar a moeda. É aqui que você precisa usar a  while instrução loop, que você aprenderá a seguir.

A instrução while

A  while instrução ou  while loop é usado para executar um bloco de código enquanto a condição for avaliada como  true.

Você pode definir a condição e a instrução para o loop da seguinte maneira:

while (condition) {
  statement;
}

Assim como o  for loop, o  while loop é usado para executar um pedaço de código repetidamente até atingir a condição desejada.

No exemplo abaixo, continuaremos executando o  bloco de instruções  até que a  expressão de condição  retorne  false:

let i = 0;

while (i < 6) {
  console.log(`The value of i = ${i}`);
  i++;
}

Aqui, o  while loop imprimirá repetidamente o valor de  i enquanto  i for menor que  6. Em cada iteração, o valor de  i é incrementado em 1 até atingir 6 e o loop terminar.

Lembre-se de que você precisa incluir um trecho de código que eventualmente transforme a condição de avaliação em,  false ou o  while loop será executado para sempre. O exemplo abaixo causará um loop infinito:

let i = 0;

while (i < 6) {
  console.log(`The value of i = ${i}`);
}

Como o valor de  i nunca muda, o loop while continuará para sempre!

Quando usar um loop while

Visto que tanto  while e  for podem ser usados para executar um trecho de código repetidamente, quando você deve usar um  while loop em vez de  for?

Uma maneira fácil de saber quando você deve usar  while é quando  você não sabe quantas vezes  precisa executar o código.

Voltando ao exemplo do cara ou coroa, há um caso que é perfeito para um  while loop:

Descubra quantas vezes você precisa lançar uma moeda até que ela caia em cara.

Você também precisa  mostrar quantas vezes  você joga a moeda até que ela caia em cara:

let flips = 0;
let isHeads = false;

while (!isHeads) {
  flips++;
  isHeads = Math.random() < 0.5;
}

console.log(`It took ${flips} flips to land on heads.`);

Aqui, a condição  isHead = Math.random() < 0.5 simula o lançamento de uma moeda honesta. Quando o resultado é  true, significa que a moeda caiu em cara e o loop será encerrado.

Como você não pode saber quantas vezes precisa fazer o loop até obter cara, você precisa usar um  while loop em vez de um  for loop.

Exercício #6

Escreva um programa que imprima uma meia pirâmide usando asteriscos,  * como mostrado abaixo:

*
**
***
****
*****

Em seguida, imprima uma pirâmide invertida da seguinte maneira:

*****
****
***
**
*

13 - Funções em JavaScript

Uma função é simplesmente uma seção (ou um bloco) de código escrito para executar uma tarefa específica.

Por exemplo, a função de conversão de tipo  String() é usada para converter dados de outro tipo em uma string.

Os  console.log() métodos de array e vários outros que aprendemos nos capítulos anteriores também são funções. Mas, como essas funções são chamadas a partir de um objeto, elas são chamadas de métodos.

Você aprenderá mais sobre métodos mais adiante no Capítulo 14. Por enquanto, saiba apenas que uma função e um método são essencialmente a mesma coisa, exceto que um método é chamado de um objeto.

Além das funções integradas fornecidas pelo JavaScript, você também pode criar sua própria função.

Como criar sua própria função

A criação de uma função começa com a digitação da  function palavra-chave seguida do nome da função, um par de colchetes curvos e, em seguida, um par de chaves.

Aqui está um exemplo:

function greet() {
  // function body here
  console.log("Hello!");
}

Para chamar uma função, você precisa especificar o nome da função seguido por parênteses:

greet(); // Hello!

O código dentro da função é executado quando você chama essa função.

Parâmetros e argumentos da função

Parâmetros são variáveis usadas para aceitar entradas fornecidas quando a função é chamada.

Você pode especificar parâmetros no cabeçalho da função, dentro dos parênteses.

O exemplo a seguir mostra uma função que tem um parâmetro chamado  name:

function greet(name) {
  // function body
}

A maneira como você usa esse  name parâmetro dentro da função fica por sua conta.

Você pode usar o parâmetro dentro da  print() função da seguinte maneira:

function greet(name) {
  console.log(`Hello, ${name}!`);
  console.log("Nice weather today, right?");
}

Agora, sempre que você precisar chamar a  greet() função, precisará passar uma entrada para preencher o  name parâmetro.

A entrada que você passou para preencher um parâmetro é chamada de argumento, e veja como fazer isso:

greet("Peter");

A string 'Peter' dentro dos parênteses ao chamar a  greet() função será passada como  name parâmetro.

Execute o código para receber esta saída:

Hello, Peter!
Nice weather today, right?

Você pode ter mais de um parâmetro ao definir a função, mas precisa separar cada parâmetro com uma vírgula, da seguinte maneira:

function greet(name, weather) {
  console.log(`Hello, ${name}!`);
  console.log(`It's ${weather} today, right?`);
}

greet("Nathan", "rainy");

Saída:

Hello, Nathan!
It's rainy today, right?

Ao especificar dois parâmetros no cabeçalho da função, você precisa passar dois argumentos. Se você chamar a função sem passar os argumentos, o valor será  undefined.

Na próxima seção, você aprenderá como criar parâmetros com valores padrão, o que lhe permite chamar a função sem precisar passar um argumento para ela.

Mas, por enquanto, espero que você perceba a conveniência de ter parâmetros. Eles tornam suas funções mais adaptáveis e reutilizáveis, aceitando diferentes valores de entrada para cobrir uma variedade de cenários que a função pode ter.

Como mostrado no exemplo, os  parâmetros name e  weather permitem que você cumprimente muitas pessoas diferentes em climas diferentes.

Esteja ensolarado, chuvoso ou nublado, basta mudar os  name argumentos  weather e quando quiser cumprimentar outra pessoa.

Parâmetros padrão

Ao definir uma função, você pode definir um valor padrão para qualquer parâmetro nessa função.

Por exemplo, o  name parâmetro na função abaixo é um parâmetro padrão:

function greet(name = "Nathan") {
  console.log(`Hello, ${name}!`);
  console.log("Nice weather today, right?");
}

Aqui, o valor padrão 'Nathan' será usado quando nenhum valor ou  undefined for passado para o  name parâmetro.

Você pode testar isso chamando a  greet() função sem um argumento da seguinte maneira:

greet();
greet("Jack");

Saída:

Hello, Nathan!
Nice weather today, right?

Hello, Jack!
Nice weather today, right?

Qualquer função que você definir pode ter uma mistura de parâmetros padrão e não padrão.

Aqui está outro exemplo de uma função que tem um parâmetro padrão chamado  name e um parâmetro não padrão chamado  weather:

function greet(weather, name = "Nathan") {
  console.log(`Hello, ${name}!`);
  console.log(`It's ${weather} today, right?`);
}

greet("sunny");

Saída:

Hello, Nathan!
It's sunny today, right?

Observe que o  weather parâmetro foi colocado antes do  name parâmetro. Isso é prático, para que você não precise especificar o parâmetro padrão.

Se você colocar o parâmetro não padrão depois do parâmetro padrão, precisará passar um valor para o  name parâmetro para chegar a  weather ele.

Considere o exemplo abaixo:

function greet(name = "Nathan", weather) {
  console.log(`Hello, ${name}!`);
  console.log(`It's ${weather} today, right?`);
}

greet(undefined, "sunny");

Para passar um argumento para o  weather parâmetro, precisamos passar  undefined ou qualquer valor para o  name parâmetro primeiro.

É por isso que é melhor especificar parâmetros não padrão antes dos parâmetros padrão.

Parâmetros padrão e nulo

No Capítulo 7, lembre-se de que exploramos brevemente a diferença entre  undefined o valor vazio "padrão" e  null o valor vazio "intencional".

Quando você passa  undefined para uma função que tem um parâmetro padrão, o parâmetro padrão será usado:

function greet(name = "John"){
  console.log(name);
}

greet(undefined); // John

Como você pode ver, o JavaScript imprime o valor do parâmetro padrão  Johnquando você passa  undefinedpara a função.

Mas quando você passa  nullpara a função, o parâmetro padrão será ignorado:

function greet(name = "John"){
  console.log(name);
}

greet(null); // null

Este é um dos erros comuns que iniciantes vêm ao aprender JavaScript. Quando você usa o valor  null, o JavaScript pensa que você quer que esse valor esteja vazio, então ele não o substitui pelo parâmetro padrão.

Ao usar  undefined, o JavaScript substituirá o parâmetro padrão. Você pode encontrar esse problema ao trabalhar com código JavaScript em sua carreira, então tenha isso em mente.

A declaração de retorno

Uma função também pode ter uma  returninstrução dentro do bloco de código. Uma  returninstrução é usada para retornar um valor ao chamador.

Por exemplo, a função a seguir retorna a soma de dois valores:

function sum(a, b) {
  return a + b;
}

let result = sum(3, 2);
console.log(result); // 5

O valor retornado por uma função pode ser atribuído a uma variável para operações posteriores. Você pode adicionar uma  returninstrução em qualquer lugar dentro da função.

Quando o JavaScript alcança a  returninstrução, ele ignora o código adicional escrito dentro do bloco de função e retorna para onde você chama a função.

A função a seguir tem duas instruções de retorno:

function checkAge(age) {
  if (age > 18) {
    return "You may get a car license";
  }
  return "You may not get a car license yet";
}

console.log(checkAge(20));
console.log(checkAge(15));

Saída:

You may get a car license
You may not get a car license yet

Quando chamamos a  checkAge()função pela primeira vez, o valor do  ageargumento é maior que 18, então o JavaScript executa a  returninstrução dentro do  ifbloco.

Na segunda vez que chamamos a função, a  ifcondição não é atendida, então o JavaScript executa a  returninstrução sob o  ifbloco.

Você também pode interromper a execução de uma função e retornar ao chamador especificando a  returninstrução sem nenhum valor:

function greet() {
  console.log("Hello!");
  return;
  console.log("Good bye!");
}

greet()

Saída:

Hello!

Aqui, a  returninstrução é chamada entre as  console.log()chamadas.

O JavaScript executa a primeira  console.log()chamada e, em seguida, ignora o restante do código. Uma string "Adeus!" não é impresso.

Escopo de variável

Agora que você está aprendendo sobre funções, é um bom momento para falar sobre escopo de variáveis.

Uma variável declarada dentro de uma função só pode ser acessada a partir dessa função. Isso ocorre porque essa variável tem um escopo local.

Por outro lado, uma variável declarada fora de qualquer bloco é conhecida como variável global devido ao seu escopo global.

Esses dois escopos são importantes porque, ao tentar acessar uma variável local do escopo, você receberá um erro. Por exemplo:

function greet() {
  let myString = "Hello World!";
}

greet();
console.log(myString);

Quando você executa o código acima, o JavaScript responde com um erro:

ReferenceError: myString is not defined

Isso ocorre porque a  myStringvariável é declarada dentro da  greet()função, então você não pode acessá-la fora dela. Não importa se você chamou a função antes de acessar a variável.

Enquanto isso, uma variável global pode ser acessada de qualquer lugar, até mesmo dentro de uma função:

let myString = "Hello World!";

function greet() {
  console.log(myString);
}

greet(); // Hello World!

Aqui, a  greet()função é capaz de acessar uma  myStringvariável declarada fora dela.

Tenha em mente que isso se aplica somente às variáveis declaradas usando  lete  const.

Em seguida, você também pode definir uma variável local com o mesmo nome da variável global sem sobrescrevê-la.

Aqui está um exemplo:

let myString = "Hello World!";

function greet() {
  let myString = "Morning!";
  console.log(myString);
}

greet();  // Morning!
console.log(myString); // Hello World!

Quando você chama a  greet()função, uma variável de chamada local  myStringrecebe uma string 'Bom dia!'.

Fora da função, a variável global que também é chamada  myStringainda existe, e o valor não é alterado.

JavaScript considera a variável de escopo local como uma variável diferente. Quando você declara a mesma variável dentro de uma função, qualquer código dentro da função sempre será referido à variável local.

Na prática, raramente você precisa declarar a mesma variável em escopos diferentes:

1. Qualquer variável declarada fora de uma função não deve ser usada dentro de uma função sem passá-la como parâmetro.
2. Uma variável declarada dentro de uma função nunca deve ser referenciada fora dessa função

Tenha isso em mente ao escrever funções JavaScript.

O parâmetro de descanso

O parâmetro rest é um parâmetro que pode aceitar qualquer número de dados como argumento. Os argumentos serão armazenados como um array.

Você pode definir um parâmetro rest no cabeçalho da função adicionando três pontos  ... antes do nome do parâmetro.

Aqui está um exemplo de criação de uma função que tem um argumento de comprimento variável:

function printArguments(...args){
    console.log(args);
}

Ao chamar a  printArguments() função acima, você pode especificar quantos argumentos quiser:

function printArguments(...args){
    console.log(args);
}

printArguments("A", "B", "C"); 
// [ 'A', 'B', 'C' ]
printArguments(1, 2, 3, 4, 5);
// [ 1, 2, 3, 4, 5 ]

Tenha em mente que uma função só pode ter um parâmetro rest, e o parâmetro rest deve ser o último parâmetro na função.

Você pode usar um parâmetro rest quando sua função precisa trabalhar com um número indefinido de argumentos.

Função de seta

A  sintaxe da função de seta do JavaScript  permite que você escreva uma função JavaScript com uma sintaxe mais curta e concisa.

Quando você precisa criar uma função em JavaScript, o método principal é usar a  function palavra-chave seguida do nome da função, conforme mostrado abaixo:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

greetings("John"); // Hello, John!

A sintaxe da função de seta permite que você crie uma expressão de função que produza o mesmo resultado que o código acima.

Aqui está a  greetings() função usando a sintaxe de seta:

const greetings = (name) => {
  console.log(`Hello, ${name}!`);
};

greetings("John"); // Hello, John!

Ao criar uma função usando a sintaxe da função de seta, você precisa atribuir a expressão a uma variável para que a função tenha um nome.

Basicamente, a sintaxe da função de seta se parece com o seguinte:

const fun = (param1, param2, ...) => {
  // function body
}

No código acima,

• fun é a variável que contém a função. Você pode chamar a função como  fun() descrito mais adiante no seu código.
• (param1, param2, ...) são os parâmetros da função. Você pode definir quantos parâmetros forem necessários para a função.
• Depois você tem a seta  => para indicar o início da função.

O código acima é igual ao seguinte:

const fun = function(param1, param2, ...) {
  // function body
}

A sintaxe da função de seta não adiciona nenhuma nova capacidade à linguagem JavaScript.

Em vez disso, ele oferece melhorias na maneira como você escreve uma função em JavaScript.

A princípio pode parecer estranho, pois você está acostumado com a  function palavra-chave.

Mas quando você começar a usar a sintaxe de seta, verá que é muito conveniente e fácil de escrever.

Funções de seta simples e multilinha

A função de seta fornece uma maneira de escrever uma função de linha única em que o lado esquerdo da seta  =>é retornado para o lado direito.

Ao usar a  functionpalavra-chave, você precisa usar as chaves  {}e  returna palavra-chave da seguinte maneira:

function plusTwo(num) {
  return num + 2;
}

Usando a função de seta, você pode omitir as chaves e  returna palavra-chave, criando uma função de linha única, como mostrado abaixo:

const plusTwo = (num) => num + 2;

Sem as chaves, o JavaScript avaliará a expressão no lado direito da sintaxe de seta e retornará ao chamador.

A sintaxe da função de seta também funciona para uma função que não tenha  returnum valor, como mostrado abaixo:

const greetings = () => console.log("Hello World!");

Ao usar a sintaxe da função de seta, as chaves são somente quando você tem um corpo de função multilinha:

const greetings = () => {
  console.log("Hello World!");
  console.log("How are you?");
};

Função de seta sem parênteses arredondadas

Os colchetes  ()são usados em funções JavaScript para indicar as configurações que a função pode receber.

Ao usar a  functionpalavra-chave, os colchetes são sempre necessários:

function plusThree(num) {
  return num + 3;
}

Por outro lado, a função de seta permite que você omita os colchetes quando você tem  exatamente um parâmetro  para a função:

O exemplo de código a seguir é uma expressão de função de seta válida:

const plusThree = num => num + 3;

Como você pode ver, você pode remover as chaves e os colchetes, bem como a return palavra-chave.

Mas você ainda precisa dos colchetes para duas condições:

• Quando a função não tem parâmetro
• Quando a função tem mais de um parâmetro

Quando você não tem nenhum parâmetro, você precisa colocar colchetes antes da seta, como mostrado abaixo:

const greetings = () => console.log("Hello World!");

O mesmo se aplica quando você tem mais de um parâmetro.

A função abaixo tem duas parâmetros:  namee  age.

const greetings = (name, age) => console.log("Hello World!");

A sintaxe de seta torna os colchetes redondos indiretamente quando você tem uma função de parâmetro único.

A função de seta não possui argumentos de vinculação

Ao usar a  functionpalavra-chave para definir uma função, você pode acessar os argumentos passados para a função usando a  argumentspalavra-chave desta forma:

const printArgs = function () {
  console.log(arguments);
};

printArgs(1, 2, 3);
// [Arguments] { '0': 1, '1': 2, '2': 3 }

A  argumentspalavra-chave no código acima se refere ao objeto que armazena todos os argumentos que você passou para a função.

Por outro lado, a função de seta não tem o  argumentsobjeto e gerará um erro quando você tentar acessá-lo:

const printArgs = () => console.log(arguments);

printArgs(1, 2, 3);
//Uncaught ReferenceError: arguments is not defined

Você pode usar a sintaxe de propagação do JavaScript para imitar a  argumentsvinculação da seguinte maneira:

const printArgs = (...arguments) => console.log(arguments);

printArgs(1, 2, 3);
// [1, 2, 3]

Ao usar a sintaxe de propagação, os argumentos que você passou para a função de seta serão armazenados em uma matriz.

Observe  que você precisa dos colchetes mesmo se estiver passando apenas um argumento para a função.

Você pode acessar o dado  argumentscom a notação de índice de matriz como  arguments[0],  arguments[1], e assim por diante.

Como converter uma função normal em uma função de seta facilmente

Você pode seguir os  três passos simples  abaixo para converter uma função normal em uma função de seta:

1. Substitua a  functionpalavra-chave pela palavra-chave variável  letouconst
2. Adicione  =o símbolo após o nome da função e antes dos colchetes
3. =>símbolo após os parênteses Adicionar  arredondados

O código abaixo ajudará você a visualizar as etapas:

function plusTwo(num) {
  return num + 2;
}

// step 1: replace function with let / const
const plusTwo(num) {
  return num + 2;
}

// step 2: add = after the function name
const plusTwo = (num) {
  return num + 2;
}

// step 3: add => after the round brackets
const plusTwo = (num) => {
  return num + 2;
}

Os três passos acima são suficientes para converter qualquer sintaxe antiga de função JavaScript para uma nova sintaxe de função de seta.

Quando você tem uma função de linha única, há uma quarta etapa opcional para remover as chaves e  returna palavra-chave da seguinte maneira:

// from this
const plusTwo = num => {
  return num + 2;
};

// to this
const plusTwo = num => num + 2;

Quando você tem exatamente um parâmetro, você também pode remover os colchetes:

// from this
const plusTwo = (num) => num + 2;

// to this
const plusTwo = num => num + 2;

Mas os dois últimos passos são questionáveis. Apenas os três primeiros passos são necessários para converter qualquer código JavaScript. function e use a sintaxe da função de seta.

Exercício #7

Escreva uma função  calculateSquare()usada para calcular a área e o perímetro de um quadrado.

A função aceita um parâmetro: o  sidedo quadrado.

A fórmula para calcular a área é  side * side, e a fórmula para calcular o perímetro é  4 * side.

A saída mostra o tamanho do tamanho, a área e o perímetro da seguinte forma:

The square side is 8
The area of the square is 64
The perimeter of the square is 32

14 - Objetos em JavaScript

Um objeto é um tipo de dado especial que permite armazenar mais de um valor, assim como uma matriz.

A diferença entre um objeto e uma matriz é que uma matriz armazena dados como uma lista de itens, enquanto um objeto armazena dados em um  key:value formato de par.

Vejamos um exemplo que ilustra essa diferença. Suponha que você queira armazenar informações sobre um livro no seu programa.

Quando você usa variáveis regulares, ficaria assim:

let bookTitle = "JavaScript Introduction";
let bookAuthor = "Nathan Sebhastian";

Embora funcione bem, certamente não é a melhor maneira de armazenar valores relacionados.

Outra maneira de armazenar o valor seria usar um array:

let myBook = ["JavaScript Introduction", "Nathan Sebhastian"];

Isso certamente é melhor, pois você pode agrupar dados relacionados sobre o livro, mas não tem como adicionar contexto ao valor.

É aqui que um objeto é útil. Você pode declarar um único objeto de livro e armazenar os dados no  key:value formato:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
};

Um objeto é declarado usando chaves  {}, e cada item dentro das chaves é escrito no  key:value formato.

Um item de objeto também é conhecido como uma propriedade, com a  chave  como nome da propriedade e  o valor  como valor da propriedade.

Assim como em uma matriz, você precisa separar cada item dentro de um objeto usando uma vírgula.

Você pode atribuir uma string ou números como chave de um item e pode atribuir qualquer tipo de dado como valor, incluindo uma função:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
  describe: function () {
    console.log(`Book title: ${this.title}`);
    console.log(`Book author: ${this.author}`);
  },
};

Aqui, a  describe chave ou propriedade é uma função que imprime o  valor title e  author do objeto.

A  this palavra-chave se refere ao contexto do código, que é o  myBook objeto neste caso.

Normalmente, uma chave de objeto é algo que fornece mais contexto ao valor que contém. Uma chave também deve ser única, portanto, você não pode usar a mesma chave duas vezes no mesmo objeto.

Por exemplo, se você tiver dados sobre um livro, poderá usar chaves de objeto como  title,  authore  price para ajudar a entender o contexto do valor armazenado em cada chave.

Como acessar valores de objetos

Para acessar o valor de um objeto, você pode usar a notação de ponto  .ou a notação de colchetes  [].

Aqui está um exemplo de uso da notação de ponto para acessar as propriedades do objeto:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
};

console.log(myBook.title);
console.log(myBook.author);

E aqui está como você usa os colchetes para acessar as mesmas propriedades:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
};

console.log(myBook["title"]);
console.log(myBook["author"]);

Tenha em mente que você precisa colocar o nome da propriedade entre aspas, como uma string, ou o JavaScript pensando que você está passando uma variável dentro dos colchetes.

Como adicionar uma nova propriedade ao objeto

Você pode obter uma nova propriedade ao objeto usando a notação de ponto ou os colchetes como este:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
};

// add release year property
myBook.year = 2023;

// add publisher property
myBook["publisher"] = "CodeWithNathan";

console.log(myBook);

Quando você imprime o objeto, aqui está o resultado:

{
  title: 'JavaScript Introduction',
  author: 'Nathan Sebhastian',
  year: 2023,
  publisher: 'CodeWithNathan'
}

Você pode adicionar quantas propriedades precisar do mesmo objeto.

Como modificar propriedades de objetos

Para modificar uma propriedade existente, você precisa especificar uma propriedade do objeto existente usando uma notação de ponto ou colchete seguida pelo operador de atribuição da seguinte maneira:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
};

// change the author property
myBook.author = "John Doe";

console.log(myBook);

Saída:

{
  title: 'JavaScript Introduction',
  author: 'John Doe'
}

Como você pode ver, o  authorvalor da propriedade foi alterado.

Como excluir propriedades de objetos

Para excluir uma propriedade do seu objeto, você precisa usar o  deleteoperador da seguinte maneira:

let myBook = {
  title: "JavaScript Introduction",
  author: "Nathan Sebhastian",
};

delete myBook.author;

console.log(myBook);

Saída:

{ title: 'JavaScript Introduction' }

Ao tentar acessar uma propriedade restaurada, você obterá o  undefinedvalor.

Como verificar se existe uma propriedade em um objeto

Para verificar se existe uma determinada propriedade em seu objeto, você pode usar o  inoperador assim:

propertyName in myObject

O  inoperador retorna  truese  propertyNamenão existe seu objeto.

Veja o exemplo abaixo:

let person = {
  firstName: "Nathan",
  lastName: "Sebhastian"
}

// check if firstName exists
console.log('firstName' in person); // true

// check if age exists
console.log('age' in person); // false

Agora você sabe como manipular um objeto JavaScript.

Exercício #8

Crie um  personobjeto com as seguintes propriedades:

• name- o nome da pessoa
• age- a idade da pessoa
• greet()- uma função para cumprir outra pessoa

Dentro da  greet()função, introduza a pessoa, especificando o nome e a idade.

Aqui está um exemplo de saída:

person.greet();

Hello! My name is Alex and I'm 22 years old.

Exercício final: construir uma caixa registradora

Vamos construir uma caixa registradora que pode adicionar itens ao carrinho de compras, calcular o preço total, economizar descontos e aceitar pagamento em dinheiro.

A moeda é assumida em USD, então você não precisa adicionar o programa.

A caixa registradora tem 3 itens à venda:

• Telefone por 300
• Smart TV por 220
• Console de jogos por 150

Há um desconto de 10% quando o preço total é superior a 400.

A caixa registradora deve ter um carrinho de compras que começa vazio.

A caixa registrada deve fornecer um método chamado  addItemque recebe o nome de um item como parâmetro. Ao ligar, ele deverá verificar se o item está disponível para venda. Em caso afirmativo, o item deve ser adicionado ao carrinho de compras. Se não estiver disponível, exiba uma mensagem informando que não vendemos esse item.

A caixa registradora deve fornecer um método  calculateTotalPriceque calcula o preço total de todos os itens no carrinho de compras. Ele deve iterar sobre os itens no carrinho de compras e somar seus preços.

A caixa registrada deve fornecer um método chamado  payque recebe o valor do pagamento como parâmetro.

O preço total dos itens no carrinho de compras deve ser calculado usando o  calculateTotalPricemétodo . Se o preço total for superior a 400, um desconto de 10% deverá ser aplicado.

O método deve então comparar o valor do pagamento com o preço total (após aplicar o desconto) e exibir uma mensagem específica:

• Se o valor do pagamento for igual ou superior ao preço total, deverá ser exibida uma mensagem agradecendo ao cliente pela compra. Se houver troco, também deverá ser especificado o valor do troco a ser dado.
• Se o valor do pagamento for menor que o preço total, deverá ser exibida uma mensagem indicando que o cliente não tem dinheiro suficiente para comprar os itens.
• O programa deve incluir instruções específicas  console.log()para exibir mensagens sobre adição de itens ao carrinho de compras, exibição do preço total e processamento do pagamento.

O programa deve lidar com cenários em que o valor do pagamento do cliente é exatamente igual ao preço total, bem como casos em que o valor do pagamento é maior ou menor que o preço total.

Para construir o programa, você precisa usar o que aprendeu sobre objetos, matrizes, condicionais e loops.

Recomendo que você tente criar o programa sozinho primeiro. Se não conseguir, veja a solução abaixo. Boa sorte!

Conclusão

Parabéns por terminar este manual! Passamos por vários conceitos juntos para aprender a programar usando JavaScript.

Espero que você tenha gostado do processo tanto quanto eu gostei de escrevê-lo. Adoraria receber seu feedback e saber o que você gostou e o que não gostou para poder melhorar o tutorial.

Se você quiser aprender mais sobre JavaScript, estou criando um curso que ajuda você a usar JavaScript para criar aplicativos web. Ele está em pré-venda, então você pode adquirir o curso por um preço menor e apoiar meu trabalho na criação de mais tutoriais. Você pode  conferir aqui  .

Soluções

Exercício #1

console.log("Your name here");
console.log("Your age here");
console.log("Your occupation here");

Exercício #2

let name = "Your name here";
let age = "Your age here";
let occupation = "Your occupation here";

console.log(name);
console.log(age);
console.log(occupation);

Exercício #3

1
false
true
true
true
false

Exercício #4

let colors = ["red", "green", "blue"];

colors.push("black");
console.log(colors);

colors.shift();
colors[0] = "blue";
colors[1] = "green";
console.log(colors);

colors.unshift("yellow");
console.log(colors);

Exercício #5

Usando  if...elsea instrução:

let grade = "A";

if (grade === "A") {
  console.log("You got an A, so here's a Chocolate for you!");
} else if (grade === "B") {
  console.log("You got a B, here's a Cookie for you!");
} else if (grade === "C") {
  console.log(
    "You got a C, there's room for improvement and here's your Candy!"
  );
} else {
  console.log("No reward to give.");
}

let grade = "A";
switch (grade) {
  case "A":
    console.log("You got an A, so here's a Chocolate for you!");
    break;
  case "B":
    console.log("You got a B, here's a Cookie for you!");
    break;
  case "C":
    console.log(
      "You got a C, there's room for improvement and here's your Candy!"
    );
    break;
  default:
    console.log("No reward to give.");
}

Usando  switch...casea instrução:

Exercício #6

Padrão de meia pirâmide:

let pattern;

for (let i = 1; i <= 5; i++) {
  pattern = "";
  for (let j = 1; j <= i; j++) {
    pattern += "*";
  }
  console.log(pattern);
}

Padrão de meia pirâmide invertida:

for (let i = 4; i >= 0; i--) {
  pattern = "";
  for (let j = 0; j <= i; j++) {
    pattern += "*";
  }
  console.log(pattern);
}

Exercício #7

function calculateSquare(side) {
  console.log(`The square side is ${side}`);
  console.log(`The area of the square is ${side * side}`);
  console.log(`The perimeter of the square is ${4 * side}`);
}

calculateSquare(7);

Exercício #8

const person = {
  name: "Alex",
  age: 22,
  greet: function () {
    console.log(
      `Hello! My name is ${this.name} and I'm ${this.age} years old.`
    );
  },
};

person.greet();

Exercício final

const cashRegister = {
  itemsForSale: [
    { name: "Phone", price: 300 },
    { name: "Smart TV", price: 220 },
    { name: "Gaming Console", price: 150 },
  ],
  shoppingCart: [],
  addItem: function (name) {
    let foundItem = this.itemsForSale.find(function (item) {
      return item.name === name;
    });
    if (foundItem) {
      this.shoppingCart.push(foundItem);
      console.log(`Adding ${name} to your shopping cart`);
    } else {
      console.log(`Sorry, we don't sell ${name} here!`);
    }
  },
  calculateTotalPrice: function () {
    let totalPriceAmount = 0;
    this.shoppingCart.forEach(function (purchasedItem) {
      totalPriceAmount += purchasedItem.price;
    });
    return totalPriceAmount;
  },
  pay: function (amount) {
    let totalPriceAmount = this.calculateTotalPrice();
    if (totalPriceAmount > 500) {
      totalPriceAmount -= totalPriceAmount * 0.1;
      console.log(
        `You get a 10% discount and your total price is ${totalPriceAmount}`
      );
    }
    if (amount >= totalPriceAmount) {
      if (amount - totalPriceAmount > 0) {
        console.log(`Here's your ${amount - totalPriceAmount} change`);
      }
      console.log(`Thanks for your purchase! Hope you come again`);
    } else {
      console.log(
        "Sorry, but you don't have enough money to purchase your items"
      );
    }
  },
};

Para testar o objeto, execute o código abaixo:

cashRegister.addItem("Phone");
cashRegister.addItem("Smart TV");
console.log(cashRegister.calculateTotalPrice());
cashRegister.pay(700);

Saída:

Adding Phone to your shopping cart
Adding Smart TV to your shopping cart
520
You get a 10% discount and your total price is 468
Here's your 232 change
Thanks for your purchase! Hope you come again

Obrigado pela leitura!

Se você gostou deste manual e quer levar suas habilidades em JavaScript para o próximo nível, recomendo que você confira meu novo livro  Beginning Modern JavaScript  aqui  .

O livro foi projetado para ser fácil de entender e acessível a qualquer pessoa que queira aprender JavaScript. Ele fornece um guia passo a passo que ajudará você a entender como usar JavaScript para criar um aplicativo dinâmico.

Aqui está minha promessa:  você realmente sentirá que entende o que está fazendo com JavaScript.

Até a próxima