Expected an identifier and instead saw '...'

Question

This error is coming up in jslint, how would I fix this line?

const {
    width,
    height,
    ...options
} = opts;

Full Code:

https://jsfiddle.net/zt7anuL3/18/

Section of the code where the line is:

function initPlayer(wrapper) {
    const video = wrapper.querySelector(".video");
    let settings = {};
    const {
        width,
        height,
        ...options
    } = opts;
    settings.width = width || 198;
    settings.height = height || 198;
    settings.playerVars = options.playerVars || options;
    videoPlayer.init(video, settings);
}

Yes, jsLint is really lagging behind the times, switch to esLint is my advice. — Keith, Dec 06 '18 at 01:03

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

It's because ... is actually used in JavaScript in spread syntax. Change it to this:

const {
    width,
    height,
    options
} = opts;

And your code should work.

EDIT:

As said by Keith in the comments below, it's probably just your linter JSLint that's broken.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 06 '18 at 00:54

Jack Bashford

43,180
11
50
79

There may be other occurrences of `...` in your code. Find and replace them all. – Jack Bashford Dec 06 '18 at 01:01
There is nothing wrong with `...` it's used for destructuring the rest of the object.. – Keith Dec 06 '18 at 01:02
Oh - I thought it broke due to the spread operator. So why isn't the destructuring working? – Jack Bashford Dec 06 '18 at 01:03
OK @Keith I'll edit my answer with that information. – Jack Bashford Dec 06 '18 at 01:12
It's not spread syntax (there is no spread operator), it's a [*destructuring assignment*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). The ellipsis `...` is a punctuator that, in this case, is closer to rest parameter syntax. And removing the ellipsis from `...options` significantly alters the result of the assignment statement. – RobG Dec 06 '18 at 01:13
This is very wrong, you are creating a new const options that will probably be undefined as there is probably not an options property on opts, ...options creates a new const that is the remaining properties left over after width and height have been assigned to consts. – Adrian Brand Dec 06 '18 at 01:25
How would I fix that? – Eve Ninnall Dec 06 '18 at 01:27
You need new lint rules, your lint rules are out of date. – Adrian Brand Dec 06 '18 at 01:36
Here's all the documentation on everything that was done to the code: https://jsfiddle.net/zt7anuL3/18/ It's all written inside the javascript parts. – Eve Ninnall Dec 06 '18 at 01:36
@Adrian Brand Options gathers all remaining properties and assigns them to options. Check the console logs. Its clearly working. https://jsfiddle.net/zt7anuL3/18/ – Eve Ninnall Dec 06 '18 at 03:12
Is that not what you expect? There is nothing wrong with the code, your problem is your lint rules are out of date and reporting false errors. – Adrian Brand Dec 06 '18 at 03:14

score 0 · Answer 2 · answered Dec 06 '18 at 01:21

const {
        width,
        height,
        ...options
    } = opts;

This assigns 3 new consts, width with the value of the width property from opts, height with the value of the height property and options with the ... operator destructuring the remaining properties from the opts object without width and height.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

You need new linting rules to support destructuring as there is nothing wrong with this statement.

Expected an identifier and instead saw '...'

2 Answers2

EDIT: