04-pt.md

Funções

Fazem parte do tipo de dado "objeto" e seu papel é permitir criar um bloco de código que pode ser invocado e executado quando quisermos. É útil para declararmos um determinado código uma vez dentro do bloco da função e executarmos sempre que necessário (onde e quando quisermos).

Podemos passar valores para as funções e esses valores serão utilizados para produzir um determinado output.

Para criar uma function declaration (onde inserimos o nome de uma função):

function sayHi() {
  console.log('hi')
}

// declaramos, porém não invocamos a função, ou seja, nada acontece.

O que de fato invoca a função é a utilização de ().

sayHi()

// hi

Também podemos criar uma function expression (onde atribuímos uma função a uma variável):

const showFood = function() {
  console.log('pizza')
}

showFood()
// pizza

Qual a diferença entre os dois tipos? A principal é o hoisting que significa "içamento", ou seja, puxar para cima. Quando usamos function declaration em qualquer lugar do código o JavaScript puxa a criação dessa função por debaixo dos panos para o topo do arquivo.

sayHi()

function sayHi() {
  console.log('hi')
}

// não há erro no código, o hoisting faz com que a função seja puxada para cima.

Já no caso de function expressions, elas existem a partir do momento em que são criadas.

showFood()

const showFood() {
  console.log('pizza')
}

// erro, pois não é possível invocar uma função que ainda não existe.

Arrow Functions

São uma das adições no JS moderno, e uma das suas utilizades é tornar a sintaxe mais curta e concisa.

// Função tradicional

const double = function(number) {
  return number * 2
}

//vamos alterar para a sintaxe de arrow function.

1o: Não é necessário usar a palavra function

const double = (number) => {
  return number * 2
}

2o: Se tiver apenas um parâmetro, não precisa usar (), porém se tiver mais de um parâmetro, ou nenhum parâmetro, ou quiser usar valor default, os () voltam a ser obrigatórios.

const double = number => {
  return number * 2
}

3o: Quando o bloco de código contém apenas uma linha retornando um valor, podemos eliminar as chaves e palavra return, deixando apenas uma linha.

const double = number => number *2

Obs - estamos falando de retornar uma expressão: qualquer pedaço de código que resulta em um valor. Ou seja, blocas de código (if, ou switch por exemplo não são expressões que resultam em um valor).

Métodos

Métodos também são funções, porém são invocados de forma diferente: por meio da anotação de ponto e invocação por parênteses. São funções associadas a objetos ou tipos de dados como strings. Os métodos são criados no objeto ou no tipo de dado em si (já as funções são criadas sozinhas).

const name = 'ana'

name.toUpperCase(name)

\\ toUpperCase é um método de strings.

ForEach

O forEach é um método de array para iteração. Funciona como um for, mas de uma forma mais elegante e funcional. Sua invocação requer uma função de callback como argumento. Podemos usar três parâmetros no forEach: o item do array, seu index e o array total.

Obs: callbacks são funções que passamos como argumentos de outras funções ou métodos no momento da invocação.

const fruits = ['apple', 'banana', 'watermelon']

fruits.forEach( (fruit, index, array) => {
  console.log( index, fruit, array )
})

// 0 "apple" (3) ["apple", "banana", "watermelon"]
// 1 "banana" (3) ["apple", "banana", "watermelon"]
// 2 "watermelon" (3) ["apple", "banana", "watermelon"]