Can we add nested objects directly inside a class? What would be the correct syntax?

Question

I'm getting into web development and started learning JavaScript a few days ago. In this code I'm trying to create a 'player' class that has abilities (including cannonball). Abilities would be a nested object inside the player class. Cannonball would be a nested object of the abilities object. When I try to create a player I get an error with the syntax of 'abilities: {' Sorry if I'm totally butchering the title of everything. I'm only a few days into coding in general!

class player {
  constructor(name,phrase) {
    this._name = name;
    this._catchPhrase = phrase;
  }
  get name() {
    return this._name;
  }
  abilities: {
    cannonball: {
      damage: 20;
    }
  }
}

Answer 1

You can make your abilities property work as shown below. See comments in the code for details.
(And refer to MDN early and often for all your web-related ponderings.)

class Player { // Uses initial capital letter by convention

  constructor(name, phrase) {
    this._name = name;
    this._catchPhrase = phrase;

    // Adds the `abilities` property to all instances of Player
    this.abilities = {
      // abilities is an object with a cannonball property
      cannonball: {
        // cannonball is an object with a damage property
        damage: 20 // No semicolon in object literal
      }
    };
  }

  get name() {
    return this._name;
  }
}
// Makes a new player, and shows that her abilities include `cannonball`
const player = new Player("Grandma", "Hold my beer!");
for(let prop of Object.keys(player.abilities)){  
  console.log(player.abilities[prop]);
}

Answer 2

Javascript do not have the syntax like class player { abilities: {...} }.

More information about javascript classes.

You can bind your abilities object to player instance on construtor, or use getter instead.

// example
class player {
    constructor(name, phrase) {
        this._name = name;
        this._catchPhrase = phrase;
        // your abilities object
        this.abilities = {
            cannonball: {
                damage: 20;
            }
        }
    }

    // or use getter
    get abilities() {
        return {
            cannonball: {
                damage: 20;
            }
        }
    }
}

If you really need a nested-class solution like Java, see Lorenzo Polidori's answer of this question.

Answer 3

After some experimentation I found this syntax to work! If possible could someone critique this? Basically this class should hold name, catchphrase, two abilities (different objects that contain damage and currAmount)!

Thank you all!

class player {
  constructor(name,phrase) {
    this._name = name;
    this._catchPhrase = phrase;
    this._abilities = {
      _cannonball: {
        _damage: 20,
        _currAmount: 3,
      },
      _arrows: {
        _damage: 10,
        _currAmount: 10,
      }
    }
  }
}

Answer 4

Here's the final mini project I was asking this question for. I'm currently on day 4 of learning Javascript and this is the best I got. Thank you so much again!

class player {
  constructor(name,phrase) {
    this._name = name;
    this._catchPhrase = phrase;
    this._health = 100;
    this._abilities = {
        _cannonball: {
          _damage: 20,
          _currAmount: 3,
        },
        _arrows: {
          _damage: 10,
          _currAmount: 10,
        },
    }
  }
  set lowerCannon(lowerBy) {
    this._abilities._cannonball._currAmount -= lowerBy;
  }
  set lowerArrows(lowerBy) {
    this._abilities._arrows._currAmount -= lowerBy;
  }
  set lowerHealth(lowerBy) {
    this._health -= lowerBy;
    if (this._health <= 0) {
      this._health = 0;
    }
  }
}

//shooting functions that lower current amount
var shootCannon = (playerTurn,playerHit) => {
  if (playerTurn._health === 0 || playerHit._health === 0)
  {
    //console.log('Game has already ended!')
  }
  if (playerTurn._abilities._cannonball._currAmount === 0) {
    console.log(`${playerTurn._name} is out of Cannonballs!`)
    shootArrows(playerTurn,playerHit);
  }
  else {
  playerTurn.lowerCannon = '1';
  playerHit.lowerHealth = playerTurn._abilities._cannonball._damage;
  console.log(`${playerTurn._name} has fired a cannonball dealing ${playerTurn._abilities._cannonball._damage} damage!...`);
  console.log()
  console.log(`${playerHit._name}'s health is now at ${playerHit._health}!`);
  console.log()
  }
}
var shootArrows = (playerTurn,playerHit) => {
  if (playerTurn._health === 0 || playerHit._health === 0)
  {
    //console.log('Game has already ended!')
  }
    if (playerTurn._abilities._arrows._currAmount === 0) {
    console.log(`${playerTurn._name} is out of arrows!`)
    shootCannonball(playerTurn,playerHit);
  }
  else {
  playerTurn.lowerArrows = '1';
  playerHit.lowerHealth = playerTurn._abilities._arrows._damage;
  console.log(`${playerTurn._name} has fired arrows! dealing ${playerTurn._abilities._arrows._damage} damage!...`);
  console.log()
  console.log(`${playerHit._name}'s health is now at ${playerHit._health}!`);
  console.log()
  }
}

//Make computer fight each other functions
var randomAttack = (playerTurn,playerHit) =>{
  index = Math.floor(Math.random()*2);
  if (index === 1) {
    return shootArrows(playerTurn,playerHit);
  }
  else {
    return shootCannon(playerTurn,playerHit);
  }
}
var botMatch = (playerTurn,playerHit) => {
  if (playerTurn._health <= 0 || playerHit._health <= 0) {
    if (playerTurn._health > playerHit._health) {
      console.log(`${playerTurn._name} has won!`)
    }
    if (playerTurn._health < playerHit._health) {
      console.log(`${playerHit._name} has won!`)
    }
    console.log('Game Over!')
  }
  else {
    randomAttack(playerTurn,playerHit);
    randomAttack(playerHit,playerTurn);
    botMatch(playerTurn,playerHit);
  }
}

const player1 = new player('Juan','Let\'s Go!');
const player2 = new player('Jaileth','Beep Beep');

botMatch(player1,player2);