Unexpected Token in Variable Declaration Javascript AngularJS

Question

I'm trying to create a service in Angular, but my compiler (Gulp) seems to be having problems with the variable that I define in the beginning. The exact error is Module build failed: SyntaxError: C:/*PATH*/src/app/components/demo.service.js: Unexpected token (8:8), and the code it's pointing at is this: var demos = [new Demo("Example Demo", "<b>Example Demo</b>")]; with it pointing specifically at the "d" in the variable name. For context, here's the whole file:

import { Demo } from './interfaces/demo';

export class DemosService {
    constructor() {
        'ngInject';
    }

    var demos = [new Demo("Example Demo", "<b>Example Demo</b>")];

    addDemo(name, html) {
        this.demos.push(new Demo(name, html));
    }

    removeDemo(name) {
        this.demos.splice(this.demos.indexOf(name), 1);
    }

    updateDemo(oldName, newName, html) {
        this.demos[this.demos.indexOf(oldName)].setName(newName);
        this.demos[this.demos.indexOf(oldName)].setHtml(html);
    }

    getDemoInfo(name) {
        return [this.demos[this.demos.indexOf(name)].getName(), this.demos[this.demos.indexOf(name)].getHtml()];
    }

    getDemos() {
        return this.demos;
    }
}

I'm sure this is a really stupid question and that the solution is really easy, but I just can't seem to find it. Thank you all in advance!

score 1 · Accepted Answer · answered Jun 20 '17 at 16:23

1

It's because you can't declare a variable the way you have declared demos in ES6.

Move this line :

 var demos = [new Demo("Example Demo", "<b>Example Demo</b>")];

into your constructor like this :

 constructor() {
        'ngInject';
      this.demos = [new Demo("Example Demo", "<b>Example Demo</b>")];
    }

Then when you need to access demos just make sure you call this.demos. The error is because of the way scoping works in a class in ES6.

answered Jun 20 '17 at 16:23

ckruszynsky

533
3
7

And in doing that I can get rid of any "var demos" line outside of the constructor, correct? – WubbaLubbaDubbDubb Jun 20 '17 at 16:27
I have another problem now: telling the console to log the getDemos method from another class returns "undefined". I can provide the Demo class if you'd like – WubbaLubbaDubbDubb Jun 20 '17 at 18:54
Yes doing that you can get rid of any var demos outside the constructor as variables can only be defined in a class in either the constructor or in a function. For your other issue can you provide a sample of the code so I can see it; please. – ckruszynsky Jun 21 '17 at 12:59
Thanks, I ended up fixing it though. Thanks for all your help! – WubbaLubbaDubbDubb Jun 21 '17 at 15:09
@WubbaLubbaDubbDubb glad you got working and no problem. – ckruszynsky Jun 24 '17 at 01:08
This helped me. However, instead of using `this.demos`, I had to declare `this` as a variable itself like in [this answer](https://stackoverflow.com/a/44961696/1369235). – Himanshu May 02 '22 at 08:35

score 0 · Answer 2 · answered Jun 20 '17 at 16:22

You have to declare the demos variable as class variable so if you change the code like this, it should be ok

mport { Demo } from './interfaces/demo';

export class DemosService {
constructor() {
    'ngInject';
}

private demos:any = [new Demo("Example Demo", "<b>Example Demo</b>")];

addDemo(name, html) {
    this.demos.push(new Demo(name, html));
}

removeDemo(name) {
    this.demos.splice(this.demos.indexOf(name), 1);
}

updateDemo(oldName, newName, html) {
    this.demos[this.demos.indexOf(oldName)].setName(newName);
    this.demos[this.demos.indexOf(oldName)].setHtml(html);
}

getDemoInfo(name) {
    return [this.demos[this.demos.indexOf(name)].getName(), this.demos[this.demos.indexOf(name)].getHtml()];
}

getDemos() {
    return this.demos;
}

}

Unexpected Token in Variable Declaration Javascript AngularJS

2 Answers2

Linked