Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Structuring Your Code

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Narrative Flow

3:47 with Megan Amendola

Learn how to structure your code like a story. Give it a beginning, middle, and end.

Narrative flow involves writing your code as if someone were reading a story of how the program will work.

You can also use this process to layout your code using code comments before you even start. This is called Pseudocode. Check out our workshop on writing pseudocode.

JavaScript Code Example

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    When your code follows a logical narrative flow, it makes reading it and 0:00
    understanding what is happening a lot easier for both yourself and others. 0:05
    For example, 0:11
    if you asked a friend to look after your house plants while you were on vacation, 0:12
    and you left them directions like this water plants, 0:17
    check if the soil is dry, fill watering can, 0:21
    they would probably be able to figure out what they needed to do. 0:25
    But wouldn't having the directions in the proper order just be easier to understand? 0:29
    This is the whole idea behind narrative flow. 0:36
    Order your code and functions in a way that whoever reads it 0:39
    can follow the flow of your program and understand what it does. 0:43
    In my experience, it also keeps me from forgetting a step. 0:48
    Let's practice this with a real example. 0:52
    We will be using Python for our examples, but don't worry if you don't know Python. 0:55
    It's known for being very easy to read. 1:01
    And I placed the same code in JavaScript in the teacher's notes below as well. 1:04
    Open up the narrative coding file and take a minute to read through the code and 1:10
    see if you can figure out what this program is trying to do. 1:15
    You can also run the file by typing in python and 1:19
    then the name of the file narrative_coding.py. 1:24
    Go ahead and pause me and then hit Play when you're ready. 1:29
    This first function is called ears. 1:35
    So my mind starts thinking of things that have ears. 1:38
    Followed by feet, then hair and so on. 1:43
    I didn't really catch that I'm making a character 1:47
    until I got down to the character_name function. 1:51
    Let's look at how we can make this code easier to understand 1:55
    by rearranging the functions in a more logical order. 1:59
    You may think to move the create_character function to the top. 2:04
    But that function is putting all of our information together and 2:08
    printing out our character to the console. 2:13
    This is better kept as our final step in this process. 2:16
    Instead, let's move character_name to the top. 2:20
    Cut. 2:26
    And paste. 2:34
    Next, let's organize the rest of the functions to follow some 2:35
    character creations patterns. 2:39
    I would put the race function next to give more of a hint. 2:41
    The character you just named will be one of these fantasy races. 2:45
    I pulled a few from Dungeons and Dragons. 2:50
    The next steps in the character creation process are to customize your character 3:04
    from head to toe. 3:07
    So let's put our functions here in that order too, hair, then ears, then feet. 3:09
    Finally, our create_character function puts all of this info together and 3:28
    gives us our character. 3:33
    To me, this is a nice, logical order to the functions and 3:35
    makes reading the file a lot easier. 3:39
    Great job developers. 3:42
    Don't forget to check the teacher's notes for more information. 3:44

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up