JavaScript: default param e arrow function

Guia do artigo:

Default param
Arrow function
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

Engine	Vers�o Minima
Node.JS ( V8)	6.4.0
Safari ( WebKit)	11.1
Chrome ( V8)	68
Microsoft Edge ( ChakraCore)	17
Firefox ( Gecko)	61

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

JavaScript: default param e arrow function

Aprenda tudo sobre funções em JavaScript neste artigo.

Guia do artigo:

Default param

Vis�o geral

Sintaxe

Na pr�tica

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Exemplo 5

Arrow function

Vis�o geral

Sintaxe

Na pr�tica

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Exemplo 5

Compatibilidade

Confira tamb�m

Evoluç�o do JavaScript

Apresentando o Node.js

Introduç�o ao JavaScript

Artigos relacionados