DEV Community 👩‍💻👨‍💻

Uriel dos Santos Souza
Uriel dos Santos Souza

Posted on

JavaScript, primeiro aprender funções! Callback, sem entender o conceito

Um relato pessoal.
Não sou professor de programação. Nem mesmo sei muito de programação, ainda mais em JS.

Mas para eu conseguir entender o assincronismo do JS eu tive que bolar estratégias kkk

Primeiro, cheguei ao callback de um jeito que não me ajudou.
Não é culpa de nenhum professor ou tutorial.

Eu daria uma dica para quem vai dar curso, ou fazer tutorial.
'Isso é voltado a iniciantes, quem não conhece nada de programação. Mas pode ser que ajude a quem já conhece!'

Exemplo tosco:

Você ensinou isso:

function somar(num1, num2){
return num1 + num2
}
Enter fullscreen mode Exit fullscreen mode

Fez o aluno repetir com alguns exemplos.

Na verdade na minha visão, depois de ensinar variáveis. 
A próxima deve ser funções! 
Você já usa funções para todo o resto. 
Laços, Ifs, e todo o resto. 

Enter fullscreen mode Exit fullscreen mode

Voltando...

Sugiro dizer algo assim: agora vamos pegar o resultado AINDA dentro da função e por em outra

function func(num){
  console.log(num)
}

function somar(num1, num2){
const result = num1 + num2

func(result) 
}
Enter fullscreen mode Exit fullscreen mode

Eu demorei um tempo para pegar algo simples
Uma função dentro de outra...
É a coisa mais simples do mundo. Mas eu demorei pra ver isso, onde eu aprendi...

Quem esta aprendendo sabe que pode chamar uma função dentro de outra e isso é magico...

Vamos para a próxima parte!
Chamar 2 funções dentro de outra, mas, com IFs

function func(num){
  console.log('num maior que 5',num)
}

function func2(num){
  console.log('num menor que 5',num)
}


function somar(num1, num2){

const result = num1 + num2

if(result > 5){

  func(result);
}else{

  func2(result);
}


}

Enter fullscreen mode Exit fullscreen mode

Não é lindo?

Depois disso, você ensina que da pra chamar nos parâmetros
funções.
Algo simples. Que penso eu deveria ser ensinado mais cedo.

function func(num){
  console.log('num maior que 5',num)
}

function funcao(num){
  console.log('num menor que 5',num)
}


function somar(num1, num2, func, func2){

const result = num1 + num2

if(result >5){

  func(result);
}else{

  func2(result);
}


}


somar(2,1, func, funcao)
Enter fullscreen mode Exit fullscreen mode

Você não precisa explicar agora o porque acontece, só que acontece.

A pessoa sabe que pode chamar funções nos parâmetros.
Faça ela fazer N exercitórios com funções sendo chamadas nos parâmetros.

Ela já sabe criar uma função, sabe chamar funções dentro de outras funções, sabe chamar funções via parâmetros.
E sabe isso bem!

Chegou a hora de aprender a criar uma função no parâmetro.

function func(num){
  console.log('num maior que 5',num)
}




function somar(num1, num2, func, func2){

const result = num1 + num2

if(result >5){

  func(result);
}else{

  func2(result);
}


}

 somar(2,1, func, function(num){
   console.log('num menor que 5',num)
 })
Enter fullscreen mode Exit fullscreen mode

Isso esta sendo fácil de entender. Na minha visão!
Eu não fui ensinado dessa forma.

Primeiro aprendemos que se pode criar uma função diretamente no parâmetro. Depois aprenderemos que podemos criar quantas quisermos. Mas, só vou mostrar com dois parâmetros!


function somar(num1, num2, func, func2){

const result = num1 + num2

if(result > 5){

  func(result);

}else{

  func2(result);
}

}


somar(2,5, function(num){
  console.log('num maior que 5',num)
}, function(num){
  console.log('num menor que 5',num)
})
Enter fullscreen mode Exit fullscreen mode

Quem esta aprendendo não precisa saber o nome do que aprendeu. A pessoa em que saber que pode usar o JS desa forma. E isso é mais importante!

Acho que é assim que eu ensinaria! Com base nisso, eu aprenderia melhor JS e mais facilmente!
Teremos mais posts sobre JS e assincronismo em breve.
Quero seguir esta linha:
Callbacks, promise e async await

Top comments (0)

DEV runs on 100% open source code known as Forem.

 
Contribute to the codebase or host your own.
 
Check these out! 👇