JavaScript Avançado Flashcards
ESCOPO
O escopo determina a visíbilidade de uma variavel
As funções do js criam o seu proprio escopo
As variaveis de uma função não acessiveis fora dela
Global quando a variavel esta fora da função//
Local quando a variavel esta dentro da função, entre as chaves//
Hoisting
Hoisting (IÇAR, ERGUER)
Hoisting é comportamento padrão do JavaScript de mover as declarações para o topo de um escopo.
JAVASCRIPT
function teste() {
outraFuncao()
function outraFuncao() {
console.log("Sou a outra função")
} }
teste()
Arrow Function
JAVASCRIPT
/* ARROW FUNCTIONS
ES6
As funções de seta nos permite escrever uma sintaxe de função mais curta
*/
const soma = (parm1 , parm2) => {
return parm1 + parm2
}
let result = soma(5, 5)
console.log(result)
// Retorno implicito (Aqui é um return)
const valor = (valor1, valor2) => valor1 + valor2
let value = valor(10, 10)
console.log(value)
//Quando for com um paramentro pode remover os parenteses
const teste = (test1) => test1
console.log(teste(“Hello world”))
const botao = document.querySelector(“#botao”)
botao.onclick = () => {
console.log(this)
}
Map
const clientes = [
{name: “Rodrigo”, lastName: “Santos”},
{name: “Marcos”, lastName: “Weber”},
{name: “Vinicius”, lastName: “Oliveira”}
]
console.log(clientes)
/* Monta pra mim um Array que vai ter o nome e sobrenome de cada um dos clientes que estão
no array.
*/
const listaClientes = clientes.map((cliente) =>{
return cliente.name + “ “ + cliente.lastName
})
console.log(listaClientes)
/*
FORMATO IMPLICITO
const listaClientes = clientes.map(cliente => cliente.name + “ “ + cliente.lastName)
console.log(listaClientes)
*/
Filter
const clientes = [
{name: “Rodrigo”, lastName: “Santos”, age: 22},
{name: “Marcos”, lastName: “Weber”, age: 27},
{name: “Vinicius”, lastName: “Oliveira”, age: 15},
{name: “Mateus”, lastName: “Viera”, age: 17},
{name: “Nicolas”, lastName: “Sunssão”, age: 25},
]
const clientesIdades = clientes.filter(cliente => {
let retorno = false
if(cliente.age >= 18) {
retorno = true
}
return retorno })
console.log(clientesIdades)
/* const clientesIdades = clientes.filter(cliente => cliente.age >= 18 */
Reduce
JAVASCRIPT
const clientes = [
{name: “Rodrigo”, score:40 },
{name: “Marcos”, score: 54},
{name: “Vinicius”, score: 92},
{name: “Mateus”, score: 23},
{name: “Nicolas”, score: 60},
]
//accumulator
//current
const clienteScore = clientes.reduce((acc, curr) => {
if(curr.score >= 50) {
acc.pass.push(curr)
} else {
acc.fail.push(curr)
}
return acc }, {
pass:[],
fail:[] })
console.log(clienteScore)
const numeros = [1,2,3,4,5]
const numerosFinal = numeros.reduce((acc,curr)=>{
acc += ${curr}-
return acc }, "")
console.log(numerosFinal)
JSON
/*
JSON
JAVASCRIPT OBJECT NOTATION
O formato JSON é utilizado para estruturar dados em formato de texto e permitir a troca de dados entre aplicações de forma simples, leve e rápida.
*/
const objeto = {
nome: “Taylor”,
idade: 21
}
const json = JSON.stringify(objeto)
const jsonParseado = JSON.parse(json)
console.log(jsonParseado.idade)
Local Storage
/*
LOCAL STORAGE
ARMAZENAMENTO LOCAL
PODEMOS ARMAZENAR DETERMINADO DADOS NO USUARIO.
*/
const tarefas = [
{ tarefa: “Estudar javascript”},
{tarefa: “Estudar Node.js”},
{tarefa: “Estudar react.js”},
]
const tarefasJson = JSON.stringify(tarefas)
localStorage.setItem(“Tarefa”, tarefasJson)
const listasTarefasSalvas = localStorage.getItem(“tarefas”)
const listasTarefasObj = JSON.parse(listasTarefasSalvas)
console.log(listasTarefasObj)
AJAX
AJAX
asynchronous JavasCript and XMl
Ele é um conjunto de técnicas de desenvolvimento voltado para a web que permite que aplicações trabalhem de modo assíncrono,
Síncrono VS Assíncrono
SINCRONO = é aquele que acontece em sequência e ordenado, seguindo uma fila.
ASSINCRONO = só começa após o atual ser concluído.
// SINCRONO
function primeira() {
console.log(“Primeira”)
for(let index; index < 1000; index++) {
} }
function segunda() {
console.log(“segunda”)
}
primeira()
segunda()
// ASSINCRONO
function primeira() {
console.log(“Primeira”)
}
function segunda() {
console.log(“segunda”)
}
setTimeout(primeira, 3000)
segunda()
CallBack
HTML
<button>Carregar fotos</button>
JAVASCRIPT
CALLBACKS
É UMA FUNÇÃO QUE PASSA OUTRA FUNÇÃO
function exibirNaTela(dados) {
console.log(“exibir na Tela”, dados)
}
const botaoCarregar = document.querySelector(“#botaoCarregar”)
botaoCarregar.onclick = () => carregarFotos(exibirNaTela)
function carregarFotos(callback) {
const xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
const response = JSON.parse(this.responseText)
if(callback) {
callback(response)
}
}
}
xhttp.open("GET","https://jsonplaceholder.typicode.com/photos", true)
xhttp.send()
}
Promise
PROMISE = (PROMESSA)
define uma ação que vai ser executada no futuro, ou seja, ela pode ser resolvida
(com sucesso) ou rejeitada (com erro).
function exibirNaTela(dados) {
console.log(“exibir na Tela”, dados)
}
function exibirErro() {
console.log(“Ops deu erro”)
}
const botaoCarregar = document.querySelector(“#botaoCarregar”)
botaoCarregar.onclick = () =>
carregarFotos()
.then(exibirNaTela)
.catch(exibirErro)
function carregarFotos() {
return new Promise((resolve, reject) => {
const xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
const response = JSON.parse(this.responseText)
resolve(response)
if(this.status === 404) {
reject()
}
}
}
xhttp.open("GET","https://jsonplaceholder.typicode.com/photoss", true)
xhttp.send()
})
}
Fetch
/*
FETCH
Fetch trabalha com promises em vez de callbacks
*/
function transformarJson(response) {
return response.json()
}
function exibirNaTela(dados) {
console.log(“exibir na Tela”, dados)
}
function exibirErro() {
console.log(“Ops deu erro”)
}
const botaoCarregar = document.querySelector(“#botaoCarregar”)
botaoCarregar.onclick = () =>
fetch(“https://jsonplaceholder.typicode.com/photos”)
.then(transformarJson)
.then(exibirNaTela)
.catch(exibirErro)
Async / await
async / await
transforma algo em assincrono em sincrono
*/
function transformarJson(response) {
return response.json()
}
function exibirNaTela(dados) {
console.log(“exibir na Tela”, dados)
}
function exibirErro() {
console.log(“Ops deu erro”)
}
const botaoCarregar = document.querySelector(“#botaoCarregar”)
botaoCarregar.onclick = aoClicarNoBotao
async function aoClicarNoBotao() {
const dados = await fetch(“https://jsonplaceholder.typicode.com/photos”)
.then(transformarJson)
.catch(exibirErro)
console.log(dados)
}
