Objetivo da aula: Nivelar e consolidar o conhecimento de JavaScript até então, com muita ênfase na prática e em desafios de lógica e programação
- Variáveis
- String X Template strings
- Condicional
- Function X Arrow function
- Função Callback
- Array
- Métodos de iteração
- [filter](#filter)
- [reduce](#reduce)
Declarando variáveis:
const nome = 'Bruna'
let num = 2
String é uma cadeia de caracteres, geralmente utilizada para representar palavras, frases ou textos de um programa. Template String são strings que permitem expressões embutidas
Exemplo de string:
const frase = 'Olá, mundo!'
console.log(frase)
Exemplo de template string:
const elogio = 'Maravilhosas'
const templateString = `Olá, ${elogio}`
console.log(templateString)
MDN: template strings
Exemplo de condicional usando if...else
:
const notaFinal = 3
if (nota >= 7) {
return 'aprovado'
} else {
return 'reprovado'
}
Exemplo de condicional usando ternário:
condição ? expressao1(se true) : expressao2(se false)
const notaFinal = 3
(nota >= 7) ? 'aprovado' : 'reprovado'
MDN: if...else, operador condicional ternário
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.Ele obrigatoriamente deve ter um "break", que finaliza a expressão
Exemplo de condicional usando switch
:
const expressao = 'Beyoncé';
switch (expressao) {
case 'Shakira':
console.log('É colombiana!');
break;
case 'Beyoncé':
case 'Katy Perry':
console.log('É americana!');
break;
case 'IZA':
console.log('É brasileira!');
break;
default:
console.log(`Desculpe, não encontramos a nacionalidade da ${expressao}.`);
}
// log: É americana!
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
Uma função é um procedimento Uma arrow function possui uma sintaxe mais curta, mas também é uma forma de declarar uma função
Declarando funções:
function falar() {
return 'Tchacabum'
}
console.log(falar()) // Tchacabum
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
Escrevendo as mesmas funções usando Arrow function:
const falar = () => {
return 'Tchacabum'
}
const dobro = (num) => {
return num * 2
}
const calcularMedia = (nota1, nota2, nota3) => {
const soma = (nota1 + nota2 + nota3)
const media = soma / 3
return media
}
MDN: funções,arrow function
Uma função callback é uma função que é passada para outra função como parâmetro. Assim ela é invocada dentro da função de fora 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) { // qualquer função de cálculo pode entrar como parâmetro
return callback(a, b) // essa função irá retornar o resultado da função interna
}
// Exemplo com números
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]
MDN: Função callback
O objeto Array do JavaScript é um objeto global usado na construção de 'arrays'. Array(Arranjo) é uma estrutura de dados que armazena uma coleção de elementos aonde cada um deles possa ser identificado por, pelo menos, um índice ou uma chave
Declaração de array:
const frutas = new Array('pera', 'uva', 'maçã', 'banana') ou
const frutas = ['pera', 'uva', 'maçã', 'banana']
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
Trabalhando com Array
Principais Métodos
- concat faz cópia simples do Array e adiciona os argumentos
- join cria um string do Array. Adiciona o argumento como cola entre cada membro do Array.
- shift remove e retorna o primeiro elemento
- pop remove e retorna o ultimo elemento
- unshift anexa os argumentos na frente do Array
- push anexa os argumentos no final do Array
- reverse inverte o Array sem copiá-lo
- slice faz cópia simples da porção do Array delimitada por argumentos do índice
- splice remove elementos especificados do Array, e os substitui com argumentos adicionais opcionais
- sort classifica o Array sem copiá-lo, opcionalmente usando um argumento comparador
- toString chama join sem passar um argumento
- indexOf retorna o primeiro elemento igual ao valor especificado, ou -1 *se nenhum for encontrado
- lastIndexOf retorna o último elemento igual ao valor especificado, ou -1 se nenhum for encontrado
- forEach aplica a função fornecida para todos elementos do Array map cria um novo Array contendo os resultados da aplicação da função a todos elementos do Array
- filter cria um novo Array contendo todos os elementos para os quais a função fornecida retorna verdadeiro
- reduce aplica uma função simultaneamente para dois valores do Array (da esquerda para a direita) de forma a reduzi-los a um valor único
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
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
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
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
O método
map()
invoca a funçãocallback
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
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
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
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
eitemAtual
.
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
Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções). Podem ser de qualquer tipo. Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos - com exceção de null e undefined - são tratados como objetos. Eles podem receber propriedades e possuem todas as características 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 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
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
--