Introduction to Functions

Recap

• in-class code

Housekeeping

• New CPNT 262 Assessment Schedule

---

1. Defining and invoking functions

Materials

• Functions - reusable blocks of code
• Build your own function

Demo: Greet function

• Starter files
• Gist: Defining functions
• Gist: Invoking functions

2. Arguments and parameters

Materials

• Gist: Function arguments and parameters1
• Reference:
  • template literals
  • Window.prompt()

Breakout Activity

In pairs, create a function that accepts a number as an argument in kilograms (kgs) and converts the number to pounds (lbs).

1. You can use these starter files as a starting point.
2. Declare a function called toPounds that accepts a kilos parameter.
3. Inside the function, multiply kilos by 2.2 to convert to pounds.
4. Log the new amount to the console with console.log.
5. If you have time, use the Window.prompt() method to define kilos from user input.

Don't forget the Pair Programming Dos and Don'ts.

3. Dealing with Coercion

One tricky aspect of Javascript is it will sometimes automatically convert one data type (i.e. a Number) to another (a String). This can lead to unexpected results.

Materials

• JavaScript type coercion explained on Free Code Camp
• Number() function: for converting strings into numbers

---

Lab Time

• Refactor code into functions.
• Plugin' Away Achievement
• Code Challenge: CSS Toggles with element.classList

Prep

Functions

• MDN Readings:
  • Functions - reusable blocks of code
  • Build your own function
  • Function return values
• Videos by Steve Griffith
  • Introduction to Functions in JavaScript
  • JavaScript Function Parameters
  • JavaScript Function Return Statements

Free Code Camp Exercises

• Javascript basics: Exercises 47-55
  • Start: Write Reusable JavaScript with Functions
  • Stop: Stand in Line