Funções e arrow functions
Declaração vs. expressão, arrow function e a diferença real de comportamento do 'this'.
3 jeitos de escrever a mesma função
// declaração de função — pode ser chamada antes mesmo de aparecer no arquivo
function somar(a, b) {
return a + b;
}
// expressão de função — só existe a partir da linha onde é definida
const subtrair = function (a, b) {
return a - b;
};
// arrow function — mais curta, e com uma diferença real de comportamento (abaixo)
const multiplicar = (a, b) => a * b;Parâmetro padrão e rest
function saudar(nome = "visitante") {
return `Olá, ${nome}!`;
}
saudar(); // "Olá, visitante!"
saudar("Ana"); // "Olá, Ana!"
function somarTodos(...numeros) {
return numeros.reduce((total, n) => total + n, 0);
}
somarTodos(1, 2, 3, 4); // 10A diferença real: arrow function não tem o próprio "this"
Uma função normal ganha seu próprio this dependendo de como ela é chamada. Uma arrow function não tem this próprio — ela usa o this de onde foi escrita. Isso importa muito dentro de um método de objeto ou de uma classe:
const contador = {
valor: 0,
incrementarNormal: function () {
setTimeout(function () {
this.valor++; // "this" aqui NÃO é o "contador" — é undefined/window
console.log(this.valor); // NaN ou erro
}, 100);
},
incrementarArrow: function () {
setTimeout(() => {
this.valor++; // arrow function herda o "this" de incrementarArrow, que É o contador
console.log(this.valor); // 1
}, 100);
},
};Essa é a razão prática de arrow function ser tão usada em callback (setTimeout, .then(), handler de evento dentro de um método) — evita o clássico bug de "this virou undefined dentro do callback".
Exercício
Escreva uma função ehPar(numero) que retorna true se o número for par, como arrow function.