Functions | The Verbs of Programming

We will practice wrapping conditional logic and mathematical expressions within functions for increased reusability.

Prep

  • Read What are Functions in Javascript
  • For Discussion: Browse the web and find 5 examples of actions that you can do
    • if you can’t find examples on websites, try web apps and video games

Scrum Retrospective

  • How has your work gone this week?
  • What topics are making sense? and which ones arent? - elaborate
  • What do you feel like you need more of for your learning?
  • What did you do well / what are your proud of?

Calculator Demo

  1. Walk through our code from where we left off
  2. Note things that are working, not working, buggy, poorly designed, or in a general state of disrepair
  3. Plan what your goals are
  4. Outline your brute force method
  5. Implement your code
  • After the bruteforce code demo, we will take 20 minutes for everyone to work on their own implementations

Optimization Phase

  1. Walk through your code and note things to improve
    • look for disorganized code
    • look for error handling needs
    • look for logic that needs to be expanded
  2. Decide on optimizations to make and begin doing them
    • do them 1 at a time
    • pick the most important or one that others are dependent upon to start with
    • decide on how far you want to go
    • do any needed research
  3. Improve your code
    • walk through the code and fix things up in order
    • if you need to stop, leave TODO: messages so you remember later
    • avoid jumping around or starting new things while doing this

1. Introduction to Functions

Intro to functions

Key Takeaways

  • Functions make code re-usable and portable
  • Functions make code safer
  • Declare a function to make it invocable, invoke it to use it
  • JS has traditional and fat-arrow syntax for functions
  • Functions can take parameters as arguments
  • Functions return values

Activity: Create Calculator Helper Functions

  • Review your code and look for logic that can be extracted into functions (ie: math operations)
  • try to extract a few pieces of logic (2-5) into helper functions
  • implement the functions where your logic was previously
  • Push your code (and submit to the dailies codebox for day 5 if you would like it reviewed)

2. Naming Conventions

There are some patterns for naming conventions for variables and functions that can be really helpful for readability

Booleans

  • prefix with is and has
    • ie: isActive, hasId

Functions

  • prefix with a verb, use a descriptive noun
    • ie: getUserName(), calculateTotalCost()

Variables

  • treat like nouns, be clear and concise
    • ie: userName, currentSlide
  • avoid super general names
  • sometimes it’s convention to use single letter names
    • ie: i for a loop iterator, e for event

Today's Achievement

End of Day Activity DRYing code with functions

DRY → Don’t Repeat Yourself

Phase 1: Dry out code

  • copy this code (fork or download) and have it inialized as a repo in github
  • follow the refactor instructions
  • make sure that the right values are logged

Phase 2: Render values to an html page

  • create an index.html file and connect the js file to it
  • use document.querySelector() in js with ids in html to display the values on the page

Phase 3: Make it interactive

  • Add input fields
  • Refactor the code so that the input data is calculated follow the in class repo
  • Add error handling so the user cannot calculate non numbers

Phase 4: Show it off!

  • deploy the page and send a link to it as well as the repo in the dailies drop box for today