Curso básico de Javascript – (parte 3)

31. O que é Programação Funcional e quais são os recursos do JavaScript que o tornam candidato como uma linguagem funcional?

Programação Funcional é um paradigma ou padrão declarativo de programação sobre como construímos nossos aplicativos com funções usando expressões que calculam um valor sem alterar os argumentos passados para ele.

A matriz JavaScript tem mapear, filtrar, reduzir métodos que são as funções mais famosas do mundo da programação funcional por causa de sua utilidade e porque eles não mudam ou alteram a matriz que torna essas funções puras e o JavaScript suporta as funções de fechamento e ordem superior que são uma característica de uma linguagem de programação funcional.

  • O método map cria uma nova matriz com os resultados de chamada de uma função de retorno fornecida em todos os elementos da matriz.
const words = ["Functional", "Procedural", "Object-Oriented"];
const wordsLength = words.map(word => word.length);
  • O método de filtro cria uma nova matriz com todos os elementos que passam no teste na função de retorno de chamada.
const data = [
  { name: 'Pedro', isRegistered: true },
  { name: 'Gustavo', isRegistered: false },
  { name: 'Flavia', isRegistered: true }
];

const registeredUsers = data.filter(user => user.isRegistered);

O método reduzir aplica a uma função contra um acumulador e cada elemento da matriz (da esquerda para a direita) para reduzi-lo a um único valor.

const strs = ["Eu", " ", "sou", " ", "Programador", " ", "Web"];
const result = strs.reduce((acc, currentStr) => acc + str, "");

32. O que são funções de ordem superior ?

Função de ordem superior são funções que podem retornar uma função ou receber argumentos ou argumentos com o valor de uma função.

function higherOrderFunction(param,callback){
    return callback(param);
}

33. Por que as funções são chamadas de Objetos de Primeira Classe ?

As funções do JavaScript são objetos de primeira classe porque são tratadas como qualquer outro valor. Eles podem ser atribuídos a variáveis, podem ser propriedades de um objeto chamado métodos, podem ser um item na matriz, podem ser passados como argumentos para uma função e podem ser retornados como valores de uma função. A única diferença entre uma função e qualquer outro valor no JavaScript é que as funções podem ser chamadas.

34. Implemente o Array.prototype.map manualmente.

function map(arr, mapCallback) {
  // Primeiro, verificamos se os parâmetros passados estão corretos.
  if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') { 
    return [];
  } else {
    let result = [];
    // Estamos criando uma matriz de resultados toda vez que chamamos essa função
   // porque não queremos alterar a matriz original.
    for (let i = 0, len = arr.length; i < len; i++) {
      result.push(mapCallback(arr[i], i, arr)); 
      //de um push no resultado do mapCallback na matriz 'result'
    }
    return result; // retornar a matriz de resultados
  }
}

Como a descrição MDN do Array.prototype.map.

O método map () cria uma nova matriz com os resultados da chamada de uma função fornecida em todos os elementos da matriz de chamada.

35. Implemente o Array.prototype.filter manualmente.

function filter(arr, filterCallback) {
  // Primeiro, verificamos se os parâmetros passados estão corretos.
  if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') 
  {
    return [];
  } else {
    let result = [];
    // Estamos criando uma matriz de resultados toda vez que chamamos essa função
    // porque não queremos alterar a matriz original.
    for (let i = 0, len = arr.length; i < len; i++) {
      // verifique se o valor de retorno do filterCallback é verdadeiro.
      if (filterCallback(arr[i], i, arr)) { 
      // o item atual na matriz 'result' se a condição for verdadeira
        result.push(arr[i]);
      }
    }
    return result; // retornar a matriz de resultados
  }
}

Como a descrição MDN do Array.prototype.filter.

O método filter () cria uma nova matriz com todos os elementos que passam no teste implementado pela função fornecida.

36. Implemente o Array.prototype.reduce manualmente.

function reduce(arr, reduceCallback, initialValue) {
  // First, we check if the parameters passed are right.
  if (!Array.isArray(arr) || !arr.length || typeof reduceCallback !== 'function') 
  {
    return [];
  } else {
    // If no initialValue has been passed to the function we're gonna use the 
    let hasInitialValue = initialValue !== undefined;
    let value = hasInitialValue ? initialValue : arr[0];
    // first array item as the initialValue

    // Then we're gonna start looping at index 1 if there is no 
    // initialValue has been passed to the function else we start at 0 if 
    // there is an initialValue.
    for (let i = hasInitialValue ? 0 : 1, len = arr.length; i < len; i++) {
      // Then for every iteration we assign the result of the 
      // reduceCallback to the variable value.
      value = reduceCallback(value, arr[i], i, arr); 
    }
    return value;
  }
}

O método reduzem () executa uma função redutora (que você fornece) em cada elemento da matriz, resultando em um único valor de saída.

37. Qual é o objeto dos argumentos?

O objeto de argumentos é uma coleção de valores de parâmetros transmitidos em uma função. É uma matriz-como objeto porque ele tem um comprimento de propriedade e podemos acessar valores individuais usando a notação de matriz indexação, mas ele não tem o built-in em uma matriz forEach, reduce, filtere map.
Isso nos ajuda a saber o número de argumentos passados em uma função.

Podemos converter o arguments objeto em uma matriz usando o Array.prototype.slice.

Nota: o arguments objeto não funciona nas funções de seta do ES6.

function one() {
  return arguments;
}
const two = function () {
  return arguments;
}
const three = function three() {
  return arguments;
}

const four = () => arguments;

four(); // Lança um erro - os argumentos não estão definidos

Quando invocamos a função, fourela gera um ReferenceError: arguments is not definederro. Podemos resolver esse problema se o seu ambiente suportar a sintaxe restante.

const four = (...args) => args;

Isso coloca todos os valores de parâmetros em uma matriz automaticamente.

38. Como criar um objeto sem um protótipo?

Podemos criar um objeto sem um protótipo usando o Object.create

const o1 = {};
   console.log(o1.toString()); 
   // logs [object Object] obtém esse método no Object.prototype 

   const o2 = Object.create(null);
   // o primeiro parâmetro é o protótipo do objeto "o2" que neste
   console.log(o2.toString());
   // gera um erro o2.toString não é uma função

39. Por que b se torna uma variável global quando você chama essa função?

function myFunc() {
  let a = b = 0;
}

myFunc();

A razão para isso é que o operador de atribuição ou = possui associação ou avaliação da direita para a esquerda. O que isso significa é que, quando vários operadores de atribuição aparecem em uma única expressão, eles são avaliados da direita para a esquerda. Portanto, nosso código se torna assim.

function myFunc() {
  let a = (b = 0);
}

myFunc();

Primeiro, a expressão b = 0 avaliada e neste exemplo b não é declarada. Portanto, o Mecanismo JS cria uma variável global b que fica fora dessa função, depois que o valor de retorno da expressão b = 0 seria 0 e é atribuído à nova variável local a com uma let.

Podemos resolver esse problema declarando as variáveis primeiro antes de atribuí-las com valor.

function myFunc() {
  let a,b;
  a = b = 0;
}
myFunc();

40. O que é o ECMAScript (ES)?

ECMAScript é um padrão para criar linguagens de script, o que significa que o JavaScript segue as alterações de especificação no padrão ECMAScript porque é o modelo do JavaScript.

41. Quais são os novos recursos do ES6 ou ECMAScript 2015?

  • Funções de seta
  • Cadeias de modelo
  • Objeto aprimorados
  • Destruição de Objetos
  • Promessas
  • Geradores
  • Módulos
  • Símbolo
  • Proxies
  • Conjuntos
  • Parâmetros de função padrão
  • Descansar e espalhar
  • Escopo do bloco com let e const

42. Qual é a diferença entre var, let e const?

Variáveis declaradas com var têm escopo de função .
O que isso significa que as variáveis podem ser acessadas através dessa função, mesmo se declararmos essa variável dentro de um bloco.

function giveMeX(showX) {
  if (showX) {
    var x = 5;
  }
  return x;
}

console.log(giveMeX(false));
console.log(giveMeX(true));

A primeira é o console.log, e a segunda registra undefined5. Podemos acessar a x variável devido ao motivo de ela ser hoisted no topo do escopo da função. Portanto, nosso código de função é interpretado assim.

function giveMeX(showX) {
  var x; // tem um valor padrão indefinido
  if (showX) {
    x = 5;
  }
  return x;
}

Se você está se perguntando por que ele faz logon undefined, lembre-se de que as variáveis declaradas sem um valor inicial possuem um valor padrão de undefined.

Variáveis declaradas com let e const têm escopo de bloco. O que isso significa que a variável só pode ser acessada nesse bloco {} em que a declaramos.

function giveMeX(showX) {
  if (showX) {
    let x = 5;
  }
  return x;
}

function giveMeY(showY) {
  if (showY) {
    let y = 5;
  }
  return y;
}

Se chamamos isso de funções com um argumento false, é lançado como Reference Error porque e não podemos acessar as variáveis x e y fora desse bloco e essas variáveis não são hoisted.

Há também uma diferença entre let e const podemos atribuir novos valores usando, let mas não podemos const que são significado mutáveis. O que isso significa é que, se o valor que atribuímos a const é um objeto, podemos alterar os valores dessas propriedades, mas não podemos reatribuir um novo valor para essa variável.

43. Quais são as funções do Arrow ?

Arrow Functions são uma nova maneira de criar funções em JavaScript. O Arrow Functions demora um pouco na criação de funções e possui uma sintaxe mais limpa do que uma expressão de função.

//ES5 Version
var getCurrentDate = function (){
  return new Date();
}

//ES6 Version
const getCurrentDate = () => new Date();

Neste exemplo, na versão ES5, temos a function () {} declaração e a return necessárias para criar uma função e retornar um valor, respectivamente. Na versão Arrow Function , precisamos apenas dos () parênteses e não precisamos de uma return porque as Funções Arrow têm um retorno implícito se tivermos apenas uma expressão ou valor para retornar.

//ES5 Version
function greet(name) {
  return 'Hello ' + name + '!';
}

//ES6 Version
const greet = (name) => `Hello ${name}`;
const greet2 = name => `Hello ${name}`;

Também podemos usar os parâmetros nas funções Arrow, da mesma forma que as expressões e declarações de função. Se tiver um parâmetro em uma função de seta, podemos também omitir os parênteses.

const getArgs = () => arguments
const getArgs2 = (...rest) => rest

As funções de seta não têm acesso ao arguments objeto. Então, chamar a primeira getArgs função gerará um erro. Em vez disso, podemos usar os demais parâmetros para obter todos os argumentos passados em uma função de seta.

const data = {
  result: 0,
  nums: [1, 2, 3, 4, 5],
  computeResult() {
    // "this" here refers to the "data" object
    const addAll = () => {
      // arrow functions "copies" the "this" value of 
      // the lexical enclosing function
      return this.nums.reduce((total, cur) => total + cur, 0)
    };
    this.result = addAll();
  }
};

As funções de seta não têm seu próprio valor this. Ele captura ou obtém o this da função que encerra, neste exemplo, a função addAll copia o this do método computeResult e, se declararmos uma função de seta no escopo global, o valor de this seria um objeto.

Parte -1 e Parte 2

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like