examples

2 min read

So, I recently decided with a co-worker to start learning Javascript all over again, and just re-familiarizing myself with concepts, and in general just have fun learning! So, a few weeks ago i went ahead and decided to do a fun little setup with ES6 Classes. You can see the repo and our progress here.

Here is the resulting code:

Here I created a base class for a basketball game:

// We Declare the new class
class BallGame {
  // We generate some base constructors, but we plan to improve upon them.
  constructor(home, away) {
    this.homeName = home.name;
    this.awayScore = away.firstHalf.score + away.secondHalf.score;
    this.awayName = away.name;
    this.homeScore = home.firstHalf.score + away.secondHalf.score;
    // An Example of binding this to a function
    this.AverageHalf = this.AverageHalf.bind(this);
  }
  
  // A simple introduction function!
  introduction() {
    return `${this.homeName} will be facing the ${this.awayName}`;
  }
  
  // We show off how to do some object deconstruction, as well as a function to mathematically figure out what our total Steals are
  awaySteals() {
    // Let's deconstruct away!
    const { firstHalf, secondHalf } = away;
    return firstHalf.steals + secondHalf.steals
  }

  // We could make a generic steals function, but I wanted to show case the use of a getter.
  get homeSteals() {
    // Using a getter we can bind to a variable.
    return home.firstHalf.steals + home.secondHalf.steals;
  }

  // Notice that we do not need to reference after binding it
  AverageHalf() {
    const average = ((away.firstHalf.score + home.firstHalf.score) / 2) + ((away.secondHalf.score + home.secondHalf.score) / 2) / 2;
    return average;
  }
}

// Extend our class to compute a winner
class Winner extends BallGame {
  winner() {
    return this.homeScore > this.awayScore ? `${this.homeName} Win!` : `${this.awayName} Win!`
  }
}

Here I wanted to create an object that could be passed into my class where I could then use the data:

// 2C Create Our Objects
var home = {
  name: 'Hoosiers',
  firstHalf: {
    score: 52,
    steals: 8,
  },
  secondHalf: {
    score: 60,
    steals: 9,
  }
}

var away = {
  name: 'Jayhawks',
  firstHalf: {
    score: 52,
    steals: 3,
  },
  secondHalf: {
    score: 53,
    steals: 12,
  }
}

Here is where I wanted to display the data!

// We make a new ball game.
const Game = new BallGame(home, away);

// Let's ask for the winner after the data has been computed.
const ExtendedBallGame = new Winner(home, away);

console.log('Make an introduction:', Game.introduction());
console.log('Our Base Class:', Game);
console.log('calling our extend:', ExtendedBallGame.winner());
console.log('Our Average points per half:', Game.AverageHalf());
console.log('After Desconstruction:', Game.awaySteals());

// Notice that with the usage of a getter, the function call is implied, so cool!
console.log('Use a getter:', Game.homeSteals);

Using this ES6 exercise it REALLY helped put into perspective a lot about how react works, and what react REALLY is.....a beautifully written class.

Sam Clark

Sam Clark

Read more posts by this author.