Vanilla Javascript - #5 Funções

Nesse vídeo iremos tratar de um assunto de grande importância no Javascript: funções. Aprenderemos como criá-las e utilizá-las.

Função Literal

Para criar uma função, nós a declararemos utilizando a palavra reservada function seguida do nome da função no padrão camelCase. Entre parênteses temos os parâmetros ou argumentos e entre as chaves temos o escopo da função. � uma boa prática que todas as funções gerem um retorno, como demontrado abaixo:

//multiplication of values
function multNumbers(x,y)
{
    let result = x * y;
    return result;
}

Para invocar a função, basta chamá-la pelo nome com os parêteses e os argumentos. Veja:

console.log(multNumbers(10,2));

No exemplo acima utilizamos o console.log apenas para exibir o resultado no console.

Expressão de Função

Outra forma de declarar uma função é através da expressão de função. Atribuímos a uma variável uma function. Assim:

let mult=function(x,y)
{
let result = x * y;
return result;
}

No caso das expressões, chamamos a função pelo nome da variável seguida dos parênteses e argumentos:

mult(10,2);

Métodos de objetos

Uma última maneira de usar funções é como métodos de objetos. Fique calmo, veremos objetos detalhadamente mais pra frente. Veja:

let objMult={
    func:function(x,y){
        let result = x * y;
        return result;
    }
}

Nesse caso a função se tornou uma propriedade do meu objeto objMult. Para invocá-la então devo fazer assim:

console.log(objMult.func(4,2));

Funções aninhadas ou closures

Funções aninhadas ou closures são funções dentro de outras funções. A função interna tem acesso a todos os dados da função externa, entretanto o contrário não é verdadeiro. Veja um exemplo:

//Set name for users
function myName(val)
{
    let name;

    function setName()
    {
        if(val == 1){
        name='Thiago';
        }else if(val == 2){
        name='Thais';
        }else{
        name='Nenhum dado foi disponibiliado';
        }
        return name;
    }
    return setName();
}

Repare no exemplo acima que temos uma função externa myName e uma função interna setName(). A função interna tem acesso aos dados externos, como por exemplo a variável name, entretanto a função externa não acessa nada da interna.

Para invocar a função acima basta chamar a função externa:

console.log(myName(1));

Arrow Functions

A partir do ECMASCRIPT 6 foi criado uma nova sintaxe enxuta pra declaração de funções, as chamadas arrow functions. Veja os exemplos:

//Arrow functions
function sum(x,y)
{
    return x+y;
}
console.log(sum(10,5));

let sumArrow=(x,y)=>{
    return x+y;
}
console.log(sumArrow(3,4));

let sumArrow2=(x,y)=>x+y;
console.log(sumArrow2(6,3));

Sucesso nos códigos e na vida!