Class variables outside a class

Question

Lets say that I have a class like this

class Vector {
    constructor(x,y) {
        this.x = x
        this.y = y
    }
}

How can i do something like this

class Vector {
    constructor() {
    }
    var x;
    var y;
}
var v = new Vector()
v.x = 3
v.y = 4

I basically want to declare my variables outside the constructor. Done some research. Found nothing

There is no need to declare it. You can still assign it after instance creation. — Rajaprabhu Aravindasamy, Apr 06 '17 at 12:59

score 3 · Accepted Answer · edited May 23 '17 at 11:46

3

I guess you are talking about Property Initialiazers.

Your code could work fine if you modify it a little:

class Vector {
    constructor() {}

    x = 1;
    y = 2;
}

var v = new Vector();

console.log(v.x, v.y); // 1 2

v.x = 3
v.y = 4

console.log(v.x, v.y); // 3 4

Just keep in mind that this is currently a stage-2 proposal, so it won't work in any browser out of the box.

If you are using babel you can use transform-class-properties plugin though.

If you are not using babel there are some alternatives that you could use - they have been discussed in this question.

edited May 23 '17 at 11:46

Community

1
1

answered Apr 06 '17 at 13:58

biphobe

4,525
3
35
46

Thank you. I'll try to setup babel with webpack – Blaze349 Apr 06 '17 at 14:13
But do I have to give them values? – Blaze349 Apr 06 '17 at 14:17
1

@Blaze349 Yes, although even something like `x = null;` would work if you're going to replace the value later. – biphobe Apr 06 '17 at 14:23
If it's a stage 2 proposal then it's not part of ES7 (ES2016). ES2016 was released last year! – Felix Kling Apr 06 '17 at 19:37

Ricky Ruiz · Answer 2 · 2017-04-06T15:35:42.457

You can assign the properties after the instance is created:

class Vector {
  constructor() {
    this.x = null;
    this.y = null;
  }
}

let v = new Vector();

v.x = 1;
v.y = 2;

console.log(v.x, v.y); // 1 2

OR

You can define the properties with get and set like so:

class Vector {
  constructor() {
    this.xValue = null;
    this.yValue = null;
  }
  get x() {
    return this.xValue;
  }
  set x(newVal) {
    this.xValue = newVal;
  }
  get y() {
    return this.yValue;
  }
  set y(newVal) {
    this.yValue = newVal;
  }
}

let v = new Vector();

v.x = 1;
v.y = 2;

console.log(v.x, v.y); // 1 2

The second approach lets you manipulate the new value before setting it.

Example:

class Vector {
  constructor() {
    this.xValue = null;
    this.yValue = null;
  }
  get x() {
    return this.xValue;
  }
  set x(newVal) {
    this.xValue = `The value of 'x' is ${newVal}.`;
  }
  get y() {
    return this.yValue;
  }
  set y(newVal) {
    this.yValue = `The value of 'y' is ${newVal}.`;
  }
}

let v = new Vector();

v.x = 1;
v.y = 2;

console.log(v.x, v.y); // The value of 'x' is 1. The value of 'y' is 2.

Class variables outside a class

2 Answers2