I wanted to "update" my javascript code to the new ES6 Standard, so I looked at how functions are now written and tried it out on a global function of mine, which reads like this in the "old" es5
function logMessage(message) {
document.getElementById("logs").innerHTML = document.getElementById("logs").innerHTML + `<li class="item-padding"> ${message} </li>`
}
now if I'm not wrong the correct "transformation" to ES6 would be like this:
logMessage = message => {
etc
}
But my ESLint tells me that my logMessage is not defined and I get an error in my console, do I miss something? Do I have to declare var
, let
or const
before the logMessage?
I don't know if its important, but I also want to export this function from file One to file Two and use the function logMessage in another function in file Two, is there something I have to keep in mind when doing so?
Thanks for any help!
Edit: Thanks everyone the answers helped me a lot, got my problem fixed!
function logMessage(message) {
// etc...
}
... is function declaration which is still perfectly valid in es6. You are converting your function declaration into a function expression, which in es5 would look like this...
logMessage = function(message) {
// etc...
}
... and then into es6 ...
logMessage = message => {
// etc
}
... so the linting problem is not introduced by es6 syntax, but rather using function expression, assigning to a variable which without var/let/const is a global variable. There is also a difference in the original function declaration would be hoisted, but the function expression form must be declared before it's called. There is also a difference in that es6 arrow functions retain the context of this from the parent scope, so worth noting they are not 100% direct 1 for 1 mappings of each other.
Short answer, yes, variables need to be declared with var
/let
/const
in order to avoid becoming global variables, whether it's a function or not.
let logMessage = message => {
// etc
}