If-Statement inside JavaScript Class Constructor

Question

I am trying to use conditional logic inside a JavaScript class constructor.

Context: I am creating a 2d grid in a double for loop, with each cell having a property of North, South, East, and West. To keep in bounds of the 2d Grid, I am trying to only create a cell that has N,S,E properties, if that cell lay on the edge with col equal to 0.

For a 4x4 grid, I try to build this item and I keep getting the error, "Uncaught SyntaxError: Unexpected token '!='". So I believe the issue is just with my poor knowledge of Javascript Syntax. Any Suggestions?

class Cell {
    constructor(row,col){
        this.visited = false;
        this.row = row;
        this.col = col;
        this.edges = {
            if(row!=0){
                north:1,
            },
            if(row!=3)){
                south:1,
            },
            if(col!=0)){
                west:1,
            },
            if(col!=3)){
                east:1,
            },
       }
    }
}

norbitrial · Accepted Answer · 2020-02-12 21:10:26Z

2

I would use with ternary operators instead of if statements there. About Conditional (ternary) operator please read as below:

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

For example this one is a good syntax for your case:

const row = 2;
const col = 3;
const edges = {
  north: row != 0 ? 1 : 0,
  south: row != 3 ? 1 : 0,
  west: col != 0 ? 1 : 0,
  east: col != 3 ? 1 : 0
};

console.log(edges);

I hope that helps!

answered Feb 12, 2020 at 21:10

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Conner Nance Over a year ago

Thanks so much for your feedback!

Markus Zeller Over a year ago

What if OP does not want all properties, only those who match?

norbitrial Over a year ago

@MarkusZeller That's a good point, I see your answer covers that scenario. So I guess in that case the if statement is the winner as you provided.

Taki · Accepted Answer · 2020-02-12 21:10:39Z

1

You can use the ternary operator

class Cell {
  constructor(row, col) {
    this.visited = false;
    this.row = row;
    this.col = col;
    this.edges = {
      north: row !== 0 ? 1 : null,
      south: row !== 3 ? 1 : null,
      west: col !== 0 ? 1 : null,
      east: col !== 3 ? 1 : null
    };
  }
}

answered Feb 12, 2020 at 21:10

Taki

17.7k5 gold badges28 silver badges48 bronze badges

2 Comments

Markus Zeller Over a year ago

What if OP does not want all properties, only those who match?

Conner Nance Over a year ago

Thanks so much for your feedback!

Code-Apprentice · Accepted Answer · 2020-02-12 21:10:55Z

1

You cannot use if statements inside of an object literal. Instead, you should use the if statement to assign to the field of the object directly:

this.edges = {};
if (row != 0) {
    this.edges.north = 1;
}
// etc.

answered Feb 12, 2020 at 21:10

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

1 Comment

Conner Nance Over a year ago

Thanks so much for your feedback!

Markus Zeller · Accepted Answer · 2020-02-12 21:11:19Z

1

This syntax wont work. Create an empty object and add property afterwards.

class Cell {
    constructor(row,col){
        this.visited = false;
        this.row = row;
        this.col = col;
        this.edges = {};
        if(row!=0){
            this.edges.north = 1;
        }
        if(row!=3)){
            this.edges.south = 1;
        }
        if(col!=0)){
            this.edges.west = 1;
        }
        if(col!=3)){
            this.edges.east = 1;
        }
    }
}

answered Feb 12, 2020 at 21:11

Markus Zeller

9,2142 gold badges34 silver badges39 bronze badges

Collectives™ on Stack Overflow

If-Statement inside JavaScript Class Constructor

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related