DMM Technology

Functions

A function is like a machine that recives some input, does something with it and returns something else.
So something new, created from the data that we've put in.

Functions

Tipos de Funções
1) Função construtora
Aquela que é um objeto construtor, por exemplo:
var Person = function (name, yearOfBirth){
  this.name = name;
  this.yearOfBirth = yearOfBirth;
}
var jessica = new Person('jessica', 1969); objeto instânciado

2) Anonymous Function
Função sem nome, que não será acessada de outros lugares.
Exemplo: return function(name){ ... }

3) Callback Function
Função que é chamada por outra função, pois foi passada a ela.
Exempo: function arrayCalc(arr, fn) { fn é o parâmetro que receberá uma função e a chamará, portanto vai existir uma função que será chamada por outra função.
  ...
}

4) Immediately Invoked Functions (IIFE)
Função que se chama, podem ser utilizadas para "data privacy", visto as variáveis criadas dentro dela que não serão acessíveis fora de seu escopo e portanto não afetarão o resto do código.

5) Closures
Clousure é quando você pode utilizar as variáveis de uma função que retornou outra função, a partir da função retornada, mesmo que a execução da principal já tenha sido finalizada.
"An inner function has always access to the variables and parameters of its outer function, even after the outer function has returned".

Function Declaration
a) Functions can call other functions,.
b) Sintaxe:
function functionName (argument, argument, argument, ...){
function block (código a executar)
}

Function Statements and Expressions
Uma expressão em JS é quando realizamos algo com a função (function, if statments, while loops), onde recebe-se um retorno.
Por exemplo, passar um parâmetro para a função e receber uma resposta, passar 2+2 e receber 4, escrever um if e receber um retorno, como um console.log.

Passing Functions as Arguments

var years = [1990, 1965, 1937, 2005, 1998];

function arrayCalc(arr, fn) { arr = recebe o array por argumento com os dados, fn = function com os métodos
var arrRes = []; Criado um novo array vazio, que irá ser preenchido com os resultados da função e retornado como o resultado dessa função.
for (var i = 0; i < arr.lenght; i++) {
The result of the following array will be result of calling the fn function, and then we pass the current element of our input array into this function.
arrRes.push(fn(arr[i])); push = inserts element at the end of the array (will be the result of the array)
}
return arrRes;
}

//Callback functions: functions that we pass into functions that will them call them later.
function calculateAge(el) { el = element | Function que só retorna a idade.
return 2019 - el; el = element = yearOfBirth
}

function isFullAge(el) {
return el >= 18;
}

var ages = arrayCalc(years, calculateAge); Passa-se o years como array com informações a serem utilizadas pelo for e calculateAge como função a ser executada.
var fullAges = arrayCalc(ages, isFullAge); Passa-se o resultado do array ages, que contém as idades e a função isFullAge para ser executada.

console.log(ages);
console.log(fullAges);

Functions returning Functions
function interviewQuestion(job) {
if(job === 'lawyer') {
  return function(name) {
  console.log(name + ', what have you done in the past year to train your legal skills?');
}
} else if (job === 'secretary') {
  console.log(name + ', were you a Legal Secretary?');
} else {
   return function(name) {
   console.log('Hello ' + name + ', what do you do?');
  }
}
}

1) Lembrando que return function... irá retornar uma function inteira.
var lawyerQuestion = interviewQuestion('lawyer');

2) Agora dentro do teacherQuestion temos uma função, então podemos chama-la diretamente assim:
lawyerQuestion('Mike');
Retorno: Mike, what have you done in the past year to train your legal skills?
Visto que foi retornada a função do job lawyer.

ou
interviewQuestion('lawyer')('Harvey');
Visto que lê-se da esquerda para a direita, será retornado a função do job Lawyer e então será passado o nome Harvey para essa função que foi retornada.

Immediately Invoked Functions (IIFE)
a) Função que se chama.
b) Podem ser utilizadas para "data privacy", visto as variáveis criadas dentro dela que não serão acessíveis fora de seu escopo e portanto não afetarão o resto do código.
c) Portanto não são utilizadas para criar um código que será reutilizado, será somente para data privacy.

Sem passar argumentos
(function () {
var score = Math.random() * 10;
console.log(score >= 5); retorna true ou false. Valor do score não é acessível fora da função, por causa do escopo.
})();

Passando argumentos para a função
(function (goodluck) {
var score = Math.random() * 10;
console.log(score >= 5 - goodluck);
})(5);

Closures
1) Clousure é quando você pode utilizar as variáveis de uma função que retornou outra função, a partir da função retornada, mesmo que a execução da principal já tenha sido finalizada.
2) Mesmo quando ela retornar, o objeto que foi criado com as variables vai ficar acessível.

1) Start by calling the retirement function and passing the value of 66.
2) The function then declares the 'a' variable and returns the function on the return.
3) Then the function retirement finishes and it's execution context gets popped off the stack.
4) Com isso, a função de retorno está armazenada no retirementUS.
5) Agora começa o Closure, visto que agora vamos executar a função retirementUS(1990), mas veja que ela precisa da informação das variáveis retirementAge e 'a', que já saíram do execution context.
6) Com isso, essa função irá conseguir utizar essas variáveis de uma função que já retornou.
7) Closure é o fato dessas variáveis ainda estarem disponíveis para serem utilizadas, mesmo que a função já tenha finalizado.
8) "An inner function has always access to the variables and parameters of its outer function, even after the outer function has returned".

Exemplo 01
function retirement(retirementAge) {
//A variável a serve somente como string para completar a frase de retorno com a idade que a pessoa precisa ter para poder aposentar
var a = ' years left until retirement.';
//retorna uma function com quantos anos flta para o retirement
return function(yearOfBirth) {
  var age = 2019 - yearOfBirth;
  console.log((retirementAge - age) + a);
}
}

var retirementUS = retirement(66);
var retirementGermany = retirement(65);
var retirementIceland = retirement(67);

retirementUS(1990);
retirementGermany(1990);
retirementIceland(1990);

Exemplo 02

function interview(job){
return function(name){
  if(job === 'lawyer'){
  console.log(name + ' please, tell me about why you want to be a lawyer.');
  } else if (job === 'designer'){
   console.log(name + ' can you please show me your designs');
  } else {
  console.log('We don\'t have that job available');
}
}
}

interview('lawyer')('Jessica');

Bind, call and apply
var jessica = {
name: 'Jessica Pearson',
timeOfCompany: 23,
job: 'Lawyer',
position: 'Managing Partner',
presentation: function(style, timeOfDay) {
if(style === 'formal') {
console.log('Good ' + timeOfDay + ', ladies and gentlemen. My name is ' + this.name + '. I am a ' + this.job + ' working as a ' + this.position + ' at Pearson Hardman. I have been here for ' + this.timeOfCompany + ' years.');
} else if(style === 'friendly') {
console.log('Good ' + timeOfDay + ', my name is ' + this.name + ' and I am a ' + this.position + ' here at Pearson Hardman. I have been here for ' + this.timeOfCompany + ' years.');
}
}
};

var donna = {
name: 'Donna',
timeOfCompany: 15,
job: 'Secretary',
position: 'Legal Secretary'
};

jessica.presentation('formal', 'morning');
jessica.presentation.call(donna, 'friendly', 'afternoon');
//jessica.presentation.apply(donna, ['friendly', 'afternoon']); esse não funcionaria pois nossa função não espera receber um array

Call
a) Sintaxe: objetoQuePossuiFunçãoDesejada.nomeFunction.call(nomeObjetoASerUtilizado, argumentos);
b) Exemplo: jessica.presentation.call(donna, 'friendly', 'afternoon');)
Aqui temos que a função presentation do objeto jessica será chamada com os dados do objeto donna, pois o primeiro argumento que se passa após chamar a função call é a this variable, ou seja, qual objeto será o "this", ou qual objeto será o selecionado.

Apply
a) Sintaxe:
b) Exemplo: jessica.presentation.apply(donna, ['friendly', 'afternoon']);
Apply possui o mesmo uso do Call, porém retorna um array.

Bind
a) O que ele faz também pode ser chamado de Carrying, quando criamos uma função baseada em uma outra função, mas como alguns preset parameters.
b) A diferença entre Bind e os outros é que Bind não imediatamente chama a função, ele gera uma cópia dela, podendo ser armazenada em algum lugar.
c) Isso é útil para criarmos funções com preset arguments, ou seja, em que um dos argumentos é pré-definido, para não precisar defini-lo toda hora.
d) Veja abaixo como é útil poder retornar a função do objeto jessica e pré definir um parâmetro.

Exemplo 01
var jessicaFriendly = Variável que armazena a função copiada pelo Bind.
jessica.presentation.bind(jessica, 'formal'); Defindo que vamos utilizar as informações do objeto Jessica. Fixado 'Formal' como primeiro parâmetro.

jessicaFriendly('morning'); Agora somente precisamos chamar essa função e definir o segundo parâmetro.
jessicaFriendly('afternoon');
jessicaFriendly('night');

Exemplo 02 - Aplicação Real
var years = [1990, 1965, 1937, 2005, 2000];

function arrayCalc(arr, fn) { arr = array (will be years array), fn = function that we will passs that does the calcculations
//Creates new empty array that will be filled and returned
var arrRes = [];
for (var i = 0; i < arr.length; i++) {
The result of the following array will be result of calling the fn function, and then we pass the current element of our input array into this function
arrRes.push(fn(arr[i])); push = inserts element at the end of the array (will be the result of the array)
}
return arrRes;
}

function calculateAge(el) {
return 2019 - el;
}

function isFullAge(limit, el) {
return el>= limit;
}

var ages = arrayCalc(years, calculateAge);
var fullJapan = arrayCalc(ages, isFullAge.bind(this, 20));
console.log(ages);
console.log(fullJapan);

Importante: a função Bind irá fixar um argumento, então ela é utilizada para fixar o limit, na Function isFullAge, e então a "substitui" por sua cópia, que somente irá receber um parâmetro, o el, que será o ages do array. Esse el é comparado com o limit fixado pela Bind, de 20.

1) Passar a função isFullAge com o limit fixado, para que então o for possa rodar e colocar somente as idades nessa function, analisando se o el (age) é >= limit (fixado) ou não.
2) O this é fixo, o 20 é o primeiro argumento a ser passado, ou seja, o que será fixado.

Coding Challenge - Questions Quiz

Normal Quiz

Expert Quiz
Code Example
--- Let's build a fun quiz game in the console! ---
1. Build a function constructor called Question to describe a question. A question should include:
a) question itself
b) the answers from which the player can choose the correct one (choose an adequate data structure here, array, object, etc.)
c) correct answer (I would use a number for this)

2. Create a couple of questions using the constructor

3. Store them all inside an array

4. Select one random question and log it on the console, together with the possible answers (each question should have a number) (Hint: write a method for the Question objects for this task).

5. Use the 'prompt' function to ask the user for the correct answer. The user should input the number of the correct answer such as you displayed it on Task 4.

6. Check if the answer is correct and print to the console whether the answer is correct ot nor (Hint: write another method for this).

7. Suppose this code would be a plugin for other programmers to use in their code. So make sure that all your code is private and doesn't interfere with the other programmers code (Hint: we learned a special technique to do exactly that).

Aprendido:
1) É possível passar arrays por parâmetro para um objeto.
2) É possível utilizar uma variável para chamar uma função prototype de um objeto, desde que essa variável contenha um objeto criado através do construtor que ela será passada.
Pois veja bem, o questions[n] na verdade é questions[q1], portanto, questions['question', ['answer1', 'answer2', 'answer3'], 0];
E com isso, na verdade estamos passando todos os parâmetros do objeto instância q1, criado a partir do construtor Question, que possui o prototype que estará recebendo os argumentos passados por question[n] para as functions.

(function() {

function Question(question, answers, correct) {
  this.question = question;
  this.answers = answers;
  this.correct = correct;
}

Question.prototype.displayQuestion = function() {
  console.log(this.question); this.question pois para essa função ser ativada, foi passado um objeto que contem essa informação (parâmetro question).

  for(var i = 0; i < this.answers.length; i++) { i vai ser menor do que o tamanho do array de perguntas do objeto, visto cada objeto possuir uma quqntidade de perguntas e visto que o tamanho de um array de 3 é na verdade 2 (0,1,2)
  console.log(i + ': ' + this.answers[i]);
}
}

// Verificar se a resposta do prompt está correta
Question.prototype.checkAnswer = function(ans) {
  if(ans === this.correct){
  console.log('Correct answer!');
} else {
   console.log('Wrong answer. Try again :)');
}
};

var q1 = new Question('Is JavaScript the coolest programming language in the world?', ['Yes', 'No'], 0);
var q2 = new Question('What is the name of this course\'s teacher?', ['John', 'Micheal', 'Jonas'], 2);
var q3 = new Question('What does best describe coding?', ['Boring', 'Hard', 'Fun', 'Tedious'], 2);

//Array com as questões.
var questions = [q1, q2, q2];

//Gerador de Random Number
var n = Math.floor(Math.random() * questions.length);
//Por base, o math.random retorna um número de 0 a 2, portanto multiplicamos pelo número do array, ou seja, por 2, para que ele volte 1*2 = 0 a 2.
//Math.floor = faz com que somente retorne números inteiros.

questions[n].displayQuestion();

//Recuperar a resposta
//Mesmo que o usuario digite 0, 1, 2 (números), a resposta será armazenada como string, e por iso é utilizado o parseInt, convertendo a resposta do prompt para int.
var answer = parseInt(prompt('Please select the correct answer.'));

questions[n].checkAnswer(answer);

})();
Code Example
8. After you display the result, display the next random question, so that the game never ends (Hint: write a function for this and call it right after displaying the result)

9. Be careful: after Task 8, the game literally never ends. So include the option to quit the game if the user writes 'exit' instead of the answer. In this case, DON'T call the function from task 8.

10. Track the user's score to make the game more fun! So each time an answer is correct, add 1 point to the score (Hint: I'm going to use the power of closures for this, but you don't have to, just do this with the tools you feel more comfortable at this point).

11. Display the score in the console. Use yet another method for this.

(function () {

function Question(question, answers, correct) {
this.question = question;
this.answers = answers;
this.correct = correct;
}

//10 - Acionada a function displayQuestion, com os parâmetros recebidos do objeto instância q1.
//11 - Exibido o this.question e this.answers. Lembrando que this refere-se aos dados do objeto instância ativo, o q1.
Question.prototype.displayQuestion = function () {
console.log(this.question); this.question pois ao entrar no objeto q1, por exemplo, ele mostra a question do this, ou seja, do q1.

for (var i = 0; i < this.answers.length; i++) { i vai ser menor do que o tamanho do array de perguntas do objeto, visto cada objeto possuir uma quqntidade de perguntas
console.log(i + ': ' + this.answers[i]);
}
}

//17 - Recebido os dados do objeto instância q1, resposta do prompt (ans) e function da keepScore, que dá sc++.
// Verificar se a resposta do prompt está correta
Question.prototype.checkAnswer = function (ans, callBack) { callBack possui a function do keepScore, contendo o sc++ no caso de resposta correta
var sc;

//18 - No caso da ans ser igual a this.correct do objeto instância q1, será exibido Correct answer e o argumento callBack, contendo a função da keepScore, irá receber TRUE, o que executará a function da callBack (keepScore) e retornará sc++.
//19 - A variável sc receberá o resultado da callBack.
//Acredito que ao ocorrer o return do valor do sc da function callBack, é atualizado o valor da var sc da function(score), e por isso ele continuará subindo, pois na próxima vez que o valor de sc for acessado para executar sc++, ele será 1 e não 0, e assim por diante.
if (ans === this.correct) {
console.log('Correct answer!');
sc = callBack(true); Passado para a função callBack o parâmetro true, fazendo com que a function contida em callBack seja executada, acrescentando um ponto em sc, e sendo passado para a variável sc.
} else {
console.log('Wrong answer. Try again :)');
sc = callBack(false); //Para o score não ser updated.
}

//20 - Após a variável sc receber o novo valor, este será passado para a prototype function do objeto instância q1, displayScore, como parâmetro.
this.displayScore(sc); A variável sc então é passada
}

//21 - Executada a função displayScore com o valor da variável sc como parâmetro, portanto o score será exibido e então iremos ao passo 22.
Question.prototype.displayScore = function(score) {
console.log('Your current score is: ' + score);
console.log('------------------------------');
};

//01 - Definido os objetos instância.
var q1 = new Question('Is JavaScript the coolest programming language in the world?', ['Yes', 'No'], 0);
var q2 = new Question('What is the name of this course\'s teacher?', ['John', 'Micheal', 'Jonas'], 2);
var q3 = new Question('What does best describe coding?', ['Boring', 'Hard', 'Fun', 'Tedious'], 2);

//02 - Criado array com os objetos instância.
var questions = [q1, q2, q2];

//03 - Executada function score(), ativando a variável sc e retornando a function que aumenta o score, armazenada na variável keepScore, do passo 04.
Utilizado closures para que no momento em que for executar a função retornada, ela tenha acesso ao sc (score) antigo e possa dar update nele.
function score() {
var sc = 0;
return function(correct) {
if(correct) {
sc++;
}
return sc;
}
}

//04 - keepScore armazena a function que será ativada no passo 18, dando sc++ no caso de uma resposta correta para a pergunta.
var keepScore = score(); //essa variável keepScore que mantém o acesso as variáveis de closure, nesse caso, a sc.

//05 - Criada a função nextQuestion();
function nextQuestion() {

//07 - Gerado um random number de 0 a 2.
Gerador de Random Number
var n = Math.floor(Math.random() * questions.length);
Por base, o math.random retorna um número de 0 a 1, portanto multiplicamos pelo número do array, ou seja, por 3, para que ele volte 1*3 = 0 a 3.
Math.floor = faz com que somente retorne números inteiros.

//08 - Acessado o array questions, selecionado o elemento de valor N deste array. Por exemplo, o elemento 0, o q1.
//09 - Chamada a function displayQuestion e enviado o elemento do array questions, o objeto instância q1, contendo os parâmetros question, answers, correct.
questions[n].displayQuestion();

//12 - Finalizada a function displayQuestion, é exibido o prompt, pedindo para inserir uma resposta para a pergunta.
//Recuperar a resposta
//Mesmo que o usuario digite 0, 1, 2 (números), a resposta será armazenada como string, e por iso é utilizado o parseInt, convertendo a resposta do prompt para int.
var answer = prompt('Please select the correct answer.'); //anotar esse prompt no DOM

//13 - Ao inserir a resposta no prompt e apertar enter, entramos no if.
//14 - Verificado se a resposta é exit, pois caso seja, será pulado o if e finalizado o código, visto não ter linhas após o if.
Caso o resultado seja algo diferente de exit, entraremos no if, indo para o passo 15.

if(answer !== 'exit') {

//15 - Visto que a resposta não foi exit, será transforda em int para poder ser utilizada no passo 17.
//16 - A resposta será enviada para a function checkAnswer com os dados do objeto instância q1, e como segundo argumento a function da variável keepScore, que dá sc++.
Caso entre aqui, o parseInt será aplicado na resposta do prompt para ser verificado mais tarde.
Passado o keepScore junto com a answer para exibi-lo caso esteja correto.
questions[n].checkAnswer(parseInt(answer), keepScore); //somente precisamos chegar a answer se o jogo continuar.

//22 - Visto que o if havia sido ativado, agora estamos em sua segunda parte, que é chamar a nextQuestion(), onde o usuário poderá digitar a resposta correta, errada ou digitar exit, para não entrar novamente no if, encerrando o quiz.
nextQuestion(); //executado ao mostrar que a resposta está correta.
}

}

//06 - Chamada a função nextQuestion();
nextQuestion(); executado no começo

})();

Sintaxe:
function nomeFunção(nomeParametro/argumentos){
  //código a ser executado
}

var nomeVariavel = nomeParametro(informação);
a) Aqui, passa-se alguma informação que será recuperada pelo parâmetro da função e utilizado dentro do código.
b) Caso haja algum retorno de informação, será arquivado nessa variável.

Função para calcular a idade:
function calculateAge(birthYear){
  return 2018 - birthYear;
}

var ageHarvey = calculateAge(1975);
a e b) Aqui é quando passa o parâmetro/argumento para a função e vamos receber a resposta da função, que será armazenada na variável ageJohn.
var ageMike = calculateAge(1990);
var ageNora = calculateAge(1942);

console.log('Harvey\'s: ' + ageHarvey, ', Mike\'s: ' + ageMike, 'and Nora\'s: ' + ageNora);

Função para calcular anos até aposentadoria:
function yearsUntilRetirement(year, firstName){
  var age = calculateAge(year); //obtenho a idade
  var retirement = 65 - age;
  if(retirement > 0){
   console.log(firstName + ' will retire in ' + retirement + ' years.');
  } else {
   console.log(firstName + ' is already retired.');
  }
}

yearsUntilRetirement(1975, 'Harvey');
yearsUntilRetirement(1990, 'Mike');
yearsUntilRetirement(1942, 'Nora');

Functions

Code Example

Code Example

Code Example

Code Example