# Fundamentos de JavaScript

{% hint style="info" %}
Reforçar e aplicar os fundamentos do JavaScript. Esta missão irá abordar conceitos essenciais de JavaScript que são a base para criar aplicações eficientes e escaláveis.
{% endhint %}

## Vídeo

{% embed url="<https://youtu.be/p-Gcsl6hIQQ>" %}

**Link direto:** <https://youtu.be/p-Gcsl6hIQQ>

## Material de Apoio

### Repositório no GitHub

{% embed url="<https://github.com/SalvatoreAcademy/javascript-missao-aprendizado-iniciante-fundamentos-de-javascript>" %}

### PDF para Download

{% file src="<https://1989749987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRonehqhrmNdVr43Njmfs%2Fuploads%2Fgit-blob-515b633b632ac9ccc509d2da36068bf2d06f17cd%2FJavaScript%20-%20Iniciante%20-%20Miss%C3%A3o%20de%20Aprendizado%20-%20Fundamentos%20de%20JavaScript.pdf?alt=media>" %}

### Miro

{% embed url="<https://miro.com/app/board/uXjVNQ6PZjQ=/?moveToWidget=3458764587647670384&cot=14>" %}

## Tópicos

1. **Revisão de Conceitos Básicos:**
   * Variáveis e tipos de dados.
   * Estruturas de controle (*loops*, condicionais).
   * Funções e escopo.
2. **JavaScript mais avançado:**
   * Exploração de funções assíncronas e *callbacks*.
   * Tratamento de erros e exceções.
   * Uso de módulos e `require`/`import` *statements*.
3. **ES6 e Além:**
   * Introdução a *arrow functions*, *promises*, e `async`/`await`.
   * Desestruturação, *spread operator* e outros recursos do ES6+.

## Exercícios de Fixação

{% hint style="info" %}
Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.
{% endhint %}

<details>

<summary>Complete o código para declarar uma variável constante.</summary>

```javascript
const __________ = 'valor constante';
console.log(__________);
```

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**:

```javascript
const valorConstante = 'valor constante';
console.log(valorConstante);
```

**Feedback**: A palavra-chave `const` é usada para declarar uma variável cujo valor não pode ser alterado.

</details>

***

<details>

<summary>Verdadeiro ou Falso: Em JavaScript, variáveis declaradas com `let` têm escopo de função.</summary>

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: B

**Feedback**: Falso. Variáveis declaradas com `let` têm escopo de bloco, o que significa que são limitadas ao bloco em que são definidas.

</details>

***

<details>

<summary>Complete o código para criar um array de números e acessar o terceiro elemento.</summary>

```javascript
const numeros = [1, 2, 3, 4, 5];
console.log(numeros[_____]);
```

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**:

```javascript
const numeros = [1, 2, 3, 4, 5];
console.log(numeros[2]);
```

**Feedback**: Os arrays em JavaScript são indexados a partir de zero, então o terceiro elemento está no índice 2.

</details>

***

<details>

<summary>Qual é a principal vantagem de utilizar `const` para declarar variáveis em JavaScript?</summary>

A) Variáveis declaradas com `const` não podem ser reatribuídas.

B) Variáveis declaradas com `const` têm melhor performance.

C) Variáveis declaradas com `const` são mais fáceis de depurar.

D) Variáveis declaradas com `const` têm escopo global.

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: A

**Feedback**: A principal vantagem de usar `const` é que variáveis declaradas com `const` não podem ser reatribuídas, o que ajuda a evitar erros.

</details>

***

<details>

<summary>Qual é o resultado da seguinte operação: `2 + '2'`?</summary>

A) 4

B) '22'

C) '4'

D) NaN

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: B

**Feedback**: Em JavaScript, o operador `+` quando usado entre um número e uma string realiza a concatenação, resultando em '22'.

</details>

***

<details>

<summary>Qual é a saída do seguinte código: `console.log(typeof null)`?</summary>

A) null

B) undefined

C) object

D) string

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: C

**Feedback**: Em JavaScript, `null` é considerado um objeto. Este é um comportamento legado e uma das peculiaridades da linguagem.

</details>

***

<details>

<summary>Qual é a diferença entre `==` e `===` em JavaScript?</summary>

A) Não há diferença, ambos comparam valores.

B) `==` compara valores, enquanto `===` compara valores e tipos.

C) `==` compara valores e tipos, enquanto `===` compara apenas valores.

D) `==` compara referências, enquanto `===` compara valores.

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: B

**Feedback**: O operador `==` compara valores após converter para um tipo comum, enquanto `===` compara tanto valores quanto tipos sem conversão.

</details>

***

<details>

<summary>Complete o código para criar uma função que retorne a soma de dois números.</summary>

```javascript
function soma(a, b) {
  __________;
}

console.log(soma(2, 3)); // Deve imprimir 5
```

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**:

```javascript
function soma(a, b) {
  return a + b;
}

console.log(soma(2, 3)); // Deve imprimir 5
```

**Feedback**: A função `soma` deve retornar a soma dos dois parâmetros recebidos.

</details>

***

<details>

<summary>Qual é a saída do seguinte código: `console.log(0 == false)`?</summary>

A) true

B) false

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: A

**Feedback**: Em JavaScript, `0` é considerado `false` em uma comparação com `==`, resultando em `true`.

</details>

***

<details>

<summary>Qual é a saída do seguinte código: `console.log([] == ![])`?</summary>

A) true

B) false

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: A

**Feedback**: Esta é uma peculiaridade do JavaScript, onde ambos os lados da comparação são convertidos para `false`, resultando em `true`.

</details>

***

<details>

<summary>Complete o código para desestruturar o objeto pessoa e acessar as propriedades nome e idade.</summary>

```javascript
const pessoa = { nome: 'Maria', idade: 30, cidade: 'São Paulo' };
const { _____, _____ } = pessoa;
console.log(nome, idade);
```

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**:

```javascript
const pessoa = { nome: 'Maria', idade: 30, cidade: 'São Paulo' };
const { nome, idade } = pessoa;
console.log(nome, idade);
```

**Feedback**: A desestruturação permite extrair valores de objetos de forma concisa, facilitando o acesso às propriedades.

</details>

***

<details>

<summary>Qual é a saída do seguinte código: `console.log([...'abc'])`?</summary>

A) \['abc']

B) \['a', 'b', 'c']

C) \['a,b,c']

D) NaN

</details>

<details>

<summary>Resposta Correta</summary>

**Resposta Correta**: B

**Feedback**: O operador spread `...` divide a string 'abc' em caracteres individuais, resultando em `['a', 'b', 'c']`.

</details>

***

## Exercícios de Validação

{% hint style="info" %}
Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.
{% endhint %}

### Desafio de Código

Implemente uma função que receba um array de números e retorne a soma de todos os elementos usando um loop `for`.

#### Arquivo Inicial

```javascript
function somaArray(numeros) {
  // Implemente aqui
}

const numeros = [1, 2, 3, 4, 5];
console.log(somaArray(numeros)); // Deve imprimir 15
```

#### Tarefas

* **Implementação do Loop**:
  * Use um loop `for` para iterar sobre o array e calcular a soma dos elementos.

<details>

<summary>Código Esperado</summary>

```javascript
function somaArray(numeros) {
  let soma = 0;
  for (let i = 0; i < numeros.length; i++) {
    soma += numeros[i];
  }
  return soma;
}

const numeros = [1, 2, 3, 4, 5];
console.log(somaArray(numeros)); // Deve imprimir 15
```

**Feedback Detalhado**

* **Implementação do Loop**: Certifique-se de usar um loop `for` para iterar sobre o array. Inicialize uma variável `soma` com zero e adicione cada elemento do array a esta variável durante a iteração.

</details>

***

Implemente uma função que receba uma string e retorne a contagem de cada caractere na string.

#### Arquivo Inicial

```javascript
function contarCaracteres(str) {
  // Implemente aqui
}

const str = 'abracadabra';
console.log(contarCaracteres(str)); // Deve imprimir { a: 5, b: 2, r: 2, c: 1, d: 1 }
```

#### Tarefas

* **Contagem de Caracteres**:
  * Use um objeto para manter a contagem de cada caractere na string.

<details>

<summary>Código Esperado</summary>

```javascript
function contarCaracteres(str) {
  const contagem = {};
  for (const char of str) {
    contagem[char] = (contagem[char] || 0) + 1;
  }
  return contagem;
}

const str = 'abracadabra';
console.log(contarCaracteres(str)); // Deve imprimir { a: 5, b: 2, r: 2, c: 1, d: 1 }
```

**Feedback Detalhado**

* **Contagem de Caracteres**: Use um objeto para armazenar a contagem de cada caractere. Itere sobre a string e incremente a contagem para cada caractere encontrado.

</details>

***

### Revisão de Código

{% hint style="danger" %}
**Analise o código a seguir, encontre e corrija o erro relacionado ao uso de funções assíncronas e `await`.**
{% endhint %}

```javascript
async function fetchData() {
  const response = fetch('https://api.exemplo.com/dados');
  const data = await response.json();
  console.log(data);
}

fetchData();
```

<details>

<summary>Resposta Correta</summary>

**Erros:**

1. O `await` deve ser usado ao chamar `fetch`.

**Código Corrigido:**

```javascript
async function fetchData() {
  const response = await fetch('https://api.exemplo.com/dados');
  const data = await response.json();
  console.log(data);
}

fetchData();
```

**Feedback**: Certifique-se de usar `await` ao chamar funções assíncronas, como `fetch`, para garantir que a promessa seja resolvida antes de continuar.

</details>

***

### Projeto Prático

Implemente um script JavaScript que utilize conceitos de variáveis, funções e objetos. O script deve:

1. Criar um objeto representando uma pessoa, com propriedades "nome", "idade" e "hobbies".
2. Adicionar um método ao objeto para adicionar novos hobbies.
3. Implementar uma função que imprima uma saudação personalizada utilizando as propriedades do objeto.
4. Implementar uma função que receba um array de pessoas e retorne a média de idades.

#### Arquivo Inicial

```javascript
// Implemente o objeto pessoa, método adicionarHobby e as funções solicitadas

const pessoas = [
  { nome: 'João', idade: 25, hobbies: ['ler', 'correr'] },
  { nome: 'Maria', idade: 30, hobbies: ['cozinhar', 'dançar'] },
  { nome: 'Ana', idade: 28, hobbies: ['nadar', 'pintar'] }
];

// Função para calcular a média de idades
```

#### Tarefas

* **Criação do Objeto**:
  * Crie um objeto `pessoa` com as propriedades e método conforme descrito.
* **Implementação das Funções**:
  * Implemente a função `saudacao` para imprimir uma mensagem personalizada.
  * Implemente a função `calcularMediaIdade` para retornar a média de idades das pessoas no array.

<details>

<summary>Código Esperado</summary>

```javascript
const pessoa = {
  nome: 'Carlos',
  idade: 35,
  hobbies: ['jogar futebol', 'cozinhar'],
  adicionarHobby: function(novoHobby) {
    this.hobbies.push(novoHobby);
  }
};

function saudacao(pessoa) {
  console.log(`Olá, meu nome é ${pessoa.nome} e eu tenho ${pessoa.idade} anos. Meus hobbies são: ${pessoa.hobbies.join(', ')}.`);
}

function calcularMediaIdade(pessoas) {
  const totalIdade = pessoas.reduce((acc, pessoa) => acc + pessoa.idade, 0);
  return totalIdade / pessoas.length;
}

pessoa.adicionarHobby('viajar');
saudacao(pessoa); // Olá, meu nome é Carlos e eu tenho 35 anos. Meus hobbies são: jogar futebol, cozinhar, viajar.

const mediaIdade = calcularMediaIdade(pessoas);
console.log(`A média de idades é ${mediaIdade}.`); // A média de idades é 27.666666666666668.
```

**Feedback Detalhado**

* **Criação do Objeto**: Adicione as propriedades "nome", "idade" e "hobbies" ao objeto `pessoa` e implemente o método `adicionarHobby`.
* **Implementação das Funções**: A função `saudacao` deve usar `this` para acessar as propriedades do objeto e imprimir a mensagem correta. A função `calcularMediaIdade` deve usar `reduce` para somar as idades e retornar a média.

</details>