Javascript: Arrow Functions

De Aulas
Revisão de 09h50min de 22 de abril de 2024 por Admin (discussão | contribs) (Criou página com 'Afluentes: Desenvolvimento Front-end I = Arrow Functions = As ''arrow functions'' foram introduzidas no ES6 e permitem escrever a sintaxe de uma função de forma mais r...')
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)

Afluentes: Desenvolvimento Front-end I

Arrow Functions

As arrow functions foram introduzidas no ES6 e permitem escrever a sintaxe de uma função de forma mais reduzida.

Código JavaScript sem arrow function:

function hello() {
  return "Hello World!";
}

O mesmo é válido da seguinte forma:

hello = function() {
  return "Hello World!";
}

Código JavaScript com arrow function:

hello = () => {
  return "Hello World!";
}

Por exemplo:

<!DOCTYPE html>
<html>
<body>
    <h1>Arrow Function</h1>

    <p>Demonstrando uma <i>arrow function</i> simples.</p>

    <p id="demo"></p>

    <script>
        hello = () => {
            return "Olá mundo!";
        }

        document.getElementById("demo").innerHTML = hello();
    </script>
</body>
</html>

E pode ficar mais curto ainda. Se a função retorna apenas um valor, é possível remover as chaves:

hello = () => "Hello World!";

Se a função tiver parâmetero, você pode passar eles dentro parênteses:

hello = (val) => "Hello " + val;

Ou sequer precisa usar os parênteses:

hello = val => "Hello " + val;