3.6 Funções JS.md

Funções

Pontos importantes

1. Tipos de função

• Funções anônimas

  const soma = function (a, b) {
    return a + b;
  }

• Função autoinvocável

  const logaNomeCompleto = (
    function (name) {
      console.log(name + " da Silva")
    }
  )("João")     // João da Silva
  
  logaNomeCompleto("Pedro")     // Pedro da Silva

• Callback: função passada como parâmetro de outra

---

2. Parâmetros

• Valores padrão (pós-ES2015)

  function sum(a, b = 1) {
    return a + b;
  }
  
  console.log(3)  // 4

• Objeto arguments

    function logArgs() {
      console.log(arguments)
    }
  
    logArgs('a', 'b', 'c', 'd') // Arguments {0: 'a', 1: 'b', 2: 'c', 3: 'd'}

• Spread

    function logSum(x,y,z) {
      console.log(x+y+z)
    }
    
    const params = [1,2,3]
    logSum(...params)   // 6

• Rest

    function logLength(...args) {
      console.log(args.length)
    }
  
    logLength(1, 2, 3)   // 6

---

3. This

• A palavra this é uma referência ao contexto

  Contexto	Referência
  Objeto (método)	Próprio objeto dono do método
  Sozinha	Objeto global (window, no browser)
  Função	Objeto global
  Evento	Elemento que recebeu o evento

• Podemos manipular o valor do objeto global em funções com os métodos call, apply e bind da função
• Call

    const dog = {
      nome: "Rex"
    }
  
    function logNomeSoma(a, b) {
      console.log(`Nome: ${this.nome}, soma: ${a+b}`)
    }
  
    logNomeSoma.call(dog, 2, 3)  // Nome: Rex, soma: 5

• Apply
  • Muda apenas o uso de colchetes ao passar os argumentos

    const dog = {
      nome: "Rex"
    }
  
    function logNomeSoma(a, b) {
      console.log(`Nome: ${this.nome}, soma: ${a+b}`)
    }
  
    logNomeSoma.call(dog, [2, 3])  // Nome: Rex, soma: 5

• Bind
  • Clona a estrutura da função referenciada e atribuí um nome a ela

    const retornaNome = function () {
      return this.nome;
    }
  
    let bruna = retornaNomes.bind({ nome: 'Bruna' })
    bruna();  // Bruno

---

4. Arrow functions

  const sum = (a, b) => a+b
  cons logNum = a => { console.log(a) }

• Arrow function não faz hoisting
• O valor this sempre será o objeto global, os métodos apply, call e bind não funcionam
• Não existe o objeto arguments
• Não existe construtor