Object Methods

Morning Activity 1: Working with Code

Player Randomizer Code Optimization

1. Discuss optimizations and do a code walk through of the player randomizer repo
   • identify how to dry code out
   • identify fragile code
   • identify important functionality
2. Comment and prep the repo for code optimization

In class Demo: Carousel Logic

• Create a simple carousel toggle with 2 buttons
• Work in small bursts (as compared to the longer demo from yesterday’s code)

Activity

• At key points during the demo, everyone will have some time to practice working with the code
• Important steps:
  • set up an array to toggle through
  • create a function to increment in 1 direction ++
  • create a function to decrement in the other direction —
  • Limit the increment and decrement to only loop through the array items

Bring a Webpage to Life with Javascript

• Due:: Tuesday March 5
• Weight: 20%
• Objective: Use your knowledge of JS to give a wepage better functionality

Morning Activity 2: Draft a pitch for the hackathon

• Come up with a few potential things to work on (262-assignment 1 is a good option)
  • pick topics and content focus
  • brainstorm and ideate
• Draft a sayable statement (1-2 sentences) of the problem that you are trying to solve
  • not code focused, what does the user get out of your app
  • It does not need to be unique. In fact it’s a good idea to do something that’s got lots of examples to work off of
• If you have time left over, do some research for tutorials, docs, concepts etc.

1. Object Methods

Key Takeaways

• Objects are challenging because you cant loop through them the way you can with arrays
• However if you need to access an object’s properties in this way, you can use these methods
• Other object methods can be used to prevent future changes to an object’s properties, duplicate an object, and other tasks

2. Creating Object Methods

• These are different from the methods that we looked at above
  • They work more like array methods instead of accessing the Object constructor
• Objects may need to be able to perform actions themselves
• to do this, you can add functions into the k/v pairs of objects
• gives access to a scoped this

const obj = {
  propertyOne: "Object Name",
  methodOne () {
    return this.propertyOne
  }
}

• You can then run the method like this:

console.log(obj.methodOne());

3. Local Storage

Advantages and Disadvantages

• Data doesn’t expire and can be accessed offline
• more secure than cookie storage
• Greater storage capacity

Disadvantages

• It’s synchronous (things happen 1 at a time)
  • small bits of data, user won’t notice but larger amounts could cause a slowdown
• Don’t use to store sensitive data
• Data can only be strings
• Too much data will slow down the application

Local Storage, Cookies, Session Storage

• Difference between these two ways of storing information