JavaScript: default param e arrow function

Guia do artigo:

• Default param
  • Vis�o geral
  • Sintaxe
  • Na pr�tica
• Arrow function
  • Vis�o geral
  • Sintaxe
  • Na pr�tica
• Compatibilidade

Default param

Permite definir um valor pr�-definido caso o par�metro n�o seja preenchido ou receba o valor undefined.

Vis�o geral

Em uma fun��o em JavaScript ou qualquer outra linguagem de programa��o � comum a necessidade de escrever fun��es que possuam algum tipo de valor pr�-definido em alguns de seus argumentos, por exemplo:

function createElement (tag, props = {}) {
  console.log(tag, props)
  ...
}

createElement('p')
// p {}

createElement('p', { className: 'text textarea', children: 'Design for Human' })
// p { classNames: 'text textarea', children: 'Design for Human' }

Neste exemplo a fun��o createElement recebe uma string como o nome do elemento que dever� ser criado e em seguida opcionalmente � informado os propriedades deste elemento, perceba que quando nenhuma props e definida a fun��o define o valor do argumento como um objeto vazio.

Sintaxe

(parametro [ = valor-padrao ]) => instrucao

Na pr�tica

Exemplo 1

Neste exemplo utilizamos a fun��o soma e atribu�mos a seus par�metros valores pr�-definidos caso n�o sejam preenchidos.

function total (a = 10, b = 20) {
  return a + b
}

console.log(total()) // 30
console.log(total(5, 5)) // 10

Exemplo 2

� poss�vel definir valores pr�-definidos para arrow function como no exemplo abaixo:

const addMensagem = (mensagem, data = Date.now()) => ({
  mensagem,
  data
})

console.log(addMensagem('Oi, tudo bem?')) // { mensagem: "Oi, tudo bem?", data: 1532978959897 }

Exemplo 3

� poss�vel definir valores padr�o para par�metros a partir de fun��es como no exemplo abaixo:

function getTotalNotificacoes () {
  ...
}

function notificar (mensagem = getTotalNotificacoes()) {
  return 'total de notifica��es: ' + mensagem
}

console.log(notificar()) // total de notifica��es: 4

Exemplo 4

� poss�vel tamb�m utilizar os par�metros pr�-definidos em m�todos de classes, no exemplo abaixo podemos ver melhor como este recurso do JavaScript � utilizado.

class Pessoa {
  constructor (nome, cpf= '999.999.999-99') {
    this.nome = nome
    this.cpf = cpf
  }
}

const p1 = new Pessoa('bruno')

console.log(p1.cpf) // 999.999.999-99

Exemplo 5

Neste exemplo temos uma fun��o que calcula o pagamento de um associado, caso n�o seja informado o valor de comiss�o e desconto, o mesmo ser� definido como zero e desconsiderado.

/**
 * Esta fun��o calcula a comiss�o e desconto de um associado
 *
 * @param  bruto valor bruto de pagamento
 * @param  [comissao] porcentagem (%) de comiss�o
 * @param  [desconto] porcentagem (%) de desconto
 * @returns 
 */
function calculaPagamento (bruto, comissao = 0, desconto = 0) {
  let total = bruto

  // adiciona ao total o valor da comiss�o
  if (comissao > 0) {
    total += (bruto / 100) * comissao
  }

  // remove o valor que dever� ser descontado
  if (desconto > 0) {
    total -= (bruto / 100) * desconto
  }

  return total
}

const bruto = calculaPagamento(1000, 50, 10)

console.log(bruto)

// 1400

Arrow function

� uma forma sucinta de escrever fun��es an�nimas em JavaScript.

Vis�o geral

As arrow function podem ser utilizadas em todos os cen�rios onde as fun��o s�o aplicadas como por exemplo callbacks. Sua diferen�a pratica se d� na aus�ncia de refer�ncia do this de seu escopo e em sintaxe mais curta.

Considere por exemplo que seja necess�rio efetuar um relatorio onde voc� precisa somar o valor de todos os carros que tem valor maior que R$14.000,00. Para execu��o desta tarefa utilizamos apenas os m�todos filter, map e reduce.

const carros = [
  { id: 1, modelo: 'Corsa', marca: 'Chevrolet', preco: 18000 },
  { id: 2, modelo: 'Punto', marca: 'Fiat', preco: 12000 },
  { id: 3, modelo: 'Gol', marca: 'Volkswagen', preco: 14000 },
  { id: 4, modelo: 'Saveiro', marca: 'Volkswagen', preco: 20000 },
  { id: 5, modelo: 'Uno', marca: 'Fiat', preco: 12000 },
  { id: 6, modelo: 'Onix', marca: 'Chevrolet', preco: 25000 },
  { id: 7, modelo: 'Palio', marca: 'Fiat', preco: 13000 },
  { id: 8, modelo: 'Prisma', marca: 'Chevrolet', preco: 15000 },
  { id: 9, modelo: 'Logan', marca: 'Renault', preco: 15000 }
]

const data = carros
  .filter(item => item.preco >= 14000)
  .map(item => item.preco)
  .reduce((anterior, atual) => anterior + atual, 0)

const total = data.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })

console.log(total)
// R$ 107,000.00

Perceba que as arrow functions tornaram o c�digo mais sucinto gra�as a sua sintaxe curta, ao inv�s de ter que declarar uma fun��o como callback como no fragmento de c�digo abaixo.

  .filter(function (item) {
    return item.preco >= 14000
  })

Sintaxe

(parametro1, parametro2, ..., parametroX) => expressao

• parametro: valores passados para dentro do escopo da fun��o.
• expressao: bloco de c�digo que pode retornar um valor ao final da execu��o.

Na pr�tica

Exemplo 1

No exemplo abaixo a fun��o soma recebe dois par�metros e retorna a soma desses. Podemos declar�-la de forma tradicional, como a seguir:

function soma (a, b) {
  return a + b
}

console.log(soma(1, 2)) // 3

Esta mesma fun��o pode ser escrita com uma arrow function:

const soma = (a, b) => {
  return a + b
}

console.log(soma(1, 2)) // 3

E poss�vel tamb�m declar�-la utilizando a sintaxe curta:

const soma = (a, b) => a + b

console.log(soma(1, 2)) // 3

Exemplo 2

Neste exemplo temos uma fun��o que recebe por par�metro uma frase e separa cada palavra em uma lista retornando-a como resultado.

A seguir podemos ver esta fun��o escrita de forma tradicional:

const frase = 'Eu curto a DevMedia'

function separaFrase (frase) {
  return frase.split(' ')
}

console.log(separaFrase(frase)) // [ 'Eu', 'curto', 'a', 'DevMedia' ]

Agora temos essa mesma fun��o utilizando arrow functions:

const frase = 'Eu curto a DevMedia'

const separaFrase = (texto) => {
  return texto.split(' ')
}

console.log(separaFrase(frase)) // [ 'Eu', 'curto', 'a', 'DevMedia' ]

Quando h� apenas um par�metro na fun��o n�o � necess�rio o uso de par�nteses na express�o, como no exemplo abaixo:

const separaFrase = texto => texto.split(' ')

Exemplo 3

As arrow functions podem ser utilizadas para tornar a sintaxe de m�todos que recebem callback mais simples. No exemplo abaixo utilizamos o m�todo find para encontrar em uma lista o usu�rio cujo id � igual a 2:

const usuarios = [
  { id: 1, nome: 'Maria da Silva' },
  { id: 2, nome: 'Jo�o Fernando' },
  { id: 3, nome: 'Pedro dos Santos' }
]

const usuario = usuarios.find(usuario => usuario.id === 2)

console.log(usuario.nome) // Jo�o Fernando

As arrow functions funcionam em m�todos que recebam callback como por exemplo o map, reduce e filter.

Exemplo 4

Neste exemplo temos a fun��o Contador que exibe um log com o n�mero de segundos desde o momento em que foi instanciada. Vamos ver primeiro esta fun��o utilizando a sintaxe dispon�vel at� o ECMAScript 5:

function Contador () {
  var self = this

  self.valorAtual = 0

  setInterval(function () {
    self.valorAtual++
    console.log(self.valorAtual)
  }, 1000)
}

Neste exemplo utilizamos a vari�vel self na linha 2 para armazenar uma refer�ncia ao escopo pai (Contador) para acess�-lo dentro de outras fun��es, como � feito dentro do escopo do setTimeout. Entre as linhas 6 e 9 aumentamos o valorAtual em 1 e em seguida exibimos um log com valor do self.valorAtual.

No exemplo abaixo reescrevemos a mesma fun��o (Contador) utilizando arrow function, pois n�o possuem bind do this como as fun��es tradicionais, evitando o uso de vari�veis para armazenar o escopo de uma fun��o pai, pr�tica comum at� o ES5:

function Contador () {
  this.valorAtual = 0

  setInterval(() => {
    this.valorAtual++
    console.log(this.valorAtual)
  }, 1000)
}

A partir deste exemplo podemos concluir que, al�m de ter uma sintaxe mais simples, as arrow functions s�o uma ferramenta poderosa quando � necess�rio acessar o escopo da fun��o pai.

Exemplo 5

� poss�vel utilizar arrow function para retornar objetos, pr�tica comum com as action creators do Redux. No exemplo abaixo podemos ver como esse processo � feito:

const addTodo = (mensagem) => ({
  mensagem,
  isComplete: false
})

console.log(addTodo('Ol� mundo!!')) // { mensagem: 'Ol� mundo!!', isComplete: false }

Compatibilidade

Nota: O Opera utiliza atualmente grande parte do c�digo do Chrome como base para o seu pr�prio desenvolvimento e por isso ele n�o � mencionado nesta listagem.

Confira tamb�m

Evolu��o do JavaScript

V�deo

Apresentando o Node.js

V�deo

Introdu��o ao JavaScript

Curso