web-dev-qa-db-fra.com

Déclarer une fonction dans ES6?

Je voulais "mettre à jour" mon code javascript vers la nouvelle norme ES6, alors j'ai regardé comment les fonctions sont maintenant écrites et l'ai essayé sur une de mes fonctions globales, qui se lit comme ceci dans le "vieux" es5

function logMessage(message) {
    document.getElementById("logs").innerHTML = document.getElementById("logs").innerHTML + `<li  class="item-padding">  ${message} </li>`
}

maintenant, si je ne me trompe pas, la "transformation" correcte en ES6 serait comme ceci:

logMessage = message => {
    etc
}

Mais mon ESLint me dit que mon logMessage n'est pas défini et que j'obtiens une erreur dans ma console, est-ce que je manque quelque chose? Dois-je déclarer var, let ou const avant le logMessage?

Je ne sais pas si c'est important, mais je veux également exporter cette fonction du fichier One vers le fichier Two et utiliser la fonction logMessage dans une autre fonction du fichier Two, y a-t-il quelque chose que je dois garder à l'esprit lorsque je le fais?

Merci pour toute aide!

Edit: Merci à tous, les réponses m'ont beaucoup aidé, j'ai résolu mon problème!

javascriptfunctionecmascript-6arrow-functions
16
NakedPython

maintenant, si je ne me trompe pas, la "transformation" correcte en es6 serait comme ça

Vous vous trompez.

Fonctions fléchées sont une nouvelle syntaxe avec comportement différent. Ils ne sont pas un remplacement direct des déclarations de fonction et des expressions de fonction (qui existent toujours dans ES6).

Mais mon ESLint me dit que mon logMessage n'est pas défini et que j'obtiens une erreur dans ma console, est-ce que je manque quelque chose? Dois-je déclarer var, let ou const avant le logMessage?

Oui. Vous attribuez quelque chose à une variable. Vous devez d'abord déclarer la variable .

Je souhaite également exporter cette fonction du fichier One vers le fichier Two

La façon dont vous définissez la fonction n'a aucune incidence sur votre capacité à l'exporter.

20
Quentin
function logMessage(message) {
    // etc...
}

... est une déclaration de fonction qui est toujours parfaitement valide dans es6. Vous convertissez votre déclaration de fonction en une expression de fonction, qui en es5 ressemblerait à ceci ...

logMessage = function(message) {
    // etc...
}

... puis dans es6 ...

logMessage = message => {
    // etc
}

... donc le problème du peluchage n'est pas introduit par la syntaxe es6, mais plutôt en utilisant l'expression de fonction, en l'assignant à une variable qui sans var/let/const est une variable globale. Il y a aussi une différence dans la déclaration de fonction d'origine qui serait hissée, mais la forme d'expression de fonction doit être déclarée avant d'être appelée. Il existe également une différence dans le fait que les fonctions fléchées es6 conservent le contexte de cela de la portée parent, il convient donc de noter qu'elles ne sont pas 100% directes 1 pour 1 mappages les unes des autres.

Réponse courte, oui, les variables doivent être déclarées avec var/let/const afin d'éviter de devenir des variables globales, que ce soit une fonction ou non.

let logMessage = message => {
    // etc
}
22
Billy Moon