Aula JS

aula_js.md

Aulas de JS

Tópicos a serem abordados

• Tipos de variáveis, escopo e closures (var, let, const, escopos function e {})
• Tipos e coerção (Boolean, null, undefined, Number, String, Object, Symbol e tabela de coerção)
• this, prototypes e classes
• Assincronia (event loop, setTimeout, setInterval, setImmediate, process.nextTick, Promise, function*, coroutines e async await)

Variáveis

• Simples declaração
• Shadowing/Ofuscação
• Sem var (hoisting, pq é perigoso, sobrescrever coisa importante. Deixar disponível ao Console)
• Ifs, while, nada tem escopo (mostrar outro caso de hoisting), exceto function e catch. Apenas com let e const
• let e const (principal diferença, escopo de bloco)
• const não pode ser redefinido, apesar de internamente pode ser alterado
• explicar de padrões de mercado (ember vs nós)

Closures

• O que são? Variáveis "acessíveis" de um escopo que já "morreu".

Exemplo:

function createProduct ({ name }) {
  let _name = name
  const getName = () => _name

  return {
    getName,
    // setName,
  }
}

const product = createProduct({ name: 'tênis' })

console.log(product)
console.log(product.getName())

Tipos

• Tem 7 tipos em JavaScript: Boolean, null, undefined, Number, String, Object, Symbol.
• Explicar coerção (tipos que podem virar false, ou true), pq é melhor usar === (diminui possibilidades, facilita para o compilador)
• Explicar undefined (var a). Valor não definido
• Explicar que null é um "marcador", para algo que já foi definido, mas não vale nada
• Explicar uma coersão util (== null ou != null)
• Tabela de coerção: https://dorey.github.io/JavaScript-Equality-Table/
• Explicar que objetos não são iguais pela memória, aqui que entra funções como deepEqual, que olham propriedade a propriedade
• Explicar que "tudo" são objetos (function, null, array)
• Mostrar método toString

Exemplo currying:

function soma (a, b) {
  if (a && b) {
    return a + b
  }

  if (a) {
    return (x) => a + x
  }

  throw new Error('número errado de parâmetros')
}


// console.log(soma.length)
console.log(soma(2))

Exemplo toString:

function a () {

}

a.prototype.toString = () => 'funcao maneira'

console.log('' + new a)

this

• Explicar global e variáveis

Começar com isso:

function abc () {
  console.log(this)
}

abc()

• this é definido por onde uma função é chamada, NÃO onde ela é definida

"Desafio":

function abc (callback) {
  // do work...
  callback()
}

const obj = {
  a: function () { console.log(this) }
}

abc(obj.a)

prototypes

• Prototype, é uma referência, que todo objeto em JavaScript tem. Caso um objeto não tenha uma propriedade, ela será buscada em seu prototype

const obj = {}

// obj = {}

Object.setPrototypeOf(obj, {a: 20})

// obj = { __proto__: { a: 20 } }

console.log(obj.a) // obj.a ? obj.a : obj.__proto__.a

Não use setPrototypeOf e/ou __proto__! Existem outras opções mais performáticas, uma delas é o Object.create:

const obj = Object.create({a: 20})

// obj = { __proto__: { a: 20 } }

console.log(obj) // {}
console.log(obj.a) // obj.a ? obj.a : obj.__proto__.a

new

function Animal (age) {
  this.age = age
}

const nada = Animal(5) // coloca age no global como variável

console.log(global.age) // ou só `age` mesmo
console.log(nada) // undefined

const animal = new Animal(6)

// new faz o seguinte:
// - Cria um objeto novo ({})
// - Seta o prototype dele, para ser da função que foi chamada com o new (Animal)
// - Chama a função "construtora" com os argumentos passados, e seta o this para o objeto criado
// - Caso nada seja retornado na função "construtora", retorna-se o objeto criado

classes

Não existem classes em JavaScript! A keyword class apenas converte para código com funções, prototypes, etc.

Como emular classes em JavaScript:

function Animal (age) {
  this.age = age
}

Animal.prototype.getAge = function () {
  return this.age
}

const animal = new Animal(2)

console.log(animal.getAge())

Herança:

function Animal (age) {
  this.age = age
}

Animal.prototype.getAge = function () {
  return this.age
}

const animal = new Animal(2)

console.log(animal.getAge())


function Cat (age) {
  Animal.call(this, age)
}

Cat.prototype = Object.create(Animal.prototype)

Cat.prototype.meow = function () {
  console.log('meow!')
}

const cat = new Cat(5)

console.log(cat.getAge())

cat.meow()

console.log(cat instanceof Animal)
console.log(cat instanceof Cat)

function bla () {

}

const sum = x => y => x + y

bla()

class Veiculo {
  constructor(tipo) {
    this.velocidade = 0
  }
}

class Carro extends Veiculo {
  constructor() {
    super()
    this.rodas = 4
  }

  andar() {
    console.log('anda')
    this.velocidade++
  }
}

const camaro = new Carro('r√°pido')
const fusca = new Carro('lento')

console.log(camaro)
console.log(fusca)

camaro.andar()

Vídeos sobre event loop:

https://www.youtube.com/watch?v=8aGhZQkoFbQ
https://www.youtube.com/watch?v=zphcsoSJMvM

Node.js event loop:

https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick

Explicar:

• new Promise
• then
• catch
• Promise.resolve
• Promise.reject
• Promise.all

const fs = require('fs')

fs.readFile('request_tables.js', 'utf-8', (error, arquivo) => {
  if (error) {
    return
  }
  console.log('arquivo', arquivo)
})

function readFilePromise (fileName) {
  return new Promise((resolve, reject) => {
    fs.readFile(fileName, 'utf-8', (error, arquivo) => {
      return reject(new Error('deu ruim pra ler o arquivo'))
      if (error) {
        return reject(error)
      }

      return resolve(arquivo)
    })
  })
}

readFilePromise('request_tables.js')
  .catch((error) => {
    console.log('catch', error)
    return Promise.resolve(2)
  })
  .then(valor => console.log('valor', valor))


// db.algumaCoisa()// errado
//   .catch()
//   .then()

// resolve
// fulfill
// reject

const um = () => Promise.resolve(1)
const dois = () => Promise.resolve(2)

Promise.all([um(), dois()])
  .then(([one]) => console.log('valores', one))
  .catch(error => console.log('error', error))