CODEWITHSUNDEEP
javascriptfunction
Adi007
Adi007

Reputation: 3

Why the code is giving me error "SyntaxError: Unexpected token {"?

While executing the below code, getting Error : SyntaxError: Unexpected token {

const a = function(x,y){
  this.x = x;
  this.y = y;

  getX(){
    return this.x;
  }

  getY(){
    return this.y;
  }


};

const newA = new a( '1', '2' );

console.log( newA.getX() );
console.log( newA.getY() );

Expected Result : 1 2

Upvotes: 0

Views: 96

Answers (5)

adiga
adiga

Reputation: 35259

You are using class syntax inside a function.

You can create a constructor function and add the methods to a.prototype

function a(x, y) {
  this.x = x;
  this.y = y;
};

a.prototype.getX = function() {
  return this.x;
}

a.prototype.getY = function() {
  return this.y;
}
const newA = new a('1', '2');

console.log(newA.getX());
console.log(newA.getY());

Or, create a class like this:

class a {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  
  getX() {
    return this.x;
  }

  getY() {
    return this.y;
  }
};

const newA = new a('1', '2');

console.log(newA.getX());
console.log(newA.getY());

Another option is to create a getter for X an Y:

class a {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  
  get X() {
    return this.x;
  }

  get Y() {
    return this.y;
  }
};

const newA = new a('1', '2');

console.log(newA.X);
console.log(newA.Y);

Upvotes: 1

slebetman
slebetman

Reputation: 114024

That's not how classes work in javascript. There are two ways to do OO in javascript:

Traditional, prototype-based OO:

// Traditionally javascript does not have classes, but functions can
// behave as constructors if you give it a prototype:

function A (x, y) {
    this.x = x;
    this.y = y;
}

A.prototype.getX = function() {return this.x};
A.prototype.getY = function() {return this.y};

Alternatively you can use the new class syntax:

"New" ES6 classes (actually it's quite old now)

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

    getX() { return this.x }

    getY() { return this.y }
}

You are mixing elements of both syntax - which unfortunately results in invalid syntax

Upvotes: 1

VLAZ
VLAZ

Reputation: 29114

What you wrote is valid for ES6+ class declaration:

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

  getX() {
    return this.x;
  }

  getY() {
    return this.y;
  }
};

const newA = new a('1', '2');

console.log(newA.getX());
console.log(newA.getY());

If you are using a normal function, then you need to assign the properties explicitly:

const a = function(x, y) {
  this.x = x;
  this.y = y;

  this.getX = function() {
    return this.x;
  }

  this.getY = function() {
    return this.y;
  }
};

const newA = new a('1', '2');

console.log(newA.getX());
console.log(newA.getY());

Or use a prototype, so every instance of a will use the same methods, instead of making one set per instance:

const a = function(x, y) {
  this.x = x;
  this.y = y;
};

a.prototype.getX = function() {
  return this.x;
}

a.prototype.getY = function() {
  return this.y;
}


const newA = new a('1', '2');

console.log(newA.getX());
console.log(newA.getY());

Upvotes: 3

Quentin
Quentin

Reputation: 944530

The syntax:

  getX(){
    return this.x;
  }

… is for use inside an object literal or a class, not a function expression.

class A {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  
  getX() {
    return this.x;
  }

  getY() {
    return this.y;
  }
};

const newA = new A('1', '2');

console.log(newA.getX());
console.log(newA.getY());

Upvotes: 0

shrys
shrys

Reputation: 5960

The functions need to be assigned as properties, ref:

const a = function(x, y) {
  this.x = x;
  this.y = y;

  this.getX = function() {
    return this.x;
  }

  this.getY = function() {
    return this.y;
  }


};

const newA = new a('1', '2');

console.log(newA.getX());
console.log(newA.getY());

Upvotes: 1

Related Questions