Reprograma - Turma online 8 front-end

Bem vindas a semana 10!

Vimos muita coisa até aqui e o objetivo dessa aula é nivelar e alinhar o conhecimento de vocês em JavaScript, vamos revisar mas também vamos aprender coisas novas!

O que vamos ver nessa semana?

1. Variáveis
2. String X Template strings
3. Condicional
   • if...else X Operador condicional ternário
   • switch
4. Function X Arrow function
5. Função Callback
6. Array
7. Métodos de iteração
   • while
   • for
   • for...in
   • forEach
   • find
   • map
   • filter
   • reduce
8. Objetos
9. JSON
10. Spoiler alert!!!

---

Variáveis

Declarando variáveis:

var nome = 'Reprograma'

Formato ES6:

const nome = 'Reprograma'

let idade = 18
idade = 19

MDN: var, const, let

---

String X Template strings

Template strings, uma nova forma de criar strings e tornar o seu código um pouco mais legível.

Exemplo de string:

const frase = 'Olá, mundo!'

console.log(frase)

Exemplo de template string:

const elogio = 'Maravilhosa'

const templateString = `Olá, ${elogio}`

console.log(templateString)

MDN: template strings

---

Condicional

if...else X Operador condicional ternário

Exemplo de condicional usando if...else:

const nota = 3

if (nota >= 7) {
  return 'aprovado'
} else {
  return 'reprovado'
}

Exemplo de condicional usando ternário:

const nota = 3

(nota >= 7) ? 'aprovado' : 'reprovado'

MDN: if...else, operador condicional ternário

---

switch

A estrutura condicional switch permite executar um bloco de código diferente de acordo com cada opção(case) especifica. Seu uso é indicado quando os valores a serem analisados nessas condições são pré-definidos.

Exemplo de condicional usando switch:

const expressao = 'Beyoncé';
switch (expressao) {
  case 'Shakira':
    console.log('É colombiana!');
    break;
  case 'Beyoncé':
  case 'Katy Perry':
    console.log('É americada!');
    break;
  case 'IZA':
    console.log('É brasileira!');
    break;
  default:
    console.log(`Desculpe, não encontramos a nacionalidade da ${expressao}.`);
}
// É americada!

Exemplo: O que acontece se eu esquecer um break?

Se você esquecer um break então o script irá rodar a partir do caso onde o critério foi correspondido e irá rodar também o caso seguinte independentemente do critério ter sido correspondido ou não

const expressao = 0;
switch (expressao) {
    case -1:
        console.log('Amo gatinhos!');
        break;
    case 0: // expressao é 0 então aqui o critério foi correspondido
        console.log('Amo cachorrinhos!')
        // NOTA: o break esquecido deveria estar aqui
    case 1: // nenhuma instrução break em 'case 0:' então verificação continua
        console.log('Amo esquilos!');
        break; // o programa encontra esse break então não vai continuar para o 'case 2:'
    case 2:
        console.log('Amo pandas!');
        break;
    default:
        console.log('Amo todos os animais!');
}
// Amo cachorrinhos!
// Amo esquilos!

MDN: switch

---

Function X Arrow function

Uma função é um procedimento, uma arrow function possui uma sintaxe mais curta quando comparada a uma função.

Declarando funções:

function falar() {
    return 'pipipi popopo'
}
console.log(falar()) // pipipi popopo

function dobro(num) {
    return num * 2
}
console.log(dobro(2)) // 4

function calcularMedia(nota1, nota2, nota3) {
    const soma = (nota1 + nota2 + nota3)
    const media = soma / 3
    return media
}
console.log(calcularMedia(10, 5, 6)) // 7

Ou, podemos declarar as mesmas funções da seguinte forma:

const falar = function() {
  return 'pipipi popopo'
}

const dobro = function(num) {
  return num * 2
}

const calcularMedia = function(nota1, nota2, nota3) {
  const soma = (nota1 + nota2 + nota3)
  const media = soma / 3
  return media
}

Arrow function possui uma sintaxe mais curta, e sabemos que é uma função pelo símbolo =>

const falar = () => {
  return 'pipipi popopo'
}

const dobro = (num) => {
  return num * 2
}

const calcularMedia = (nota1, nota2, nota3) => {
  const soma = (nota1 + nota2 + nota3)
  const media = soma / 3
  return media
}

Conseguimos deixar a função ainda mais concisa, pois:

• caso a função só tenha uma linha de instrução, as chaves {} são opcionais
• e ao remover as chaves {}, o return é implícito e, portanto, também removemos:

const falar = () => 'pipipi popopo'

const dobro = (num) => num * 2

const calcularMedia = (nota1, nota2, nota3) => (nota1 + nota2 + nota3) / 3

• caso a função só tenha 1 parâmetro, os parênteses em volta do parâmetro (param) também são opcionais:

const dobro = num => num * 2

MDN: funções,arrow function

---

Função Callback

Uma função callback é uma função passada a outra função como parâmetro, que é então invocada dentro da função externa para completar algum tipo de rotina ou ação.

function somar(a, b) {
  return a + b
}

function subtrair(a, b) {
  return a - b
}

function multiplicar(a, b) {
  return a * b
}

function dividir(a, b) {
  return a / b
}

function ordenar(a, b) {
  if (a <= b) {
    return [a, b]
  } else {
    return [b, a]
  }
}

function calcular(a, b, callback) {
  return callback(a, b)
}

const num1 = 7
const num2 = 2

const somaDoisNumeros = calcular(num1, num2, somar)
console.log(somaDoisNumeros) // 9

const subtracaoDoisNumeros = calcular(num1, num2, subtrair)
console.log(subtracaoDoisNumeros) // 5

const multiplicacaoDoisNumeros = calcular(num1, num2, multiplicar)
console.log(multiplicacaoDoisNumeros) // 14

const divisaoDoisNumeros = calcular(num1, num2, dividir)
console.log(divisaoDoisNumeros) // 3.5

const ordenarDoisNumeros = calcular(num1, num2, ordenar)
console.log(ordenarDoisNumeros) // [2, 7]

Deixando a sintaxe reduzida:

const somar = (a, b) => a + b

const subtrair = (a, b) => a - b

const multiplicar = (a, b) => a * b

const dividir = (a, b) => a / b

const ordenar = (a, b) => (a <= b) ? [a, b] : [b, a]

const calcular = (a, b, callback) => callback(a, b)

MDN: Função callback

---

Array

O objeto Array do JavaScript é um objeto global usado na construção de 'arrays'.

Declaração de array:

const lista = new Array('pera', 'uva', 'maçã', 'salada mista')

const numeros = [9, 2, 5]

Acessando elementos pela posição do array:

const primeiroItem = lista[0]

console.log(primeiroItem) // pera

Tamanho de array:

const tamanho = numeros.length

console.log(tamanho) // 4

Atribuição via desestruturação

const [primeiro, segundo, terceiro, quarto] = lista

console.log(primeiro) // pera
console.log(segundo) // uva
console.log(terceiro) // maçã
console.log(quarto) // salada mista

MDN: array, atribuição via desestruturação

---

Métodos de iteração

while

Um laço que executa uma rotina especifica enquanto a condição de teste for avaliada como verdadeira. A condição é avaliada antes da execução da rotina.

const numeros = [9, 2, 5]

let i = 0

while (i < numeros.length) {
  const dobro = numeros[i] * 2
  console.log(dobro)
  i++
}
// 18
// 4
// 10

MDN: while

---

for

A instrução for cria um loop que consiste em três expressões opcionais, dentro de parênteses e separadas por ponto e vírgula, seguidas por uma declaração ou uma sequência de declarações executadas em sequência(inicialização, condição , expressão final e declaração).

const numeros = [9, 2, 5]

for (let i = 0; i < numeros.lenght; i++) {
  const dobro = numeros[i] * 2
  console.log(dobro)
}
// 18
// 4
// 10

Modificando a lista de números:

const numeros = [9, 2, 5]

for (let i = 0; i < numeros.lenght; i++) {
  numeros[i] = numeros[i] * 2
}

console.log(numeros) // [18, 4, 10]

MDN: for

---

for...in

O laço for...in interage sobre as propriedades(keys) enumeradas de um objeto, na ordem original de inserção. O laço pode ser executado para cada propriedade distinta do objeto.

Exibindo cada propriedade(key) do objeto:

const cadeira = {
    material: "madeira",
    tipo: "jardim",
    ano: 1991
}

for (const key in cadeira) {
    console.log(key)
}
// material
// tipo
// ano

Exibindo cada propriedade(key) e valor(value) do objeto:

for (const key in cadeira) {
    const value = cadeira[key]
    console.log(`${key}: ${value}`)
}
// material: madeira
// tipo: jardim
// ano: 1991

MDN: for...in

---

forEach

O método forEach() executa uma dada função para cada elemento de um array.

const numeros = [9, 2, 5]

function dobrar(item) {
  const dobro = item * 2
  console.log(dobro)
}

numeros.forEach(dobrar)
// 18
// 4
// 10

Modificando a lista de números:

const numeros = [9, 2, 5]

function dobrar(item) {
  item = item * 2
}
numeros.forEach(dobrar)
console.log(numeros) // [9, 2, 5] 

// Ele usa o item do array de forma imutável(não muda), para resolver podemos usar os demais parâmetros da função callback
const numeros = [9, 2, 5]

function dobrar(item, index, numeros) {
    numeros[index] = item * 2
}
numeros.forEach(dobrar)
console.log(numeros) // [18, 4, 10]

Deixando mais conciso:

const numeros = [9, 2, 5]

numeros.forEach(function dobrar(item, index, numeros) {
    numeros[index] = item * 2
})

console.log(numeros) // [18, 4, 10]

Refatorando para JS moderno:

numeros.forEach((item, index, numeros) => numeros[index] = item * 2)

console.log(numeros) // [18, 4, 10]

MDN: forEach

---

map

O método map() invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado.

const numeros = [9, 2, 5]

function dobrar(item) {
  return item * 2
}

const numerosDobrados = numeros.map(dobrar)

console.log(numerosDobrados) // [18, 4, 10]

Deixando mais conciso:

const numerosDobrados = numeros.map(function (item) {
  return item * 2
})

console.log(numerosDobrados) // [18, 4, 10]

Refatorando para JS moderno:

const numerosDobrados = numeros.map(item => item * 2)

console.log(numerosDobrados) // [18, 4, 10]

Obs: o método map não altera o array original. Ele retorna um array novo com o resultado do map.

MDN: map

---

find

O método find executa a função callback uma vez para cada elemento presente no array até que encontre um onde callback retorne o valor true. Se o elemento é encontrado, find retorna imediatamente o valor deste elemento. Caso contrário, find retorna undefined.

const numeros = [9, 2, 5]

function procuraCinco(item) {
  return item === 5
}

const achouCinco = numeros.find(procuraCinco)

console.log(achouCinco) // 5

MDN: find

---

filter

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

const numeros = [9, 2, 5]

function impar(item) {
  return item % 2 !== 0
}

const numerosImpares = numeros.filter(impar)

Deixando mais conciso:

const numerosImpares = numeros.filter(function (item) {
  return item % 2 !== 0
})

Refatorando para JS moderno:

const numerosImpares = numeros.filter(item => item % 2 !== 0)

console.log(numerosImpares) // [9, 5]

Obs: o método filter não alterar o array original. Ele retorna um array novo com o resultado do filter.

MDN: filter

---

reduce

O método reduce recebe uma função callback com alguns parâmetros e essa função é executada a cada elemento presente no array. O resultado é a redução do array a um valor só. Normalmente, utilizamos os dois primeiros parâmetros: acumulador e itemAtual.

Por exemplo, podemos executar a soma de todos os valores do array utilizando o método reduce:

const numeros = [9, 2, 5]

function somarTodos(acumulador, itemAtual) {
  return acumulador + itemAtual
}

const numerosSomados = numeros.reduce(somarTodos)

console.log(numerosSomados) // 16

Deixando mais conciso:

const numerosSomados = numeros.reduce(function (acumulador, itemAtual) {
  return acumulador + itemAtual
})

console.log(numerosSomados) // 16

Refatorando para JS moderno:

const numerosSomados = numeros.reduce((acumulador, itemAtual) => acumulador + itemAtual)

console.log(numerosSomados) // 16

MDN: reduce

---

Objetos

Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos).

Declaração de objetos

const objeto = new Object()
objeto.nome = 'mesa'
objeto.tipo = 'madeira'
objeto.peso = 20

const pokemon = {
  nome: 'Pikachu',
  tipo: 'elétrico',
  altura: 40.6,
}

Acessando o valor de uma propriedade do objeto.

console.log(pokemon.nome) // Pikachu

Declarando uma variável de mesmo nome que a propriedade.

const nome = pokemon.nome
const tipo = pokemon.tipo
const altura = pokemon.altura

console.log(nome) // Pikachu
console.log(tipo) // elétrico
console.log(altura) // 40.6

Atribuição via desestruturação

const { nome, tipo, altura } = pokemon

console.log(nome) // Pikachu
console.log(tipo) // elétrico
console.log(altura) // 40.6

MDN: objetos, atribuição via desestruturação

---

JSON

JSON significa JavaScript Object Notation - Notação de Objetos JavaScript. É uma formatação leve de troca de dados. Para seres humanos, é fácil de ler e escrever. Para máquinas, é fácil de interpretar e gerar. Está baseado em um subconjunto da linguagem de programação JavaScript, a pesar disso, JSON é em formato texto e completamente independente de linguagem, pois usa convenções que são familiares à maioria das linguagens atuais.

Os dados salvos em um arquivo .json consistem em uma lista com uma sequencia de pares de chave / valor. Cujo formato se parece muito com o formato literal do objeto JavaScript.

    { 
      "key": "value" 
    }

  [
      {
          "key": "value"
      },
      {
          "key": "value"
      },
      {
          "key": "value"
      }
  ]

Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Porem, diferente das Arrays e Objetos os nomes das propriedades(key) devem ser strings com aspas duplas e as vírgulas à direita são proibidas.

  [
    {
        "id": 1,
        "nome": "Super Mario World",
        "plataformas": ["Wii", "New Nintendo 3DS", "Wii U", "Super Nintendo Entertainment System (SNES)"],
        "ativo": true,
        "Empresa": "Nintendo EAD",
        "imagem": "https://images.igdb.com/igdb/image/upload/t_cover_big/co23jy.jpg"
    },
    {
        "id": 2,
        "nome": "Angry Birds Fight!",
        "plataformas": ["Android"],
        "ativo": false,
        "Empresa": "Rovio Entertainment",
        "imagem": "https://images.igdb.com/igdb/image/upload/t_cover_big/myewkwhbaxeg5fugaaj9.jpg"
    }
  ]

MDN: JSON

---

Spoiler alert!!!

Na proxima semana vamos aprender requisições a APIs, então trouxe para vocês alguns materias e artigos para já nos familiarizarmos com o assunto. Divirtam-se!

• Protocolo HTTP, API e REST de forma resumida
• O que é API?
• Usando fetch API
• Promises: Uma abordagem simples
• Async e Await: Melhorando funções assíncronas

Aqui meus contatos, vamos nos conectar na redes suas maravilhosas !

• Linkedin
• Github
• Twitter
• Instagram
• Email: alessandrizes@gmail.com