Tu déclares mal tes fonctions JavaScript, voici pourquoi...

Rejoins le club : codelynx.dev/emails
*Timecodes*
00:00 - Intro
00:20 - Leur différence syntaxique
01:40 - Arguments
04:03 - Ordre d’appel
05:24 - Implicite return
06:00 - Redeclarations
08:15 - Outro
*Music*
Music from Uppbeat (free for Creators!):
uppbeat.io/t/prigida/cozy
License code: SAGXOH5FUKD3UCDP
Music from Uppbeat (free for Creators!):
uppbeat.io/t/infraction/bangkok
License code: KIPBDUHWYMNQGVSC
▶ VIDÉO
Dans cette vidéo, nous allons parler des fonctions régulières et des fonctions flèches en JavaScript. Nous verrons les différences entre les deux types de fonctions, leurs avantages et leurs utilisations courantes. Nous verrons également comment utiliser les fonctions flèches pour créer des fonctions plus concises et plus lisibles. Cette vidéo est destinée aux développeurs JavaScript débutants et intermédiaires qui souhaitent améliorer leurs connaissances en matière de fonctions en JavaScript. Apprenez à maitriser les fonctions régulières et flèches en JavaScript pour écrire des codes plus efficaces et plus performants. N'oubliez pas de vous abonner à notre chaîne pour ne rien manquer de nos prochains tutoriels sur le développement web.
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
💌 Ma Newsletter : melvynx.com/emails
20/09/2022
FREEDOM
Music from Uppbeat (free for Creators!):
uppbeat.io/t/sonda/freedom
License code: YAJZT1FABTNXFCJP
autumn
Music from Uppbeat (free for Creators!):
uppbeat.io/t/fass/autumn
License code: KPHQ02DVLR4PSYMQ
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject

[@GuillaumeDenry]

Le fait de pouvoir bénéficier du hoisting pour les fonctions permet de déclarer les fonctions "annexes" en bas de la fonction principale d'un module, c'est une technique que j'ai déjà vu utilisée par pas mal de monde. Comme ça quand tu ouvres le fichier, tu as le "point d'entrée" du module le plus haut possible dans le fichier.

[@melvynxdev]

Moui, pas sûr que ce soit un aventage

[@GuillaumeDenry]

@@melvynxdev Disons que c'est comme si on voulait profiter du hoisting pour bénéficier d'une sorte de déclaration de fonctions non ordonnées à la Haskell/elm ou tout autre langage fonctionnel pur

[@chrislr4302]

Function, c'est pour la programmation objet et on a le this alors que stocker la fonction dans une variable, c'est de la programmation fonctionnelle. Dans la programmation fonctionnelle, le flux en entrée est transformé pour donner un flux en sortie. Il n'y a pas d'effets de bord sur le flux en entrée. Pour des flux d'événements, l'absence d'effets de bord entre un évènement et un autre est préférable. Le flux est monothread pour chaque client. Régénérer un flux complet à chaque fois peut ne pas être performant. Faire un effet de bord sur un élément via un this est moins coûteux. Ce serait bien de refaire la vidéo pour intégrer les vrais enjeux de la programmation fonctionnelle.

[@melvynxdev]

OUi

[@manouhaouzi2530]

Très clair et instructif ! Bravo 👏👏👏

[@melvynxdev]

Merci !

[@b166er4]

👍, la premiere diff que j ai fait, c'est dans le cas des events et du context de this ...

[@melvynxdev]

oui je comprends

[@lydstyl]

Vidéo interessante mais + 1 point pour la regular pour le this dans certains car par exemple si tu veux faire const obj = { name: "David", function logName (){console.log(this.name)}} et + 1 point pour la regular pour pouvoir mettre les fonctions en annexe à la fin du code et donc lire l'essentiel du code en haut du fichier même si oui ça peut faire de la magie dans 0,0000001 % des cas si tu travailles avec notepad :D.

[@melvynxdev]

Ton exemple numéro est pas trop dans le sujet car ta regular est dans ton objet,. (même si je trouve cette syntaxe dégeulasse)

[@yanisoulhaci3369]

Je pense que il ya énormément de différence entre les deux, et l'une des plus importantes à connaître c'est vraiment le "this" qui ne cible absolument pas la même chose sur l'une ou l'autre

[@melvynxdev]

Oui mais le this aurait besoin d'une VIDEO entière, j'avais pas envie que ça dure 20 minutes. Mais même avec le this, les arrow fonction sont plus cool, à mon sens, je déteste la magie

[@mathieulallemand689]

Cette vidéo est amusante quand on a quelques dizaines d'années d'XP en JS... Le hoisting n'existe pas pour rien, Il permet entre autre de mieux organiser son code... C'est certain que sur des codes de 5 lignes, c'est un peu normal de trouver que le Hosting inutile. Maintenant faudrait peut-être plus d'expérience en dév pour changer d'avis... Cette vidéo a 6 mois, j'aimerais bien que vous refassiez une vidéo sur le même thème dans 5 ans. M'est d'avis que les certitudes imposées ici seront sans doute un peu différentes :)

[@melvynxdev]

Bonjour Mathieu, cet avis est partagé par certains développeurs « ayant 5 ans d'expérience » si c'est ta seule métrique pour juger le niveau de quelqu'un. Ce qui est drôle, c'est que j'ai plus de 5 ans d'expérience en JavaScript... mais bon, je ne t'en veux pas.

[@Adesh09]

Est-ce que se tuto s'applique aussi pour typescript ?

[@inovci6592]

🤔

[@melvynxdev]

Oui !

[@Eye974]

C'est une fonction anonyme fyi, merci pour les différences.

[@melvynxdev]

Non une fonction anonyme c'est onClick={() => ...}

[@Eye974]

@@melvynxdev Là tu appelles la fonction anonyme en exécutant la variable "onClick", les accolades que tu as mis doivent provoquer une erreur normalement. Une fonction anonyme est utilisée par exemple dans un observable, ou un setTimout etc. Une fonction anonyme c'est "function(){} ou ()=>{}".

[@azizouichni]

la grosse différence c'est le this keyword!

[@melvynxdev]

Oui mais le sujet aurait pris une vidéo entière, it's why j'ai pas fais ça

[@alainalain6454]

@@melvynxdev dommage de ne pas avoir abordé ca car c'est quand meme une grosse partie justement. après certain n'utilise plus de THIS depuis très logntemps sans aucun souci

[@pinkvador]

La vidéo est cool. Mais le son pique un peu aux oreilles, un étalonnage et ça devrait faire le boulot

[@melvynxdev]

Chier je note !