How come jslint doesn't like Arrow Functions?

JavaScript
1

Is there a reason why jslint doesn’t like the way these arrow functions are written?

Maybe they are not intended to be used in this manner.
But only in specific cases where it’s allowed.
https://jsfiddle.net/xeqtcp5k/132/

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");

    function playPauseIcon(play) {
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", () => {
        if (player.paused) {
            player.play();
            playPauseIcon(true);
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });
    document.getElementById("button").addEventListener("mousedown", (evt) => {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    sent.addEventListener("click", () => {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);
    });
}());

2

It’s not set up to lint ES6. Possibly adding /* jshint esversion: 6 */ at the top should fix it (not sure as been a very long time since I used jshint).

1 Like
3

Yup. Or you could change it in your config file if you are using VS Code

4

It’s jslint, not jshint which I was using:
http://www.jslint.com/

5

Ah, try adjusting the comment to /*jslint es6 */. I suspect it will still break, jslint is very old and has been superceded (first by jshint, now eslint), it isn’t commonly used at all. Although Douglas Crockford does still seem to be maintaining it, the test validator on his site doesn’t recognise several things for me (it completely blows up when I try to ise class for example).

6

JSLint intends arrow functions to be used for one-line expressions (parameters) => expression , source. So use a function here instead. Here’s the explanation.

If a function requires braces to contain its body, don’t use an arrow function. Save arrow functions for single expressions where the overloading of the brace character will never cause an error.

1 Like
7

Ah, I missed that. That’s seems really bad rule if it’s not overridable, given that arrow functions are to avoid issues with this as well!

@javascriptcoding5678 don’t use jslint would be the best solution, if it isn’t configurable enough to deal with common usage, use something that is. It was really good and useful when it came out (2011 I think?), but it’s been completely superceded

1 Like
8

I didn’t know that was a jslint rule, but that is my personal (usual) policy: an arrow for single line function for multi line. Granted I’m not hard and fast on that, and as you mentioned there are things like playing with this that make you want to change it up. Honestly, I mostly do it that way cause I think it’s prettier.

9

If you take a look at the jslint help, Crockford explains a little of why (and he uses the cute acronym, fart to refer to fat arrow functions:

Finally, ES6 provides an even shorter form of function expression that leaves out the words function and return :

( parameters ) => expression

JSLint requires the parens around the parameters, and forbids a { left brace after the => fart to avoid syntactic ambiguity.

It seems a little bit of a pointless bias in my view, but then I’m not quite an internet God, as Crockford is. :smiley:

He also talks about that as a conscious choice on his part, on his google plus feed.

10

A bit “old man shouting at the kids to get off his lawn” now though. Doesn’t like [eg] classes (for fairly reasonable reasons!), but that means his linter just forbids using them, so it’s kinda useless unless you’re writing all of the code according to his fairly strict principles 🤷

2 Likes
11

This is exactly my opinion of the “experts” who eschew class and hate on new

That being said, I gotta admit that I went through my “no semicolons phase” but now my feelings for them is summed up here:

javascript-semicolons
javascript-semicolons520×1250 281 KB

1 Like
12

Again, though, in the case of jslint, he invented the game, so he gets to set the rules. Coders in the trenches may see him as a crank, but management and others in the pseudo-know like the red tape he (and jslint) provides.

It’s summed up in this quote, I think, also from that page:

JSLint defines a professional subset of JavaScript, a stricter language than that defined by the ECMAScript Programming Language Standard (the strangely named document that governs JavaScript).

JSLint will reject most legal programs. It is a higher standard.

Anyway, we may be getting off-topic. In summary, jslint doesn’t like arrow functions in their expanded format, by the conscious choice of its creator.

1 Like