Javascript - Function #001

A linguagem Javascript não tem classes,construtores e métodos, para galera que vem do java, javeiros assim como eu, podem assustar um pouco ao deparar com essa linguagem. Porém no javascript nós temos as funções que podem simular classes, construtores e métodos fazendo dessa linguagem um tanto quanto poderosa.

javascript functions

Neste post vamos descobrir um pouco sobre as funções, o que elas são, onde vivem e do que se alimentam hahaha. O que é uma função?

Função é nada mais nada menos é um Objeto que contém um bloco de código executável.

Em javascript as funções são objetos de primeira classe , isto é, elas podem ter propriedades, métodos, podem ser passadas como parâmetros ou ser retornadas de uma outra função. Criando funções.

Há duas maneiras de se criar uma função:

• function declaration
• function expression

Function Declaration A function declaration consiste no uso da palavra function seguida pelo nome da função, parâmetros e o escopo onde é limitada entre as chaves {}. Segue o exemplo de uma function declaration welcome:

function welcome(nome) {
 return  “olá ” + nome + “! Seja bem vindo ao Javascript! :)”; 
};

Definimos a função welcome, porém só a definição da função não a executa, para executá-la devemos chamar a função da seguinte forma:

welcome(“deviscoming”); 

Como a função espera um parâmetro devemos informar entre os parênteses (); Para poder ver o resultado usaremos o método log do Objeto console para mostrar o resultado a chamada da função.

console.log(welcome(“deviscoming”));

resultado : Olá deviscoming! Seja bem vindo ao Javascript! :) Function Expression A function expression pode ser anônima, ou seja, podem ou não ter nomes. Segue o exemplo da function expression anônima:

var welcome  = function (nome) {
 return  “olá ” + nome + “! Seja bem vindo ao Javascript! :)”; 
};

Veja que a function expression é muito similar a function declaration, o que diferencia uma da outra é o nome da função e que a function expression é atribuída a uma variável. Mas uma function expression pode ser declarada também com um nome da função chamada de Named Function Expression :

var welcome  = function welcome (nome) {
 return  “olá ” + nome + “! Seja bem vindo ao Javascript! :)”; 
};

Mas e agora? Qual a diferença da Function Expression para a Named Function Expression? Usando a named function expression você consegue identificá-la em um debug para verificar seu stack trace. Para chamar a expression function devemos chamar pelo nome da variável que a function foi atribuída.

console.log(welcome(“deviscoming”));
resultado : Olá deviscoming! Seja bem vindo ao Javascript! :)

A pergunta que não quer calar, qual a diferença entre a Function declaration e a Function Expression? A function declaration é carregada antes do código sem interpretada, assim se eu chamar a função antes de declará-la funcionará normalmente.

console.log(welcome(“deviscoming”));
function welcome(nome) {
 return  “olá ” + nome + “! Seja bem vindo ao Javascript! :)”; 
};
resultado : Olá deviscoming! Seja bem vindo ao Javascript! :)

Já a Function expression é carregada no momento da interpretação do código, então nesse caso se ela for chamada antes da sua declaração você receberá um exception de resultado:

console.log(welcome(“deviscoming”));
var welcome = function welcome(nome) {
 return  “olá ” + nome + “! Seja bem vindo ao Javascript! :)”; 
};
resultado : TypeError : undefined is not a function….

Ou seja na function expression deve ser chamada somente após a sua declaração:

var welcome = function welcome(nome) {
 return  “olá ” + nome + “! Seja bem vindo ao Javascript! :)”; 
};
console.log(welcome(“deviscoming”));
resultado : Olá deviscoming! Seja bem vindo ao Javascript! :)

Sabendo dessas duas formas de criar uma função entendendo como cada uma funciona, cabe a você decidir qual das duas deverá usar, qual delas é mais legível para o seu entendimento. É isso ae pessoal, esse foi o primeiro post sobre funções javascript. para podermos entender um pouquinho desse universo do javascript. Fique de olho no blog , que logo teremos a continuação sobre as funções Javascript.

Referencias :

Mozilla Developer Network

Rodrigo Branas - Functions

Um abraço, Cheers! 🍻