Função Arrow com retorno de objeto

Front-end JavaScript
#1

Estou vendo sobre função ARROW e criei este código abaixo, que recebe dois parâmetros que retorna estes parâmetros como objetos e depois criei uma função que faz um calculo, porém esta me apresentando o seguinte erro.

  • 1º Se eu comentar a função ele me retorna branco “{}”.
  • 2º Se estiver com a função diz " que a função não esta definida.

Onde estou errando ou se estou fazendo uma coisa nada a ver.

m2 = (largura, comprimento) => {
  return{
    largura,
    comprimento,
  }
  calculo = () => {
    return (largura/1000)*comprimento
  }
}

m2(19,50)
console.log(calculo())
console.log(m2())
1 curtida
#2

Tem certeza que esta é a forma como deve montar o corpo da função?

#3

Não tenho certeza! Fiz da forma que achei ser o correto.

#4

Tentei outras formas e também não consegui, vou tentando aqui.

#5

Eu não sou especialista em função arrow, mas, acho que isso aqui nunca vai rolar, devido ao fato de você estar retornando e, após isso, ter outras linhas de código.

#6

Eu tentei colocar a funça antes e tambem nao deu. Eu fuz isso porque vi em uma aula, mas nao devo ter entendido direito.

#7

No javascript, pode funcionar por conta do conceito de hoisting (funções declaradas são levadas para o topo).

#8

Faz assim: Qual é a finalidade desse código, tipo eu quero passar dois valores e depois executar uma função calculo() como se fosse m2 um objeto.

Basicamente:

m2 = (largura, comprimento) => {
  const values = { largura, comprimento };
  calculo = () => {
      return (this.values.largura / 1000) * this.values.comprimento;
  };
  return this;
}

mas, como não sou expert em Javascript não sei se isso é correto, é funcional (mas, nem tudo que funciona está certo) :wink:

#9

Sim, eu tenho noção disso, já sofri muito tentando entender os javascripts com closure que o pessoal faz.

#10

Pessoal, deixa eu fazer uma pergunta bem de iniciante mesmo. Percebi que tem vários tipos de função, terei que coloca-las no projeto ou posso usar somente um tipo de função?

#11

Independente da razão, sugiro manter um padrão.
Se você opta por arrow function, por mais complexa que seja, faça apenas arrow function.
Se prefere o modo verboso, use este sempre.

#12

Essas coisas que me deixam com dúvida, pensava que deveria colocar todos os tipos em meu código pra funcionar.

#13

Não, não.
Você tem diversas opções.
Particularmente, creio que o mais adequado é usar aquilo com o que você se sente confortável, até estudar e aprender direito as novidades/complexidades.
Então, você vai evoluindo.
E nunca se esqueça que tem coisas que funcionam sempre, no caso do js, as funções verbosas podem ser feias, do ponto de vista estético e ultrapassadas, mas, sempre irão funcionar.

#14

Blza, Darlan vou procurar focar em um e entender bem seu conceito e aplicação e depois seguir com os outros.

#15

O que vc fez foi criar uma função anonima e atribuí-la à variável m2. Tudo o que essa função faz é retornar um objeto.

Vamos analisar as 3 ultimas linhas do seu código:

m2(19,50) // 1)
console.log(calculo()) // 2)
console.log(m2()) // 3)

  1. Aqui vc esta retornando um objeto igual a esse:

    {largura: 19, comprimento: 50}

Mas como vc não o está atribuindo a nenhuma variável, seu valor se perde. Faz o teste com isso:

console.log(m2(19, 50))

  1. Esta função não foi definida mesmo. O que vc fez foi criar uma função chamada calculo dentro do escopo daquela função anonima, ela não existe fora dali.

  2. Ele te mostra {} porque vc não passou nenhum argumento pra função, logo, ela retornou um objeto vazio.

Encontrei 2 artigos que podem te ajudar a entender o que está acontecendo de uma melhor forma:

Para outros materiais, procure por Constructor Pattern.

Sobre seu código, acredito que ele faz mais sentido assim:

m2 = (largura, comprimento) => {
  return{
    largura,
    comprimento,
    calculo: () => (largura/1000) * comprimento
  }
}

var teste = m2(19, 50)

console.log(teste)
console.log(teste.calculo())

Percebeu que retornei calculo junto com largura e comprimento? É assim que fazemos quando queremos expor certos dados ou comportamentos de um objeto. Do jeito como vc fez, calculo fica escondida.

Daí, pra usar o comportamento exposto, basta fazer como no meu segundo log.

2 curtidas
#16

@wldomiciano fiz da forma que vc falou e deu certo aqui. Vou verificar o material que postou.

#17

Gostei muito acho que o meu exemplo é furado kkk … não sou bom em Javascript, perfeito cara parabéns.

2 curtidas