Guia Completo de JavaScript: Funções e Arrow Functions

Neste post, vamos explorar as diferentes formas de criar funções em JavaScript e entender quando usar cada uma.

Funções Tradicionais

A forma clássica de declarar uma função em JavaScript:

function saudacao(nome) {
  return `Olá, ${nome}!`;
}

console.log(saudacao("Maria")); // Olá, Maria!

Arrow Functions

Introduzidas no ES6, as arrow functions oferecem uma sintaxe mais concisa:

const saudacao = (nome) => {
  return `Olá, ${nome}!`;
};

// Forma ainda mais curta
const saudacaoSimples = (nome) => `Olá, ${nome}!`;

Exemplo Prático: Filter e Map

Veja como as arrow functions brilham ao trabalhar com arrays:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filtrar números pares
const pares = numeros.filter(num => num % 2 === 0);
console.log(pares); // [2, 4, 6, 8, 10]

// Dobrar cada número
const dobrados = numeros.map(num => num * 2);
console.log(dobrados); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

Python também é legal!

Para comparar, veja como seria em Python:

def saudacao(nome):
    return f"Olá, {nome}!"

# List comprehension
numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
pares = [num for num in numeros if num % 2 == 0]
dobrados = [num * 2 for num in numeros]

print(pares)     # [2, 4, 6, 8, 10]
print(dobrados)  # [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

CSS: Estilizando com Variáveis

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
}

TypeScript: Tipagem Forte

interface Usuario {
  id: number;
  nome: string;
  email: string;
  ativo: boolean;
}

function criarUsuario(nome: string, email: string): Usuario {
  return {
    id: Math.random(),
    nome,
    email,
    ativo: true
  };
}

const usuario = criarUsuario("João", "joao@example.com");
console.log(usuario);

Conclusão

As arrow functions tornaram o JavaScript mais elegante e legível, especialmente para operações funcionais. Entender quando usar cada tipo de função é essencial para escrever código limpo e eficiente!