17

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!

Jim Aho
  • 6,204
  • 8
  • 45
  • 72
NakedPython
  • 824
  • 2
  • 7
  • 21
  • 1
    I do not think the two are exactly the same: the first is a function declaration, the second is a function expression assigned to a variable – Matteo Tassinari Oct 28 '16 at 08:25
  • 1
    Related: [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](http://stackoverflow.com/q/34361379/218196) – Felix Kling Oct 28 '16 at 14:26

2 Answers2

26
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
}
Billy Moon
  • 52,018
  • 22
  • 123
  • 222
  • 1
    Could you elaborate using `let` over `const` while declaring a function? I'd say a function should be immutable right? – roberrrt-s Oct 28 '16 at 08:31
  • 2
    @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". – VLAZ Oct 28 '16 at 08:43
  • 1
    @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! – roberrrt-s Oct 28 '16 at 08:44
  • 3
    @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. – VLAZ Oct 28 '16 at 09:11
21

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.

Community
  • 1
  • 1
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205