Fundamentos de JavaScript

Área: Backend; Frontend | Nível recomendado: Iniciante

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.

Vídeo

Link direto: https://youtu.be/p-Gcsl6hIQQ

Material de Apoio

Repositório no GitHub

GitHub - SalvatoreAcademy/javascript-missao-aprendizado-iniciante-fundamentos-de-javascript: Projeto da Missão de Aprendizado do nível Iniciante: Fundamentos de JavaScript.GitHub

PDF para Download

1MB

JavaScript - Iniciante - Missão de Aprendizado - Fundamentos de JavaScript.pdf

pdf

Miro

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

Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.

Complete o código para declarar uma variável constante.

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

Resposta Correta

Resposta Correta:

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.

---

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

A) Verdadeiro

B) Falso

Resposta Correta

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.

---

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

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

Resposta Correta

Resposta Correta:

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.

---

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

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.

Resposta Correta

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.

---

Qual é o resultado da seguinte operação: `2 + '2'`?

A) 4

B) '22'

C) '4'

D) NaN

Resposta Correta

Resposta Correta: B

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

---

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

A) null

B) undefined

C) object

D) string

Resposta Correta

Resposta Correta: C

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

---

Qual é a diferença entre `==` e `===` em JavaScript?

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.

Resposta Correta

Resposta Correta: B

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

---

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

function soma(a, b) {
  __________;
}

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

Resposta Correta

Resposta Correta:

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.

---

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

A) true

B) false

Resposta Correta

Resposta Correta: A

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

---

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

A) true

B) false

Resposta Correta

Resposta Correta: A

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

---

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

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

Resposta Correta

Resposta Correta:

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.

---

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

A) ['abc']

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

C) ['a,b,c']

D) NaN

Resposta Correta

Resposta Correta: B

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

---

Exercícios de Validação

Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.

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

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.

Código Esperado

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.

---

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

Arquivo Inicial

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.

Código Esperado

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.

---

Revisão de Código

Analise o código a seguir, encontre e corrija o erro relacionado ao uso de funções assíncronas e await.

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

fetchData();

Resposta Correta

Erros:

1. O await deve ser usado ao chamar fetch.

Código Corrigido:

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.

---

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

// 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.

Código Esperado

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.