Declaring a function in ES6?

Question

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!

Solution 1

now if I'm not wrong the correct "transformation" to es6 would be like this

You're wrong.

Arrow functions are a new syntax with different behaviour. They are not a straight up replacement for function declarations and function expressions (both of which still exist in ES6).

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?

Yes. You're assigning something to a variable. You must declare the variable first.

I also want to export this function from file One to file Two

How you define the function has no bearing on your ability to export it.

Solution 2

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
}

Comments

[roberrrt-s]

I figured my 'answer' was more of an example, which suits your answer better: const logMessage = (message) => { // code } would do.

[roberrrt-s]

Could you elaborate using let over const while declaring a function? I'd say a function should be immutable right?

[Jaromanda X]

() are optional with a single simple argument

[roberrrt-s]

@JaromandaX very true, although I prefer using them in cases like these for readabillity. (bad color coding on SE (:!)

[VLAZ]

@Roberrrt a function once declared can still be manipulated, so it's mutable. It is an object, after all. The const keyword just prevents it from being re-assigned further down. I don't think Billy Moon was "advocating" let over const, it's just the declaration keyword he happened to use, so it's for illustrative purposes rather than "this is the way you HAVE to do it".

[roberrrt-s]

@vlaz I've been using const myself, and haven't encountered any problems with it so far, but perhaps there was some magic possible when assigning it to a let, many thanks for the info though!

[VLAZ]

@Roberrrt well, there won't be "problems" with const. Unless you define a function const func = x => x *2 then if you try to do func = x => x +2 - that would throw a TypeError. However, you can still do, say, func.toString = () => "this is awesome" and this will change the function - it's not immutable but that's not really what const does - it only protects from reassignment. So, the only problem this can cause is prevent you from overwriting a variable. It's usually quite rare that you'd want to do this with functions, anyway, so it's normally fine.