Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

createTokens() Method Solution

3:06 with Ashley Boucher

See the solution for the createTokens() method assignment.

Teacher's Notes
Video Transcript
Downloads

JS Documentation

To read more about how to document your JS code, visit usejsdoc.org and devdocs.io/jsdoc.

Code Documentation Correction

The project files are correct, but there's a small error in what you see on screen.

The documentation for this method is missing the @param information. The complete documentation should look like this:

/**
  * Creates token objects for player
  * @param   {integer}   num - Number of token objects to be created
  * @return  {array}     tokens - an array of new token objects
  */

Solution Code

Player class `constructor` method:

constructor(name, id, color, active = false) {
        this.name = name;
        this.id = id;
        this.color = color;
        this.active = active;
        this.tokens = this.createTokens(21);
}

Player class `createTokens()` method:

/**
 * Creates token objects for player
 * @param   {integer}   num - Number of token objects to be created
 * @return  {array}     tokens - an arary of new token objects
 */
createTokens(num) {
    const tokens = [];

    for (let i = 0; i < num; i++) {
        let token = new Token(i, this);
        tokens.push(token);
    }

    return tokens;
}

Welcome back. 0:00

How did you feel about writing this method? 0:01

Don't worry if you had any trouble, the solution for 0:03

this method is up on screen and I'm going to walk you through it now. 0:05

I'm inside my player.js file where I wrote the method. 0:09

As you can see, just below my constructor method, I created the method createTokens. 0:12

It accepts one parameter, num. 0:19

Num represents the number of token objects to be created. 0:21

Inside the method I created a variable called tokens 0:26

that's equal to an empty array. 0:30

This array will be populated in the following lines of code, 0:33

with all of our new token objects, and the array will then be returned. 0:37

After creating the empty array, I wrote a for loop that will iterate num times. 0:41

Inside the for loop, I do two things, 0:48

first I create a variable called token and set it equal to new Token object. 0:51

This is where the loop index and 0:56

the owning player object are passed to the token's constructor method. 0:58

After that, I add the newly created token to my tokens array using the push method. 1:03

When the loop is finished and all the tokens have been created, 1:08

I return the array. 1:12

But where's it being returned to? 1:13

Part of your assignment for 1:16

this step was to call the create tokens method from inside the constructor method. 1:18

By changing the tokens property to be set to the return value from the method call. 1:22

If you jump up to the constructive method, you can take a look at this. 1:27

As you can see I've set the token property to the return value from the method call. 1:32

Note how when I call the create tokens method, I'm using the this keyword. 1:38

Indicating that the method I want to call is available on the object that we're 1:42

initializing. 1:46

I've also passed the number 21 as an argument to the createTokens method. 1:47

21 might seem like an arbitrary number, but 1:52

you'll see later when we write the code that builds out the board and spaces, 1:55

that 21 is equal to half of the number of spaces on the board. 2:00

Each player gets 21 tokens total. 2:04

So that the game board can be completely filled without 2:06

having any tokens left over. 2:10

If you wanted you could make the game more difficult by reducing the number of 2:11

tokens. 2:16

This would limit the number of opportunities that a player had to 2:16

make a winning move. 2:20

Before you move on, 2:21

I would like to talk to you about the commenting you see above my method. 2:22

This is a commonly used way to document JavaScript code. 2:26

Every method in your classes should be documented like this. 2:29

This way, anyone, including yourself if it's been a while since you've worked 2:32

with a code base, can quickly figure out what each method is responsible for. 2:36

The documentation should give a quick summary of the method, and 2:40

then describe any arguments it receives, and anything that's returned. 2:44

Check out the teacher's notes for a link to a website that describes the syntax you 2:48

should use for this documentation in detail. 2:53

Okay, take a moment to make any necessary changes to your code so 2:55

that it matches the solution you see on-screen. 2:59

And then head over to the next step, where you will start building out the board. 3:02

You need to sign up for Treehouse in order to download course files.

Sign up