Tipos de declarações de funções em Javascript

Hey There 👏

Hoje venho compartilhar algo simples, que é, como podemos declarar funções em javascript e como as mesmas são denominadas.

Um termo muito utilizado no mundo JS é o Higher Order Function que tem como tradução literal Função de Ordem Superior, isso significa que funções são tratadas como dados em javascript, sendo as mesmas utilizadas em paramêtro, retornos e até mesmo em variáveis.

Bem, que tal aprendermos alguns termos utilizados na criação de funções?

Function Declaration 👾

function square() {}

Function Expression 👽

const square = function() {}

Named Function Expression 🤖

const square = function square() {}

Arrow Function 🐧

const square = () => {}

Obs: Lembrando que Arrow Function pode aprensentar um comportamento diferente das demais funções, pricinpalmente no que diz repeito ao uso do this.

É algo simples, mas que costuma sair em provas ou questionários. Espero ter ajudado! 🤝

Github: https://github.com/ericneves Linkedin: https://linkedin.com/in/ericnevesrr

kht há 2 anos

Vale lembrar que tem algumas diferenças entre eles.

Por exemplo, uma function declaration pode aparecer depois que esta é chamada, e funciona normalmente devido a um processo chamado hoisting (basicamente, é como se o interpretador "movesse" algumas declarações para o topo). Exemplo:

f(); // olá

function f() {
    console.log('olá');
}

Apesar de estar chamando a função antes da sua declaração, o código acima funciona normalmente (devido ao hoisting, a declaração é avaliada antes).

Mas function expressions não sofrem os efeitos do hoisting, então assim já não funciona:

f(); // TypeError: f is not a function

var f = function () {
    console.log('olá');
}

Mesmo se eu usasse uma named function expression (var f = function f() { etc), também daria o mesmo erro. E com arrow function, também não funcionaria, pois para estas também não é feito o hoisting.

E tem ainda um outro tipo (se bem que podemos considerar um "sub-tipo"), que é o IIFE (Immediately Invoked Function Expression), quando você declara a função e já a executa:

(function (texto) {
    console.log('olá', texto);
})('mundo'); // olá mundo

Por fim, sobre as diferenças entre function e arrow functions, não deixe de ler a documentação.

ericnevesr há 2 anos

Faltou a forma **IIFE**, obrigado por ressaltar isso e em relação ao hosting também, parabéns pelo comentário

henriquecustodia há 2 anos

Só complementando:

arrow functions "herdam" o this do contexto mais próximo. Mas nao declaram um contexto próprio.

Ex:

class A {
   methodA() { } 

   methodB() {
      const b = () => this.methodA()
   }
}

functions contém um this próprio, ou seja, um contexto.

Quando uma function é chamada diretamente (foo()) o this dela é undefined.

Se uma function é instanciada (new foo()) o this vai ser a instancia da function (da msm forma que acontece com classes).

Ex:

class A {
   methodA() { } 

   methodB() {
      const b = function() {
        this.methodA(); // vai dar erro pq this é undefined
      } 
      
      const a = new (function ()
   }
}

Function e arrow function são duas coisas diferentes. Muita gente confunde isso, pensando que são apenas formas diferente de declarar uma função

ericnevesr há 2 anos

Correto, muito boa observação, massa demais seu comentário

dedraks há 2 anos

Lembrando que arrow funcions também precisam ser declaradas antes de serem usadas. Eu gosto muito de usar arrow functions pra fazer callbacks junto com o jQuery. ```javascript $('#meu-seletor').on('click', () => { // Lógica do onlclick }) ``` Mas como o colega mencionou, se eu precisar do this, tenho que usar uma function normal. ```javascript $('#meu-seletor').on('click', function() { // Aqui eu tenho o this, referente ao objetor que gerou evento }) ```